Mehrere Methoden zum Erzielen eines Preload-Animationseffekts in CSS3-CSS-Tutorial-php.cn

Mehrere Methoden zum Erzielen eines Preload-Animationseffekts in CSS3

不言

Freigeben： 2018-06-20 11:29:38

Original

2343 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich CSS3-Animationen vor: 5 Beispiele für Preload-Animationseffekte. Ich werde ihn jetzt mit Ihnen teilen und als Referenz geben.

Erzielen Sie den Animationseffekt wie im Bild gezeigt:

Animation eins vorladen: doppelter Kreisel

Ein Kreis, der sich in zwei verschiedene Richtungen dreht. Wir definieren einen CSS-Code für die Geschwindigkeit des Innenrings, d. h. die Geschwindigkeit des Innenrings ist doppelt so hoch wie die des Außenrings.

Die Implementierung ist wie in der Abbildung dargestellt:

HTML-Code:

<body style="background: #ffb83c;">
    <p id="preloader-1">
        <span></span>
        <span></span>
    </p>
</body>

Nach dem Login kopieren

CSS-Code:

#preloader-1{
    position: relative;
}
#preloader-1 span{
    position: absolute;
    border:8px solid #fff;
    border-top:8px solid transparent;
    border-radius: 999px;
}
#preloader-1 span:nth-child(1){
    width:80px;
    height: 80px;
    animation: spin-1 2s infinite linear;
}
#preloader-1 span:nth-child(2){
    top:20px;
    left:20px;
    width:40px;
    height: 40px;
    animation: spin-2 1s infinite linear;
}
@keyframes spin-1{
    0%{transform: rotate(360deg); opacity: 1.0;}
    50%{transform: rotate(180deg); opacity: 0.5;}
    100%{transform: rotate(0deg);opacity: 0;}
}
@keyframes spin-2{
    0%{transform: rotate(0deg); opacity: 0.5;}
    50%{transform: rotate(180deg); opacity: 1;}
    100%{transform: rotate(360deg);opacity: 0.5;}
}

Nach dem Login kopieren

Animation zwei vorladen: versetzte Kreise

zwei Die Kreise bewegen sich nebeneinander hin und her. Für jeden Kreis sind eigene Parameter für die Rückwärtsbewegungsanimation festgelegt.

Effekt:

HTML-Code:

<body style="background: #4ad3b4;">
    <p id="preloader-2">
        <span></span>
        <span></span>
    </p>
</body>

Nach dem Login kopieren

CSS-Code :

#preloader-2{
    position: relative;
}
#preloader-2 span{
    position: absolute;
    width:30px;
    height: 30px;
    background: #fff;
    border-radius: 999px;
}
#preloader-2 span:nth-child(1){
    animation: cross-1 1.5s infinite linear;
}
#preloader-2 span:nth-child(2){
    animation: cross-2 1.5s infinite linear;
}
@keyframes cross-1{
    0%{transform: translateX(0); opacity: 0.5;}
    50%{transform: translateX(80px); opacity: 1;}
    100%{transform: translateX(0);opacity: 0.5;}
}
@keyframes cross-2{
    0%{transform: translateX(80px); opacity: 0.5;}
    50%{transform: translateX(0); opacity: 1;}
    100%{transform: translateX(80px);opacity: 0.5;}
}

Nach dem Login kopieren

Animation drei vorladen: rotierender Kreis

Effekt:

HTML-Code:

<body style="background: #ab69d9;">
    <p id="preloader-3">
        <span></span>
    </p>
</body>

Nach dem Login kopieren

CSS-Code:

#preloader-3{
    position: relative;
    width:80px;
    height: 80px;
    border:4px solid rgba(255,255,255,.25);
    border-radius: 999px;
    
}
#preloader-3 span{
    position: absolute;
    width:80px;
    height:80px;
    border:4px solid transparent;
    border-top:4px solid #fff;
    border-radius: 999px;
    top:-4px;
    left:-4px;
    animation: rotate 1s infinite linear;
}
@keyframes rotate{
    0%{transform: rotate(0deg);}
    100%{transform: rotate(360deg);}
}

Nach dem Login kopieren

Animation vier vorladen: Kreis springen

Dies ist ein mexikanischer Wellenmuster-Animationseffekt, der durch Einstellen der Verzögerung zwischen verschiedenen Kreisparametern erreicht werden soll.

Effekt:

HTML-Code:

<body style="background: #c1d64a;">
    <p id="preloader-4">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </p>
</body>

Nach dem Login kopieren

CSS-Code :

#preloader-4{
    position: relative;
}
#preloader-4 span{
    position:absolute;
    width:16px;
    height: 16px;
    border-radius: 999px;
    background: #fff;
    animation: bounce 1s infinite linear;
}
#preloader-4 span:nth-child(1){
    left:0;
    animation-delay: 0s;
}
#preloader-4 span:nth-child(2){
    left:20px;
    animation-delay: 0.25s;
}
#preloader-4 span:nth-child(3){
    left:40px;
    animation-delay: 0.5s;
}
#preloader-4 span:nth-child(4){
    left:60px;
    animation-delay: 0.75s;
}
#preloader-4 span:nth-child(5){
    left:80px;
    animation-delay: 1.0s;
}
@keyframes bounce{
    0%{transform: translateY(0px);opacity: 0.5;}
    50%{transform: translateY(-30px);opacity: 1.0;}
    100%{transform: translateY(0px);opacity: 0.5;}
}

Nach dem Login kopieren

Animation fünf vorladen: Radarkreis

Ein Radarstrahlungseffekt, eingestellt Sie können den gleichen Ein- und Ausblendeffekt für drei Span-Elemente erzielen und dann jedes einzelne leicht verzögern, um diesen Effekt zu erzielen.

Wirkung:

HTML-Code:

<body style="background: #f9553f;">
    <p id="preloader-5">
        <span></span>
        <span></span>
        <span></span>
    </p>
</body>

Nach dem Login kopieren

CSS-Code :

#preloader-5{
    position: relative;
}
#preloader-5 span{
    position:absolute;
    width:50px;
    height: 50px;
    border:5px solid #fff;
    border-radius: 999px;
    opacity: 0;
    animation: radar 2s infinite linear;
}
#preloader-5 span:nth-child(1){
    animation-delay: 0s;
}
#preloader-5 span:nth-child(2){
    
    animation-delay: 0.66s;
}
#preloader-5 span:nth-child(3){
    animation-delay: 1.33s;
}

@keyframes radar{
    0%{transform: scale(0);opacity: 0;}
    25%{transform: scale(0);opacity: 0.5;}
    50%{transform: scale(1);opacity: 1.0;}
    75%{transform: scale(1.5);opacity: 0.5;}
    100%{transform: scale(2);opacity: 0;}
}

Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein PHP chinesische Website!

Verwandte Empfehlungen:

Zwei Möglichkeiten, CSS zu verwenden, um Code zu implementieren, der die Größe des Hintergrundbilds beim Zoomen des Browsers nicht ändert

Analyse zur Verwendung des Animationsattributs in CSS3

Wie man mit CSS3 eine Ladekreisanimation zeichnet

Das obige ist der detaillierte Inhalt vonMehrere Methoden zum Erzielen eines Preload-Animationseffekts in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!