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

效果为一个心脏跳动

Body

 

<div >

<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;

}

}

相关文章:

  • 2021-12-25
  • 2021-12-25
  • 2022-12-23
  • 2021-05-03
  • 2022-12-23
  • 2021-12-25
  • 2021-07-23
猜你喜欢
  • 2021-12-25
  • 2021-12-25
  • 2021-08-02
  • 2021-11-02
  • 2022-12-23
  • 2021-09-27
  • 2022-01-28
相关资源
相似解决方案