Wissen Sie als Front-End-Entwickler, wie man mit CSS3 und HTML einen Seitenlade-Animationseffekt erstellt? In diesem Artikel wird Ihnen ein supereinfacher und praktischer CSS3-Kreislade-Animationseffektcode vorgestellt. Er hat einen gewissen Referenzwert und interessierte Freunde können einen Blick darauf werfen.
Um das Laden von Ladeanimationen zu realisieren, müssen Sie in CSS3 viele Attribute und HTML-Tags verwenden, z. B. Animation, Anzeige, abgerundete Ecken mit Randradius, Transformationsattribute usw. Wenn Sie sich nicht sicher sind, können Sie dies überprüfen Lesen Sie meine vorherigen Artikel, die bereits vorgestellt wurden, oder besuchen Sie das CSS3-Video-Tutorial.
Demonstrationsbeispiel: Verwenden Sie drei Kreise, um einen Seitenlade-Animationseffekt zu erstellen. Die Kreise wechseln von „Ausblenden“ zu „Einblenden“ und dann zu „Ausblenden“. Der spezifische Code lautet wie folgt:
HTML-Teil:
<div class="spinner">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>CSS3-Teil:
.spinner {
margin: 100px auto 0;
width: 150px;
text-align: center;
}
.spinner > div {
width: 30px;
height: 30px;
background-color: #67CF22;
border-radius: 100%;
display: inline-block;
-webkit-animation: bouncedelay 1.4s infinite ease-in-out;
animation: bouncedelay 1.4s infinite ease-in-out;
/* Prevent first frame from flickering when animation starts */
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.spinner .bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.spinner .bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
@-webkit-keyframes bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0.0) }
40% { -webkit-transform: scale(1.0) }
}
@keyframes bouncedelay {
0%, 80%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} 40% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}Der Effekt ist wie im Bild gezeigt:
Das Obige stellt die zu erreichende CSS3-Methode vor Der Animationseffekt zum Laden von Seiten wird häufig im Projekt verwendet. Sie können ihn direkt verwenden oder an Ihren Lieblingsstil anpassen.
【Empfohlene verwandte Tutorials】
1. HTML-Video-Tutorial
2. CSS3 Online-Handbuch
Bootstrap-Tutorial
Das obige ist der detaillierte Inhalt vonHTML + CSS realisiert den Animationseffekt beim Laden (Laden) von Seiten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
