实现目标
- 纯css绘制爱心
- 爱心要有呼吸的律动
- 有投影
结构分析
爱心乍一看上去好像不太好画，但是我们先给他拆分一下结构，就简单很多了。
如下图：
爱心的形状我们可以看做是由两个相同的圆和一个正方形组成，再将它旋转45度，就可以得到一个爱心了。
是不是挺像那么回事的了，接下来我们就开始绘制了。
代码实现
第一步、编写dom
使用一个div绘制正方形，再使用两个伪元素绘制两个圆，这样我们只用写一个div就可以实现了。
1
| <div class="love"></div>
|
第二步、绘制正方形
1
2
3
4
5
6
7
8
9
| .love{
position: relative;
width: 200px;
height: 200px;
background-color: pink;
margin: 200px auto 0;
}
|
第三步、绘制左上角的圆
1
2
3
4
5
6
7
8
9
10
11
| .love::before {
content: '';
position: absolute;
left: -100px;
width: 200px;
height: 200px;
background-color: pink;
border-radius: 100px;
}
|
第四步、绘制右上角的圆
1
2
3
4
5
6
7
8
9
10
11
| .love::after {
content: '';
position: absolute;
width: 200px;
height: 200px;
background-color: pink;
border-radius: 100px;
top: -100px;
}
|
第五步、旋转45度
1
2
3
| .love {
transform: rotate(45deg);
}
|
这样我们就得到一个粉色的爱心了~
第六步、添加投影效果
我们知道给一个dom添加投影效果，我们通常会用到box-shadow，但是我们使用这个给爱心添加投影后，并没有达到我们预期的效果，这是因为什么呢？
我们要知道box-shadow只能给规则的物体添加投影，如长方形，正方形，圆等。我们的爱心属于不规则物体，那么怎么给不规则物体添加投影呢？这就要说起css3的另外一个属性了，filter: drop-shadow()滤镜。
1
2
3
| .love {
filter: drop-shadow(0px 0px 50px red)
}
|
第七步、添加动画
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| .love {
animation: jump 1s linear infinite;
}
@keyframes jump {
0% {
transform: rotate(45deg) scale(1);
}
60% {
transform: rotate(45deg) scale(1.2);
}
100% {
transform: rotate(45deg) scale(1);
}
}
|
效果
在码上掘金可以看到完整的代码以及实现效果哦~（小提示：别忘了点运行哦）
demo看效果
(完)
