css做简单的爱心跳动特效

制作爱心跳动特效

设计思路：

1. 首先通过一个div来做爱心的主题部分并设置宽高背景色，旋转角度
2. 通过对伪元素before和after设置爱心的上半部分
3. 用绝对定位设置伪元素的位置
4. 通过设置伪元素的圆角边框最终成为爱心的形状
5. 通过css动画设置旋转角度，改变大小，最终有跳动的效果

制作过程
1、 首先对div设置宽高背景色，
用margin使它位于屏幕水平居中，可以更好的观察效果
用transform让div旋转45度，daxiao为0.8倍 来做心型的主体部分
用relative相对定位是给后面伪元素作参考用的

第一步的效果如下：

/2、给伪元素设置宽高位置

通过设置圆角边框，绝对定位来改变它的位置最终有一个心的形状

给动画设置名称和过程中旋转的角度，改变的大小

最后给div绑定动画的名字，完成时间，播放次数，爱心跳动的效果就做好了

infinite是指动画无限次播放