纯CSS实现简易的无缝滚动效果

本文将介绍通过强大的CSS中的animation来实现无缝滚动动画，思路来源于JS的动画方式。
1.给要使用动画的元素添加animation属性，并设置相关参数和动画方案@keyframes。
2.相同的某个元素复制2份。
3.动画逻辑是：2个相同的元素，父容器的宽度是1680px，当第1个元素向左偏移840px完成后，瞬间复原位置，利用视觉差来实现无缝滚动的效果。

图1：

图2：

直接上代码：

html:

<div class="box1-wrapper">
    <div class="box1">
        <ul class="img-list">
            <li class="img-item">1</li>
            <li class="img-item">2</li>
            <li class="img-item">3</li>
            <li class="img-item">4</li>
        </ul>
        <ul class="img-list">
            <li class="img-item">1</li>
            <li class="img-item">2</li>
            <li class="img-item">3</li>
            <li class="img-item">4</li>
        </ul>
    </div>
</div>
复制代码

css:

.box1-wrapper {
    width: 840px;
    height: 200px;
    margin: 50px auto 0;
    overflow: hidden;
    background-color: darkgray;
}
.box1 {
    width: 1680px;
    height: 200px;
    overflow: hidden;
    background-color: darkgoldenrod;
    font-size: 0;
}
.box1:hover .img-list{
    animation-play-state: paused;
    -webkit-animation-play-state: paused;
}
.img-list {
    display: inline-block;
    width: 840px;
    height: 200px;
    overflow: hidden;
    font-size: 0;
    background-color: coral;
    animation: imagesLoop 10s linear 1s infinite normal;
}
.img-item {
    display: inline-block;
    width: 200px;
    height: 200px;
    margin-right: 10px;
    /* background-image: url('qcx.png'); */
    background-size: 100%;
    background-repeat: no-repeat;
    background-color: darkcyan;
    font-size: 20px;
    text-align: center;
    line-height: 200px;
    cursor: pointer;
    color: red;
}
@keyframes imagesLoop {
    0% {
        transform: translateX(0px);
    }
    100% {
        transform: translateX(-840px);
    }
}
复制代码