How to achieve div flickering with CSS

In css, you can use the "@keyframes" rule and the animation attribute to achieve the div flashing effect; you only need to first use "@keyframes" to create an animation with a flashing effect; then use the animation attribute to set the time required for the animation , speed and times, etc.

The operating environment of this tutorial: Windows7 system, CSS3&&HTML5 version, Dell G3 computer.

The rendering is as follows

The code is as follows

@keyframes fade {
    from {        
    opacity: 1.0;    
    }
    50% {        
    opacity: 0.4;    
    }
    to {        
    opacity: 1.0;    
    }
}
@-webkit-keyframes fade {    
    from {        
    opacity: 1.0;    
    }
    50% {        
    opacity: 0.4;    
    }
    to {        
    opacity: 1.0;    
    }
}
.headerBox {    
    color: #fff;    
    padding: 10px;    
    font-size: 15px;    
    height: 60px;    
    animation: fade 600ms infinite;    
    -webkit-animation: fade 600ms infinite;
}

Just set the headerBox style to the div

Recommended learning: css video tutorial

The above is the detailed content of How to achieve div flickering with CSS. For more information, please follow other related articles on the PHP Chinese website!