So erreichen Sie Div-Flimmern mit CSS

In CSS können Sie „@keyframes“-Regeln und Animationsattribute verwenden, um den div-Blinkeffekt zu erzielen. Sie müssen nur „@keyframes“ verwenden, um eine Animation mit einem Blinkeffekt zu erstellen , Geschwindigkeit und Anzahl der für die Animation erforderlichen Wartezeiten.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Das Rendering ist wie folgt

Der Code lautet wie folgt

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

Setzen Sie einfach den HeaderBox-Stil auf das Div

Empfohlenes Lernen: CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo erreichen Sie Div-Flimmern mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!