Heim > Artikel > Web-Frontend > Pure CSS3 realisiert spezielle Animationseffekte zum Laden von Seitenkreisen
Pure CSS3 realisiert spezielle Animationseffekte zum Laden von Seitenkreisen
- yuliaOriginal
- 2018-10-27 16:48:2211231Durchsuche
Wenn Sie eine Website öffnen oder ein Video ansehen, während die Internetgeschwindigkeit niedrig ist, wird die Seite sehr langsam geladen. Zu diesem Zeitpunkt wird der Benutzer normalerweise aufgefordert, „Die Seite wird geladen, bitte warten“ und ein Kreis bleibt bestehen rotierend. Freunde, die HTML und CSS lernen, können Sie CSS3 verwenden, um den Animationseffekt zum Laden von Kreisen zu erzielen? In diesem Artikel wird ein in reinem CSS3 implementierter Kreis-(Lade-)Animations-Spezialeffekt vorgestellt. Interessierte Freunde können darauf verweisen.
Die Verwendung von CSS3 zum Erstellen eines Kreisladeeffekts erfordert die Verwendung vieler Eigenschaften in CSS3, wie z. B. Animation, Keyframes, abgerundete Ecken mit Rahmenradius usw. Wenn Sie sich über diese Eigenschaften nicht im Klaren sind, können Sie auf Folgendes verweisen Besuchen Sie die chinesische PHP-Website. Verwandte Artikel oder besuchen Sie das CSS3-Video-Tutorial.
Im Folgenden erhalten Sie eine detaillierte Einführung in die Verwendung von HTML und CSS zum Erstellen einer Seitenkreis-Ladeanimation
HTML-Teil:
Erstellen Sie ein Div auf der Seite für Platzieren Sie den Kreis, um die Animation zu laden, und geben Sie dem Div einen Klassennamen, um das Festlegen von CSS-Stilen zu erleichtern. Der spezifische Code lautet wie folgt:
<body> <h3>CSS圆圈加载样式</h3> <div class="loading"></div> </body>
CSS-Teil:
Legen Sie zuerst die Länge fest und die Höhe des Div auf 120 Pixel. Setzen Sie dann „border-radius:“ auf 50 %, um es kreisförmig zu machen. Verwenden Sie „border: 16px solid #f3f3f3“, um die Breite und Farbe des Kreises festzulegen, und legen Sie schließlich einen scrollbaren Teil durch den Rand oben fest Attribut. Nachdem der Grundstil fertiggestellt ist, wird die Animation in CSS3 verwendet, um ihn in einer Endlosschleife drehen zu lassen. Der spezifische Code lautet wie folgt:
.loading {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}Hinweis: Für werden die Präfixe -webkit- und -ms- verwendet Diejenigen, die keine Animations- und Transformationsattribute unterstützen, müssen hinzugefügt werden, um die Browserkompatibilität sicherzustellen.
Rendering:
Das Obige hat mit Ihnen die Spezialeffekte von reinem CSS3 geteilt, um die Kreisladeanimation zu realisieren. Die Schritte werden in erklärt Mehr Details. Freunde, Sie müssen es selbst ausprobieren, um zu sehen, ob Ihr Code den Seitenladeeffekt erzielen kann.
Weitere coole CSS3-, HTML5- und Javascript-Spezialeffektcodes finden Sie unter: js Special Effects Collection
Weitere verwandte Tutorials finden Sie in der neuesten Version des CSS3-Referenzhandbuch
Das obige ist der detaillierte Inhalt vonPure CSS3 realisiert spezielle Animationseffekte zum Laden von Seitenkreisen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!