CSS3 implementiert den Karusselleffekt

Die CSS3-Implementierung von Karussellbildern wird hauptsächlich durch CSS: Background-Position und CSS3: Animation implementiert. Und um dieses Karussell umzusetzen, benötigen Sie ein Bild mit vier horizontal verbundenen Bildern.

Hinweis (Internet Explorer 10, Firefox und Opera unterstützen die Animationseigenschaft. Safari und Chrome unterstützen die alternative Eigenschaft -webkit-animation.)

HTML:

 <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="slide-box"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

CSS:

<span style="color: #800000;"><style>
    @-webkit-keyframes slide </span>{<span style="color: #ff0000;">
        0% {
            background-position</span>:<span style="color: #0000ff;"> 0 0</span>;
        }<span style="color: #800000;">
        10%, 25% </span>{<span style="color: #ff0000;">
            background-position</span>:<span style="color: #0000ff;"> -600px 0</span>;
        }<span style="color: #800000;">
        35%, 50% </span>{<span style="color: #ff0000;">
            background-position</span>:<span style="color: #0000ff;"> -1200px 0</span>;
        }<span style="color: #800000;">
        60%, 75% </span>{<span style="color: #ff0000;">
            background-position</span>:<span style="color: #0000ff;"> -1800px 0</span>;
        }<span style="color: #800000;">
        85%, 100% </span>{<span style="color: #ff0000;">
            background-position</span>:<span style="color: #0000ff;"> 0 0</span>;
        }<span style="color: #800000;">
    }
    @-moz-keyframes slide </span>{<span style="color: #ff0000;">
        0% {
            background-position</span>:<span style="color: #0000ff;"> 0 0</span>;
        }<span style="color: #800000;">
        10%, 25% </span>{<span style="color: #ff0000;">
            background-position</span>:<span style="color: #0000ff;"> -600px 0</span>;
        }<span style="color: #800000;">
        35%, 50% </span>{<span style="color: #ff0000;">
            background-position</span>:<span style="color: #0000ff;"> -1200px 0</span>;
        }<span style="color: #800000;">
        60%, 75% </span>{<span style="color: #ff0000;">
            background-position</span>:<span style="color: #0000ff;"> -1800px 0</span>;
        }<span style="color: #800000;">
        85%, 100% </span>{<span style="color: #ff0000;">
            background-position</span>:<span style="color: #0000ff;"> 0 0</span>;
        }<span style="color: #800000;">
    }
    @-o-keyframes slide </span>{<span style="color: #ff0000;">
        0% {
            background-position</span>:<span style="color: #0000ff;"> 0 0</span>;
        }<span style="color: #800000;">
        10%, 25% </span>{<span style="color: #ff0000;">
            background-position</span>:<span style="color: #0000ff;"> -600px 0</span>;
        }<span style="color: #800000;">
        35%, 50% </span>{<span style="color: #ff0000;">
            background-position</span>:<span style="color: #0000ff;"> -1200px 0</span>;
        }<span style="color: #800000;">
        60%, 75% </span>{<span style="color: #ff0000;">
            background-position</span>:<span style="color: #0000ff;"> -1800px 0</span>;
        }<span style="color: #800000;">
        85%, 100% </span>{<span style="color: #ff0000;">
            background-position</span>:<span style="color: #0000ff;"> 0 0</span>;
        }<span style="color: #800000;">
    }
    @keyframes slide </span>{<span style="color: #ff0000;">
        0% {
            background-position</span>:<span style="color: #0000ff;"> 0 0</span>;
        }<span style="color: #800000;">
        10%, 25% </span>{<span style="color: #ff0000;">
            background-position</span>:<span style="color: #0000ff;"> -600px 0</span>;
        }<span style="color: #800000;">
        35%, 50% </span>{<span style="color: #ff0000;">
            background-position</span>:<span style="color: #0000ff;"> -1200px 0</span>;
        }<span style="color: #800000;">
        60%, 75% </span>{<span style="color: #ff0000;">
            background-position</span>:<span style="color: #0000ff;"> -1800px 0</span>;
        }<span style="color: #800000;">
        85%, 100% </span>{<span style="color: #ff0000;">
            background-position</span>:<span style="color: #0000ff;"> 0 0</span>;
        }<span style="color: #800000;">
    }
    .slide-box </span>{<span style="color: #ff0000;">
        margin</span>:<span style="color: #0000ff;"> 0 auto</span>;<span style="color: #ff0000;">
        width</span>:<span style="color: #0000ff;"> 600px</span>;<span style="color: #ff0000;">
        height</span>:<span style="color: #0000ff;"> 400px</span>;<span style="color: #ff0000;">
        border</span>:<span style="color: #0000ff;"> 1px solid #ddd</span>;<span style="color: #ff0000;">
        background</span>:<span style="color: #0000ff;"> url(http://sandbox.runjs.cn/uploads/rs/376/uazzmdfd/bg.png) 0 0 no-repeat</span>;<span style="color: #ff0000;">
        -webkit-animation</span>:<span style="color: #0000ff;"> slide 8s linear infinite</span>;<span style="color: #ff0000;">
        -o-animation</span>:<span style="color: #0000ff;"> slide 8s linear infinite</span>;<span style="color: #ff0000;">
        animation</span>:<span style="color: #0000ff;"> slide 8s linear infinite</span>;
    }<span style="color: #800000;">
</style></span>

Das

animation-Attribut ist ein Kurzschriftattribut, JavaScript-Syntax: object.style.animation=" slide 8s linear infinite", seine Parameter lauten wie folgt:

animation-name	规定需要绑定到选择器的 keyframe 名称。。
animation-duration	规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function	规定动画的速度曲线。
animation-delay	规定在动画开始之前的延迟。
animation-iteration-count	规定动画应该播放的次数。
animation-direction	规定是否应该轮流反向播放动画。

Animationsname

Gibt den Keyframe-Namen an, der an den Selektor gebunden werden muss. .

Animationsdauer

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

animation-timing-function

Gibt die Geschwindigkeitskurve der Animation an.

Animationsverzögerung

Gibt die Verzögerung vor dem Start der Animation an.

animation-iteration-count

Gibt an, wie oft die Animation abgespielt werden soll.

Animationsrichtung

Gibt an, ob die Animation der Reihe nach rückwärts abgespielt werden soll.

Lassen Sie das Bild innerhalb von 8 Sekunden bewegen, jedes Mal um 600 Pixel nach links, und kehren Sie schließlich zum ursprünglichen Punkt zurück. Das Div ist 600 Pixel breit, gerade genug, um ein Bild aufzunehmen, wodurch ein Karusselleffekt entsteht.