纯CSS实现轮播图

最近在写小米官网，分享一下CSS轮播图

实现步骤

1. 一样大小的图片
2. 将图片浮动横放在图片容器中
3. 在最外边添加一个窗口容器，和图片一样大
4. 给图片添加动画效果

注意事项

1. 动画效果分为轮播和暂停两部分
2. 定义动画序列数与图片数量相关，几张照片就添加几个
3. 动画各阶段移动值与图片大小有关，设置递增的margin-left值，第一张图为0，第二张图为-(1张图大小)，第三张图为-(2张图大小)
4. 最后一个图片到第一个图片切换效果

HTML

<div class="swiper"> /*窗口容器*/
	<ul>/*图片容器*/
    	<li><img src="images/swiper01.png" alt=""></li>
        <li><img src="images/swiper02.png" alt=""></li>
        <li><img src="images/swiper03.png" alt=""></li>
        <li><img src="images/swiper04.png" alt=""></li>
        <li><img src="images/swiper05.png" alt=""></li>
     </ul>
 </div>

CSS

.swiper {
    width: 1226px;
    height: 460px;
    overflow: hidden;/*超出隐藏*/
}

.swiper ul {
	list-style: none;
    width: 9999px;
    transition: all .6s;
    animation: marginLeft 20s infinite;/*调用动画*/
}
.swiper ul:hover{
    animation-play-state: paused; /*鼠标悬停时动画暂停*/
}
/*定义动画*/
@keyframes marginLeft {
    0% {
        margin-left: 0;
    }

    25% {
        margin-left: -1226px;
    }

    50% {
        margin-left: -2452px;
    }

    75% {
        margin-left: -3678px;
    }

    100% {
        margin-left: -4904px;
    }
}

.swiper img {
    float: left;
    width: 1226px;
    height: 460px;
}

CSS3 animation动画

1. animation 设置多个节点来精确控制一个或一组动画，常用来实现多变化、多控制、连续自动播放等效果
2. @keyframes定义动画
3. 调用动画

animation: name duration timing-function delay iteration-count direction fillmode play-state
animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或结束的状态

动画常用属性	描述
animation-duration	规定动画需要多少秒或毫秒完成 ，默认0 (必须)
animation-timing-function	规定动画的速度曲线，默认ease
animation-delay	规定动画何时开始，默认0
animation-iteration-count	规定动画的播放次数，默认1，还有infinite(重复)
animation-direction	规定动画是否反向播放，默认normal，alternate(逆播放)
animation-fill-mode	规定动画结束后的状态，forwards(保持)、backwards(回到起始)
animation-play-state	规定动画是否正在运行或已暂停，默认running(运行)，还有pause(暂停)

速度曲线	描述
liner	匀速
ease	默认，逐渐慢下来
ease-in	加速
ease-out	减速
ease-in-out	先加速再减速
steps()	指定了时间函数中的间隔数量（步长）