Reines CSS3 realisiert den Animationseffekt beim Laden von Seiten (mit Code)

Wenn Sie eine Seite öffnen, kommt es häufig vor, dass die Seite geladen wird. Wissen Sie als Front-End-Entwickler, wie Sie mit CSS3 Animationseffekte beim Laden von Seiten erzielen? Dieser Artikel wird Ihnen einen coolen und praktischen CSS3-Ladeanimationseffektcode vorstellen. Er hat einen gewissen Referenzwert und interessierte Freunde können einen Blick darauf werfen.

Das Erstellen einer Seitenladeanimation erfordert die Verwendung vieler Attribute in CSS3, wie z. B. Animation, Anzeige, Transformationsattribute usw. Wenn Sie sich nicht sicher sind, können Sie meine vorherigen Artikel lesen , oder besuchen Sie das CSS3-Video-Tutorial.

Beispiel: Erstellen Sie einen säulenförmigen Animationsladeeffekt, bei dem die Streifen von lang zu kurz und dann länger werden. Der spezifische Code lautet wie folgt:

HTML-Teil:

<div class="box">
   <div class="r1"></div>
   <div class="r2"></div>
   <div class="r3"></div>
   <div class="r4"></div>
   <div class="r5"></div>
</div>

CSS Teil:

.box {
    margin: 100px auto;
    width: 50px;
    height: 60px;
   }   
   .box>div {
    background-color: #67CF22;
    height: 100%;
    width: 6px;
    display: inline-block;
    -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
    animation: stretchdelay 1.2s infinite ease-in-out;
   }   
   .box .r2 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
   }   
   .box .r3 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
   }   
   .box .r4 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
   }   
   .box .r5 {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
   }   
   @-webkit-keyframes stretchdelay {
    0%,
    40%,
    100% {
     -webkit-transform: scaleY(0.4)
    }
    20% {
     -webkit-transform: scaleY(1.0)
    }
   }   
   @keyframes stretchdelay {
    0%,
    40%,
    100% {
     transform: scaleY(0.4);
     -webkit-transform: scaleY(0.4);
    }
    20% {
     transform: scaleY(1.0);
     -webkit-transform: scaleY(1.0);
    }
   }

Der Effekt ist wie im Bild gezeigt:

Der oben genannte gemeinsame CSS3-Code zum Erzielen eines Seitenladeanimationseffekts wird häufiger verwendet Ich hoffe, Sie können es selbst ausprobieren und sehen, ob Sie andere Effekte erzielen können. Weitere verwandte Tutorials finden Sie im CSS3 Online-Handbuch

Das obige ist der detaillierte Inhalt vonReines CSS3 realisiert den Animationseffekt beim Laden von Seiten (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!