第一次写博客，来记录自己在前端上的成长，并且希望能够借鉴到其他大神的经验来提高自己的水平。这次打算用css来画一个爱心并实现“爱心跳动”的功能，下面如果有表述不正确的叙述，欢迎各位大神前来指导~
css画爱心并实现“爱心跳动”用到了以下相关知识点：背景图片、定位、CSS3的animation、CSS3的border-radius、伪元素::before和::after
这个爱心可以由一个正方形和两个圆形构成，先简单用div画出一个正方形，以蓝色背景为例，在此，为了方便展示，我给正方形加上了一个margin，方便后面的展示。正方形如下图所示：
然后我们需要给正方形左侧和上侧添加伪元素，就是给左侧和上侧添加两个正方形，然后通过border-radius=50%将两个正方形变成两个圆形，然后定位移动两个圆形的位置来调成爱心形状。未调节两圆形的图形如下图所示：
可能会疑惑为什么只有一个圆形？这是因为这两个圆形重叠在一起了，所以我们需要靠定位来实现爱心的形状，通过调试，我们调节后的爱心如下图所示：
现在看是不是有点像爱心的形状了，只要把蓝色部分变成红色就行，如下图所示：
这样一个爱心就出来啦！我们可以通过使用transform：rorate()来旋转爱心，下面为旋转后的爱心，如下图所示：
通过这个方法，我们就可以随意旋转爱心的方向了，然后现在就是让爱心跳动起来，就是让爱心放大缩小这样持续，我们可以用animation来操作，这个就不做图片展示了，小伙伴们一会可以参考下面代码自己操作一下。最后就是添加一张你喜欢的背景图片，用background来添加，通过background-size：cover；来使背景图片铺满整个页面。这样一颗红色爱心跳动的效果就成功啦！所有的代码如下所示，可供小伙伴们参考。
1
2
3
4
5
6
7
8
css画爱心
9
10 body{
11 background:url("images/1.jpg") no-repeat;
12 background-size:cover;
13
14 }
15
16 .heart{
17 width:200px;
18 height:200px;
19 background-color:red;
20 position:relative;
21 margin:100px auto;
22 animation:size 1s infinite;
23 animation-direction:alternate;
24 }
25
26 .heart::before,27 .heart::after{
28 content:"";
29 width:200px;
30 height:200px;
31 background-color:red;
32 position:absolute;
33 border-radius:50%;
34 }
35
36 .heart::before{
37 left:-90px;
38 }
39
40 .heart::after{
41 top:-90px;
42 }
43
44 @keyframes size{
45 0% {46 transform:scale(0.6) rotate(45deg);
47 }
48
49 100%{
50 transform:scale(1) rotate(45deg);
51 }
52 }53
54
55
56
57
