Heim >Web-Frontend >CSS-Tutorial >CSS implementiert kreative Animationseffekte beim Laden von Seiten
CSS implementiert kreative Animationseffekte beim Laden von Seiten
- yuliaOriginal
- 2018-10-20 10:48:383696Durchsuche
Ist Ihnen beim Durchsuchen der Website schon einmal die Seite „Laden, bitte warten“ begegnet? Können Sie als Front-End-Ingenieur CSS verwenden, um Animationseffekte für das Laden von Seiten zu erstellen? In diesem Artikel wird ein kreativer Animationscode zum Laden von Seiten vorgestellt, der einen gewissen Referenzwert hat. Interessierte Freunde können einen Blick darauf werfen.
Das Erstellen einer kreativen Seitenlade-(Lade-)Animation erfordert die Verwendung vieler Attribute in CSS, wie zum Beispiel: Animationsanimation, Transformationsattribut usw. Wenn Sie sich nicht sicher sind, können Sie sich auf die entsprechenden Informationen beziehen PHP-Artikel auf chinesischer Website oder besuchen Sie das CSS-Video-Tutorial.
Instanzbeschreibung: Verwenden Sie div, um einen kreativen quadratischen Ladeseiteneffekt zu erstellen. Während des Ladevorgangs wird das Quadrat entlang der Y-Achse und dann entlang der X-Achse gespiegelt. Der spezifische Code lautet wie folgt:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.spinner {
width: 60px;
height: 60px;
background-color: #67CF22;
margin: 100px auto;
-webkit-animation: rotateplane 1.2s infinite ease-in-out;
animation: rotateplane 1.2s infinite ease-in-out;
}
@-webkit-keyframes rotateplane {
0% {
-webkit-transform: perspective(120px)
}
50% {
-webkit-transform: perspective(120px) rotateY(180deg)
}
100% {
-webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg)
}
}
@keyframes rotateplane {
0% {
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
}
50% {
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
}
100% {
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
}
}
</style>
</head>
<body>
<div class="spinner"></div>
</body>
</html>Effekt Wie im Bild gezeigt:
Der oben genannte kreative quadratische Lade-(Lade-)Seiteneffektcode ist relativ einfach Üben Sie es selbst. Können Sie den Animationseffekt beim Laden von Seiten erzielen?
【Empfohlene verwandte Tutorials】
1. CSS3-Video-Tutorial
2. HTML-Video-Tutorial
Bootstrap-Tutorial
Das obige ist der detaillierte Inhalt vonCSS implementiert kreative Animationseffekte beim Laden von Seiten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!