So erzielen Sie mit CSS3 einen Seitenladeeffekt-CSS-Tutorial-php.cn

So erzielen Sie mit CSS3 einen Seitenladeeffekt

清浅

Freigeben： 2021-04-20 15:13:38

Original

4306 Leute haben es durchsucht

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.

So erzielen Sie mit CSS3 einen Seitenladeeffekt

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;

Nach dem Login kopieren

(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>

Nach dem Login kopieren

[Empfohlene Kurse: CSS3-Tutorial】

Rendering

So erzielen Sie mit CSS3 einen Seitenladeeffekt

Dynamisches Rendering

So erzielen Sie mit CSS3 einen Seitenladeeffekt

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!