css3利用before和after写的心怎么实现跳动

html-css04

css3利用before和after写的心怎么实现跳动,第1张

Code:.div { border-radius:10px} 有时间还是看教程好一些，专辑名称是 《Buid New World》 里面的第九集主要讲述的是CSS3 的圆角边框、阴影和渐变，

在下研究了一下源代码，渗透到了服务器找了一下：

并强行爆破了一下

最终发现，这是引入了Font Awesome图标，并启用css3动画所制成的

原理为：

用Font Awesome引入一个心形，并用css设置为红色，再用css3关键帧动画使其放大缩小

这是从官网瓢来的源代码：（请确认已引入Font Awesome）

<i class="fa fa-heart" style="font-size:48pxcolor:redanimation:iconAnimate 5s"></i>

css3代码如下

@keyframes iconAnimate {

0%, 100% {

transform: scale(1)

}

10%, 30% {

transform: scale(0.9)

}

20%, 40%, 60%, 80% {

transform: scale(1.1)

}

50%, 70% {

transform: scale(1.1)

}

}