CSS3爱心动画效果

                        CSS3爱心动画效果
开发工具与关键技术 DW
作者:华嘉丽
撰写时间:2019年1月25日

利用伪类,关键帧,多边形效果,实现爱心变换

1,首先用一个200px大小的正方形然后用多边形的clip-path:polygon()让正方形变成爱心
CSS3爱心动画效果_第1张图片
2,然后写两个爱心,第二个爱心要比第一个的大,让他们重叠在一起,用权重把第一个爱心显示出来,
CSS3爱心动画效果_第2张图片
3,然后在第一个可以加上文字
CSS3爱心动画效果_第3张图片
3,然后多层爱心重叠,设置放大效果
CSS3爱心动画效果_第4张图片
4,然后利用匹配选择器:hover~,实现在第一个爱心触发效果后,其他的爱心也同时触发效果只有在第一个爱心才能触发效果(下图代码是可以并列的,但是并列后放大就失去效果,我也不知道为什么,所以就这么多代码)
CSS3爱心动画效果_第5张图片
5,然后就给层层爱心设置关键帧设置颜色不一样,和整一个效果变化时间不一样,效果更佳

6,如果想让文字从一开始就隐藏就把文字和第一个爱心的颜色设置成一模一样的就可以了
7,每一层爱心都要用z-index第一个爱心到最后层层权重减少

备注:匹配选择器:hover~同时触发(引用:肖广斌)

html代码div都是同级关系

say you love me

你可能感兴趣的:(前端,DW)