[JavaScript知识库] 【前端小技能】用CSS3动画制作呼吸灯效果

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 【前端小技能】用CSS3动画制作呼吸灯效果 -> 正文阅读

[JavaScript知识库]【前端小技能】用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;
	}
}