纯CSS实现多图无限平滑循环滚动（通用方法）（有代码）转自马黑教程专版

admin · 发表于昨天 20:10

核心原理解释（以水平方向滚动为例）：

HTML标签结构：父容器 + 子容器（子容器装载双份相同的图片标签）；

父容器固定宽高，相对定位

子容器绝对定位，高度100%，设置为不折行（white-space: nowrap;）；

图片高度100%，需要双份相同的图片标签；

子容器 animation 属性无限循环运行关键帧动画；

关键帧动画使用 transform: translateX(-50%) 作为移动终点（子容器移动一半时，后续相同的图片标签跟在后面形成衔接而非断档——具体情况是与下一轮开始瞬间的图片重叠，达成无缝交替效果）。

应用实例：

<style>
    .pa {
        width: 1024px;
        height: 600px;
        border: 8px dotted gray;
        overflow: hidden; /* 重要 ：屏蔽溢出 */
        position: relative; /* 重要 ：相对定位 */
        margin: auto;
        --state: running; /* 动画开关 */
    }
    .pa:hover {
        --state: paused; /* 鼠标指针移动到 .pa 时暂停动画 */
    }
    .son {
        position: absolute; /* 重要 ：绝对定位 */
        height: 100%; /* 百分百高度 */
        white-space: nowrap; /* 重要 ：不折行，水平伸展 */
        /* 动画周期时长应根据图片水平衔接的长度调整 */
        animation: scroll 28s linear infinite var(--state);
    }
    .son img {
        height: 100%; /* 图片高度与容器一致（宽度自适应）*/
        margin: 0 6px; /* 图片之间的左右距离 */
    }
    @keyframes scroll {
        to { transform: translateX(-50%); }
    }
</style>

<div class="pa">
    <div class="son">
        <!-- 双份一模一样的图片标签 -->
        <img src="https://638183.freep.cn/638183/Pic/38/3-1.jpg" load="lazy" alt="" />
        <img src="https://638183.freep.cn/638183/Pic/38/3-2.jpg" load="lazy" alt="" />
        <img src="https://638183.freep.cn/638183/Pic/38/3-3.jpg" load="lazy" alt="" />
        <img src="https://638183.freep.cn/638183/Pic/38/3-4.jpg" load="lazy" alt="" />
        <img src="https://638183.freep.cn/638183/Pic/38/3-5.jpg" load="lazy" alt="" />
        
        <img src="https://638183.freep.cn/638183/Pic/38/3-1.jpg" load="lazy" alt="" />
        <img src="https://638183.freep.cn/638183/Pic/38/3-2.jpg" load="lazy" alt="" />
        <img src="https://638183.freep.cn/638183/Pic/38/3-3.jpg" load="lazy" alt="" />
        <img src="https://638183.freep.cn/638183/Pic/38/3-4.jpg" load="lazy" alt="" />
        <img src="https://638183.freep.cn/638183/Pic/38/3-5.jpg" load="lazy" alt="" />
    </div>
</div>
<p style="text-align: center;">鼠标指针移动到上面方框可暂停动画</p>

【说明】

img标签 load="lazy" 属性设置意为图片懒加载，这对需要展示大量的图片时有节能作用：图片尚未进入屏幕可视区域时暂时不予加载，直到它们移动到可视区域；

需要自左向右滚动图片的，改造关键帧动画如下：

@keyframes scroll {
    from { transform: translateX(-50%); }
    to { transform: translateX(0%); }
}

需要图片在垂直方向上滚动的，可参照本示例做些必要的改造。

		自动登录	找回密码
密码			立即注册