纯css 实现呼吸灯效果

开始效果

呼吸效果

实现代码

<div class="container">
	<div class="breathing-light"></div>
</div>

<style>
	html,
	body {
		height: 100%;
		background-color: white;
	}
	.container {
		padding: 100px;
	}
	.container .breathing-light {
		width: 20px;
		height: 20px;
		border-radius: 100%;
		animation: 2s shadowBreath ease-out infinite normal;
		background: rgba(42, 170, 255, 1);
	}
	@keyframes shadowBreath {
		0%,
		100% {
			transform: scale(0.9);
			box-shadow: 0 0 4px 1px rgba(42, 170, 255, 0.7);
		}
		50% {
			transform: scale(1.5);
			box-shadow: 0 0 30px 5px rgb(42, 170, 255);
		}
	}
</style>