【前端小技能】用CSS3动画制作呼吸灯效果

【前端小技能】用CSS3动画制作呼吸灯效果

记录在项目开发过程中遇到的小问题，积累开发经验，欢迎大家一起留言探讨

如何最简单的制作呼吸灯效果,之前的文章也有提到过,如何制作呼吸灯效果,本篇文章是通过CSS3来进行呼吸灯效果的制作的,话不多说,上代码

<div><img src=".jpg"/>
</div>

style

div{height: 300px;
}
img{width: 100px;height: 100px;border-radius: 50%;border: 1px solid deeppink;/* infinite: 动画持续进行 */ animation: myFrame 1s linear infinite;-webkit-animation: myFrame 1s linear infinite;margin: 200px;display: block;box-sizing: border-box;box-shadow: -1px 1px 10px red;
}@keyframes myFrame{50%{width: 120px;height: 120px;transform: translate(-8%);transform-origin: center;box-shadow: -1px 1px 20px red;}
}

至此,呼吸灯效果完成!