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!