21.css3轮播效果

html：

<div class="div_first">
    <div class="div_second">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">1</div>
    </div>
</div>

css：

.div_first{
    width       : 1000px;
    height      : 80px;
    margin-top  : 100px;
    margin-left : 250px;
    overflow    : hidden;
}
.div_second{
    width     : 4000px;
    position  : relative;
    animation : myimg 6s ease-in-out infinite;
    font-size : 0;
}
.item {
    width       : 1000px;
    height      : 80px;
    text-align  : center;
    line-height : 80px;
    display     : inline-block;
    font-size   : 20px;
    border      : 1px solid;
    box-sizing  : border-box;

}
@keyframes myimg{
    /* 第一帧 */
    0%{
        left: 0;
    }
    23.3% {
        left: 0;
    }
    33.3% {
        left: -1000px;
    }
    /* 第二帧 */
    56.6%{
        left: -1000px;
    }
    66.6%{
        left: -2000px;
    }
    /* 第三帧 */
    90%{
        left: -2000px;
    }
    100%{
        left: -3000px;
    }
    /* 第四帧:第四帧不用写, 因为它已经是第一帧的内容了 */
}

查看效果