CSS-简单动画效果

ぐ巨炮叔叔 提交于 2019-11-27 02:53:58

简单的图标扩散动画,重点备注

效果为一个心脏跳动

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;

}

}

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!