Heim >Web-Frontend >CSS-Tutorial >Mehrere Methoden zum Erzielen eines Preload-Animationseffekts in CSS3

Mehrere Methoden zum Erzielen eines Preload-Animationseffekts in CSS3

不言Original: 2018-06-20 11:29:382373Durchsuche

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>

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;}
}

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>

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;}
}

Animation drei vorladen: rotierender Kreis

Effekt:

HTML-Code:

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

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);}
}

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>

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;}
}

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>

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;}
}

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!

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：So fügen Sie mithilfe von CSS Sternchen zu erforderlichen Formularoptionen hinzuNächster Artikel：So fügen Sie mithilfe von CSS Sternchen zu erforderlichen Formularoptionen hinzu

In Verbindung stehende Artikel

Mehr sehen