CSS-简单动画效果

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

效果为一个心脏跳动

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;

}

}

相关文章

Css常用的排序方式权重分配 排序方式: 1、按类型&#160;...
原文:https://www.cnblogs.com/wenruo/p/9732704.html 先上...
css属性:word-wrap:break-word; 与 word-break:break-all 的...
https://destiny001.gitee.io/color/
&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML...
css之background的cover和contain的缩放背景图 对于这两个属...