Ausführliche Erläuterung, wie man mithilfe von CSS3-Animationseigenschaften Karusselleffekte erzielt-CSS-Tutorial-php.cn

Ausführliche Erläuterung, wie man mithilfe von CSS3-Animationseigenschaften Karusselleffekte erzielt

巴扎黑

Freigeben： 2018-05-18 10:57:48

Original

4281 Leute haben es durchsucht

Das Animationsattribut von CSS3 kann verwendet werden, um jeden Schritt der Animation zu steuern, indem Schlüsselbilder genau wie bei Flash-Animationen gesteuert werden, wodurch komplexere Animationseffekte erzielt werden. In diesem Artikel werde ich den auf CSS3-Animationseigenschaften basierenden Karusselleffekt mit Ihnen teilen. Freunde, die ihn benötigen, können sich auf

Animationseinführung beziehen:

Das Animationsattribut von CSS3 kann jeden Schritt der Animation steuern, indem es Schlüsselbilder steuert, um komplexere Animationseffekte zu erzielen, genau wie bei Flash-Animationen. Der durch Ainimation erzielte Animationseffekt besteht hauptsächlich aus zwei Teilen:

1) Deklarieren Sie eine Animation über Frames, die denen in Flash-Animationen ähneln.

2) Rufen Sie die durch Schlüsselframes in der Animation deklarierte Animation auf Attribut.

Animationsattributwert:

Animationsattribut ist ein Kurzschriftattribut

Syntax: Animation: Name Dauer Timing-Funktionsverzögerung Richtung der Iterationsanzahl;

Die sechs von der Animation festgelegten Animationsattribute:

Animationsname: Gibt den Keyframe an, an den gebunden werden muss der Selektorname. Werte:

none: (Standard) Gibt keinen Animationseffekt an (kann zum Überschreiben von Animationen aus Kaskaden verwendet werden).

keyframename: Gibt den Namen des Keyframes an, der an den Selektor gebunden werden muss.

animation-duration: Gibt die Zeit an, die zum Abschließen der Animation benötigt wird, in Sekunden oder Millisekunden. Wert:

Zeit: Gibt die Zeit an, die zum Abschließen der Animation benötigt wird. Der Standardwert ist 0, was bedeutet, dass kein Animationseffekt vorliegt.

animation-timing-function: Gibt die Geschwindigkeitskurve der Animation an. Wert:

ease: Standard. Die Animation beginnt langsam, beschleunigt dann, verlangsamt sich dann und endet schließlich.

linear: Die Animationsgeschwindigkeit ist von Anfang bis Ende gleich.

ease-in: Die Animation startet mit niedriger Geschwindigkeit.

ease-out: Die Animation endet mit niedriger Geschwindigkeit.

ease-in-out: Die Animation beginnt und endet mit langsamer Geschwindigkeit.

cubic-bezier(n,n,n,n): Definieren Sie Ihre eigenen Werte in der Kubik-Bezier-Funktion. Mögliche Werte sind numerische Werte von 0 bis 1.

animation-delay: Gibt die Verzögerung vor dem Start der Animation an. Werte:

time: (optional) Definiert die Zeit, die vor dem Start der Animation gewartet werden soll, in Sekunden oder Millisekunden. Der Standardwert ist 0.

animation-iteration-count: Gibt an, wie oft die Animation abgespielt werden soll. Wert:

n: Definiert die Anzahl der Animationswiedergabezeiten.

unendlich: Gibt an, dass die Animation unendlich abgespielt werden soll.

animation-direction: Gibt an, ob die Animation der Reihe nach rückwärts abgespielt werden soll. Werte:

normal: Standardwert. Die Animation sollte normal abgespielt werden.

alternativ: Die Animation sollte der Reihe nach rückwärts abgespielt werden.

Karussell zur Implementierung von Animationsanimationen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片轮换</title>
    <style type="text/css">
        p,img{
            margin: 0;
            padding: 0;
        }
        .p_first{
            width: 1000px;
            height: 300px;
            margin-top: 100px;
            margin-left: 250px;
            overflow: hidden;
        }
        .p_second{
            width: 4000px;
            position: relative;
            animation: myimg 12s linear infinite normal; 
        }
        @keyframes myimg{
            0{
                left: 0;
            }
            5%{
                left: 0;
            }
            30%{
                left: -1000px;
            }
            35%{
                left: -1000px;
            }
            60%{
                left: -2000px;
            }
            65%{
                left: -2000px;
            }
            95%{
                left: -3000px;
            }
            100%{
                left: -3000px;
            }
        }
    </style>
</head>
<body>
    <p class="p_first">
        <p class="p_second">
            <img src="images/011-1.jpg" alt=""><img src="images/011-2.jpg" alt=""><img src="images/011-3.jpg" alt=""><img src="images/011-1.jpg" alt="">
        </p>
    </p>
</body>
</html>

Nach dem Login kopieren

Bild-Tags sollten in derselben Zeile platziert werden, da sonst Lücken zwischen den Bildern entstehen.

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung, wie man mithilfe von CSS3-Animationseigenschaften Karusselleffekte erzielt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!