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

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

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

<div>
	<img src="https://up.enterdesk.com/edpic/87/05/78/8705784b4c6ad3d2f70e643eef69fff3.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;
	}
}

至此,呼吸灯效果完成!