美文网首页
纯css超棒的呼吸效果

纯css超棒的呼吸效果

作者: 顺小星 | 来源:发表于2020-08-07 11:40 被阅读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;
            }
        }
    

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

    相关文章

      网友评论

          本文标题:纯css超棒的呼吸效果

          本文链接:https://www.haomeiwen.com/subject/eoairktx.html