纯CSS的Slider

Step1：图片定位

HTML Markup

 <div class="slider-container">
        <div class="slider" style="background-image: url('img/1.jpg')"></div>
        <div class="slider" style="background-image: url('img/2.jpg')"></div>
        <div class="slider" style="background-image: url('img/3.jpg')"></div>
        <div class="slider" style="background-image: url('img/4.jpg')"></div>
        <div class="slider" style="background-image: url('img/5.png')"></div>
        <div class="slider" style="background-image: url('img/6.png')"></div>
    </div>

CSS Style

.slider-container {
        position: absolute;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
    }
    
    .slider {
        position: absolute;
        width: 100%;
        height: 100%;
        background: no-repeat 50% 50%;
        background-size: cover;
        opacity: 1;
        filter: alpha(opacity=100);
        z-index: -100;
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }

**Step 2: 确认轮播效果的时间轴 **
先决定前后两张图片重叠时间，每张图片播放时间，完成一个周期需要多少时间

time-line.JPG

由上图我们我们总共播放6张图片，过场时间为1s,每张图片播放时间为3s,一个完整的周期为24s，因为在@keyframes的时间是以百分比来表示，所以要先把s换算成百分比。

100% / 24秒 = 4.17% ( 每秒)

CSS3 Keyframes Animation

.slider{
  -webkit-animation: zoomout 24s linear infinite;
  animation: zoomout 24s linear infinite;
}

 @keyframes zoomout {
        /* 0 - 1秒 淡入*/
        0% {
            opacity: 1;
            filter: alpha(opacity=100);
            -webkit-transform: scale(1.2);
            transform: scale(1.2); 
            z-index: 100;
        }

        16.68% {
            /* 1-4s是播放时间 */
            filter: alpha(opacity=100);
            opacity: 1;
        }
        17.72% {
            /* 4-5秒之间淡出4.25s*/
            opacity: 0;
            -webkit-transform: scale(1);
            transform: scale(1);
            z-index: -100;
        }

    }
    
    @-webkit-keyframes zoomout {
        0% {
            /* 0 - 1秒 淡入*/
            opacity: 1;
            filter: alpha(opacity=100);
            -webkit-transform: scale(1.2);
            transform: scale(1.2);
            z-index: 100;
        }
        16.68% {
           /* 1-4s是播放时间 */
            filter: alpha(opacity=100);
            opacity: 1;
        }
        17.72% {
            /* 4-5秒之间淡出4.25s*/
            opacity: 0;
            -webkit-transform: scale(1);
            transform: scale(1);
            z-index: -100;
        }
    }

每张图片进场时间间隔4s

.slider:nth-child(1) {
        -webkit-animation-delay: 0s;
        animation-delay: 0s;
    }
    
    .slider:nth-child(2) {
        -webkit-animation-delay: 4s;
        animation-delay: 4s;
    }
    
    .slider:nth-child(3) {
        -webkit-animation-delay: 8s;
        animation-delay: 8s;
    }
    
    .slider:nth-child(4) {
        -webkit-animation-delay: 12s;
        animation-delay: 12s;
    }
    .slider:nth-child(5) {
        -webkit-animation-delay: 16s;
        animation-delay: 16s;
    }
    
    .slider:nth-child(6) {
        -webkit-animation-delay: 20s;
        animation-delay: 20s;
    }

如果新增图片，请修改 animation-duration=每张时间X张数（4s*6张）
并重新换算1s的百分比值 100%/24s=4.17%(每秒)

纯CSS的Slider

推荐阅读更多精彩内容