CSS3实现轮播图效果-tutoriel HTML-php.cn

CSS3实现轮播图效果

WBOY

Libérer： 2016-09-14 09:24:09

original

1656 Les gens l'ont consulté

CSS3实现轮播图主要是由css：background-position和css3：animation实现。且实现此轮播需要一张四个图横着相连的图片。

注（Internet Explorer 10、Firefox 以及 Opera 支持 animation 属性。Safari 和 Chrome 支持替代的 -webkit-animation 属性。）

HTML：

 <span style="color: #0000ff;"><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></span>

Copier après la connexion

CSS：

<span style="color: #800000;"><style>
    @-webkit-keyframes slide </style></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;">
</span>

Copier après la connexion

animation 属性是一个简写属性，JavaScript 语法： object.style.animation=" slide 8s linear infinite"，其参数如下：

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

让图片在8秒内进行位移，每次向左移动600px，最后回到原点，div宽600px，刚好容下一个图，这样就构成了轮播效果。