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