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

细节决定高级,祝大家开心不加班~

上一篇下一篇

猜你喜欢

热点阅读