关于css3动画:css实现一个简单的-闪烁效果

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

成果