css做简单的爱心跳动特效

时间:2024-03-26 10:11:11

制作爱心跳动特效

设计思路:

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

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

第一步的效果如下:
css做简单的爱心跳动特效

/2、给伪元素设置宽高位置
css做简单的爱心跳动特效
通过设置圆角边框,绝对定位来改变它的位置最终有一个心的形状
css做简单的爱心跳动特效
给动画设置名称和过程中旋转的角度,改变的大小
css做简单的爱心跳动特效

最后给div绑定动画的名字,完成时间,播放次数,爱心跳动的效果就做好了
css做简单的爱心跳动特效
infinite是指动画无限次播放