css实现一个简单的 闪烁效果

天渺工作室 -
css实现一个简单的 闪烁效果
纯css闪烁效果demo

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

    <div >
        <div >
        </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;
}
效果

image.png
image.png

特别申明:本文内容来源网络,版权归原作者所有,如有侵权请立即与我们联系(cy198701067573@163.com),我们将及时处理。

Tags 标签

css3动画html5css

扩展阅读

加个好友,技术交流

1628738909466805.jpg