简单的图标扩散动画，重点备注 效果为一个心脏跳动 Body ： div id="img_head_back" img src="img/ 邮箱 (1).png" class="img_head_back_1" /div Css ： .img_head_back_1{ margin: auto; position: absolute; top: 0; left: 0; b
简单的图标扩散动画，重点备注
效果为一个心脏跳动
Body：
<div id="img_head_back">
<img src="img/邮箱(1).png" class="img_head_back_1" >
</div>
Css：
.img_head_back_1{
margin: auto;
position: absolute;
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;
}
}