Heim > Artikel > Web-Frontend > Ausführliche Erläuterung, wie man mithilfe von CSS3-Animationseigenschaften Karusselleffekte erzielt

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

巴扎黑Original: 2018-05-18 10:57:484338Durchsuche

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>

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!

css3 count function 选择器 animation

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：CSS3-Tutorial zum Erstellen einer geneigten Navigationsleiste und eines MilchglaseffektsNächster Artikel：CSS3-Tutorial zum Erstellen einer geneigten Navigationsleiste und eines Milchglaseffekts

In Verbindung stehende Artikel

Mehr sehen