Heim > Artikel > Web-Frontend > So erzielen Sie mit CSS3 einen Seitenladeeffekt
So erzielen Sie mit CSS3 einen Seitenladeeffekt
- 清浅Original
- 2018-11-29 13:54:174281Durchsuche
CSS3-Methode zum Erzielen eines Seitenladeeffekts: Erstellen Sie zunächst eine HTML-Beispieldatei und anschließend ein Div im Hauptteil. Erzielen Sie schließlich den Seitenladeeffekt durch Animationsanimation und 2D-Skalierungskonvertierung.
Die Betriebsumgebung dieses Artikels: Windows 7-System, HTML5- und CSS3-Version, Dell G3-Computer.
Wir können die Animation des Seitenladens in verschiedene Formen umwandeln, um die Animation in eine kreisförmige Form zu bringen, um die Seite zu laden. Achten Sie bei der Verwendung von Animationen auf Probleme mit der Browserkompatibilität.
Detaillierte Erläuterung der Wissenspunkte
(1) Animation: Animationsattribute festlegen
Animationsname: Legen Sie den Namen des Keyframes fest, der sein muss an den Selektor gebunden. Dieses Beispiel muss
animation-duration laden: die Zeit, die zum Abschließen der Animation benötigt wird, in Sekunden oder Millisekunden.
Animations-Timing-Funktion: Animationsgeschwindigkeitskurve.
Animationsverzögerung: Die Verzögerung, bevor die Animation beginnt.
animation-iteration-count: Die Häufigkeit, mit der die Animation abgespielt werden soll.
Animationsrichtung: Ob die Animation der Reihe nach rückwärts abgespielt werden soll.
Beispiel: Legen Sie den Animationsnamen auf „Laden“ fest. Die zum Abschließen der Animation erforderliche Zeit beträgt 1,4 Sekunden. Starten und enden Sie mit niedriger Geschwindigkeit und spielen Sie sie in einer Endlosschleife ab.
animation: load 1.4s infinite ease-in-out;
(2) Animation- Füllmodus-Attribut
keine: Das Standardverhalten nicht ändern.
Vorwärts: Wenn die Animation abgeschlossen ist, behalten Sie den letzten Attributwert bei (definiert im letzten Keyframe).
rückwärts: Wendet den Starteigenschaftswert (definiert im ersten Keyframe) an, bevor die Animation für einen durch Animationsverzögerung angegebenen Zeitraum angezeigt wird.
beides: Es werden sowohl der Vorwärts- als auch der Rückwärtsfüllmodus angewendet.
(3) Transformation: Scale(x,y) 2D-Skalierungstransformation.
Vollständiger Code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.load {
margin:300px auto;
width: 150px;
text-align: center;
}
.load div{
width: 30px;
height: 30px;
background-color:rgb(118,224,250);
border-radius: 100%;
display: inline-block;
-webkit-animation: load 1.4s infinite ease-in-out;
-webkit-animation-fill-mode: both;
}
.load .circle1 {
-webkit-animation-delay: -0.32s;
}
.load .circle2 {
-webkit-animation-delay: -0.16s;
}
@-webkit-keyframes load {
0%, 80%, 100% { -webkit-transform: scale(0.0) }
40% { -webkit-transform: scale(1.0) }
}
</style>
</head>
<body>
<div class="load">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
</body>
</html>[Empfohlene Kurse: CSS3-Tutorial】
Rendering
Dynamisches Rendering
Zusammenfassung: Das ist es. Das ist das Ich hoffe, dass Sie durch den Inhalt dieses Artikels ein gewisses Verständnis der CSS3-Animation erlangen und Ihren bevorzugten Seitenladestil erstellen können.
Das obige ist der detaillierte Inhalt vonSo erzielen Sie mit CSS3 einen Seitenladeeffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!