【CSS】使用css画一个跳动的小心心

最新推荐文章于 2024-07-10 23:34:24 发布

歌声缓缓

最新推荐文章于 2024-07-10 23:34:24 发布

阅读量207

点赞数

分类专栏： css 文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_43444977/article/details/128001476

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

在这里插入图片描述

使用CSS样式写一个跳动的小心心

具体代码如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"></link>
    </head>
<body>

<div class="heart">
</div>

         <script>
          
         </script>
     <style>
	   body{
	   display:flex;
	   justify-content:center;
	   padding-top:300px;
	   }
       .heart{
	    width:200px;
		height:200px;
		background:red;
		opacity:1;
		transform:rotate(45deg) scale(0.5);
		animation:ani 2s infinite;
	   }
	   @keyframes ani {
	    25% {
			opacity:0.5;
			transform:rotate(45deg) scale(1)
		}
		50% {
			opacity:1;
			transform:rotate(45deg) scale(1.5)
		}
		75% {
			opacity:.5;
			transform:rotate(45deg) scale(.5)
		}
		100% {
			opacity:1;
			transform:rotate(45deg) scale(1)
		}
	   }
	   
	   .heart::before{
	   content:'';
	   position:absolute;
		width:200px;
		height:200px;
		background:red;
		border-radius:50%;
		transform:translateX(-100px);
	   }
	   .heart::after{
	   content:'';
	   position:absolute;
		width:200px;
		height:200px;
		background:red;
		border-radius:50%;
		transform:translateY(-100px);
	   }
        
    </style>
 
</body>
</html>