CSS implementiert kreative Animationseffekte beim Laden von Seiten-CSS-Tutorial-php.cn

CSS implementiert kreative Animationseffekte beim Laden von Seiten

yulia

Freigeben： 2018-10-20 10:48:38

Original

3682 Leute haben es durchsucht

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>

Nach dem Login kopieren

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!