简单的图标扩散动画，重点备注动画
效果为一个心脏跳动spa
Body：ci
<div id="img_head_back">animation
<img src="img/邮箱(1).png" class="img_head_back_1" >it
</div>io
Css：class
.img_head_back_1{im
margin: auto; margin
position: absolute; top
top: 0;
left: 0;
bottom: 0;
right: 0;
animation-name: back;/* 为动画设置名称 */
animation-duration: 3s;/* 动画时长 */
animation-delay: 0s;/* 动画等待1s后开始 */
animation-iteration-count: infinite;/* 动画无限重复 */
}
//间隔1.5秒一次动画效果
@keyframes back{
0% {
width:180px;
height: 180px;
opacity:1.0;
}
50%{
width:180px;
height: 180px;
opacity:1.0;
}
100%{
width:220px;
height:220px;
opacity:0;
}
}