纯css闪烁效果demo

天渺工作室

已于 2022-07-17 18:11:07 修改

阅读量1k

点赞数 1

分类专栏： Html5+Css3 文章标签： css css3 html闪烁 css闪烁效果闪烁效果

于 2022-07-17 18:07:21 首次发布

本文链接：https://blog.csdn.net/sinat_37255207/article/details/125834808

版权

Html5+Css3 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

纯css闪烁效果demo

具体速度和颜色自己可以自己调

    <div class="father-box">
        <div class="header-box">
        </div>
    </div>

@keyframes test {
    from {        
    opacity: 1.0;    
    }
    50% {        
    opacity: 0.4;    
    }
    to {        
    opacity: 1.0;    
    }
}
@-webkit-keyframes test {    
    from {        
    opacity: 1.0;    
    }
    50% {        
    opacity: 0.4;    
    }
    to {        
    opacity: 1.0;    
    }
}
.father-box {
    position: relative;
}

.header-box {    
    color: #fff;    
    padding: 10px;    
    font-size: 15px;    
    height: 300px;    
    background-color: rgba(146, 139, 139, .8);
    animation: test 1000ms infinite;    
    -webkit-animation: test 1000ms infinite;
}