Demo效果如下：
到这里我们的 HTML 文件就全部写完啦
这时候我们就可以得到一个图片的效果。
这里小图标总共有 11 张，相互之间的变化就是 10 步，所以动画设置如下
这样就得到了一个无限循环的逐帧动画
这样下来，默认就不会动了，然后在hover的时候“运行”就行了
在下研究了一下源代码，渗透到了服务器找了一下：
并强行爆破了一下
最终发现，这是引入了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)
}
}
首先定义背景图片a{
background: url(../images/icon_tool.png) no-repeat
}
再定义hover时的属性（变换动画，通过改变背景图位置，以及设置动画过渡时间来实现）：
a:hover{
transition: 0.4s
background-position: -60px -60px
}
