Heim > Artikel > Web-Frontend > So erzielen Sie mit CSS3 einen Seitenladeeffekt

So erzielen Sie mit CSS3 einen Seitenladeeffekt

清浅Original: 2018-11-29 13:54:174265Durchsuche

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

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!

html5 css3 html count 循环 function 选择器 transform animation

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Was nützt der Fokusselektor in CSS?Nächster Artikel：Was nützt der Fokusselektor in CSS?

In Verbindung stehende Artikel

Mehr sehen