今天来制作一个简单的心跳效果，不需要很多代码，添加一个盒子，充分利用CSS展现就可以啦。
1.首先我们在页面添加一个可视化的盒子
2.然后给它先变成一颗心
.heart{
position:relative;
width:100px;
height:100px;
margin:100px;
}
.heart:after,
.heart:before{
position:absolute;
width:60px;
height:100%;
background-color:#ff6666;
content:"";
border-radius:50% 50% 0 0;
}
.heart:before{
left:0;
transform:rotate(-52deg);
}
.heart:after{
right:0;
transform:rotate(49deg);
}
3.最后设置一下动画animation，这里要说一下animation必须和@keyframes一起用哦，因为动画没有动画帧还怎么动吖，就像你用筷子用两根一样，肯定不用一根对叭。
animation:scale 1s linear infinite;
/*名称 1s 匀速 无限循环*/
我们让它水平垂直两倍缩放
@keyframes scale{ /*动画帧*/
50%{transform:scale(2)}
}
下面源代码送上~
外汇经纪商对比http://www.fx61.com/brokerlist
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>心跳效果</title>
<style>
*{margin:0; padding:0;}
li{list-style:none;}
a{text-decoration:none;}
.heart{
position:relative;
width:100px;
height:100px;
margin:100px;
animation:scale 1s linear infinite;
/*名称 1s 匀速 无限循环*/
}
@keyframes scale{ /*必须和animation一起用 动画帧*/
50%{transform:scale(2)}
}
.heart:after,
.heart:before{
position:absolute;
width:60px;
height:100%;
background-color:#ff6666;
content:"";
border-radius:50% 50% 0 0;
}
.heart:before{
left:0;
transform:rotate(-52deg);
}
.heart:after{
right:0;
transform:rotate(49deg);
}
</style>
</head>
<!-- 可视化区域-->
<body>
<div class="heart"></div>
</body>
</html>
</p> <p>*{margin:0; padding:0;}</p> <p>li{list-style:none;}</p> <p>a{text-decoration:none;}</p> <p>.heart{</p> <p>position:relative;</p> <p>width:100px;</p> <p>height:100px;</p> <p>margin:100px;</p> <p>animation:scale 1s linear infinite;</p> <p>/*名称 1s 匀速 无限循环*/</p> <p>}</p> <p>@keyframes scale{ /*必须和animation一起用 动画帧*/</p> <p>50%{transform:scale(2)}</p> <p>}</p> <p>.heart:after,</p> <p>.heart:before{</p> <p>position:absolute;</p> <p>width:60px;</p> <p>height:100%;</p> <p>background-color:#ff6666;</p> <p>content:"";</p> <p>border-radius:50% 50% 0 0;</p> <p>}</p> <p>.heart:before{</p> <p>left:0;</p> <p>transform:rotate(-52deg);</p> <p>}</p> <p>.heart:after{</p> <p>right:0;</p> <p>transform:rotate(49deg);</p> <p>}</p> <p>
原文链接：https://blog.csdn.net/Marquis_Nicole/article/details/106758567
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。