纯css超棒的呼吸效果
2020-08-07 本文已影响0人
顺小星
呼吸前:
image.png
呼吸中:
image.png
呼吸最大值:
image.png
代码:
<div class="countDown">距离结束还剩1天0小时4分钟</div>
.countDown {
top: 0;
width: 250px;
height: 30px;
line-height: 30px;
color: #bfe2ff;
font-size: 14px;
letter-spacing: 1px;
background: rgba(0, 49, 161, 0.52);
box-shadow: 0 0 10px #0078ff;
border-radius: 8px;
animation: glow 1200ms ease-out infinite alternate;
/* Safari 与 Chrome */
}
@keyframes glow {
0% {
border-color: #393;
box-shadow: 0 0 5px rgba(0, 255, 0, .1), inset 0 0 5px rgba(0, 255, 0, .1), 0 0px 0 #393;
}
100% {
border-color: #393;
box-shadow: 0 0 20px rgba(0, 255, 0, .5), inset 0 0 10px rgba(0, 255, 0, .2), 0 0 0 #393;
}
}
细节决定高级,祝大家开心不加班~