Heim > Artikel > Web-Frontend > CSS implementiert kreative Animationseffekte beim Laden von Seiten

CSS implementiert kreative Animationseffekte beim Laden von Seiten

yuliaOriginal: 2018-10-20 10:48:383581Durchsuche

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:

CSS implementiert kreative Animationseffekte beim Laden von Seiten

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!

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：Wie implementiert man einen kreisförmigen Fortschrittsbalken in CSS3? Implementierung eines kreisförmigen Fortschrittsbalkens in CSS3Nächster Artikel：Wie implementiert man einen kreisförmigen Fortschrittsbalken in CSS3? Implementierung eines kreisförmigen Fortschrittsbalkens in CSS3

In Verbindung stehende Artikel

Mehr sehen