纯CSS实现多图无限平滑循环滚动
核心原理解释（以水平方向滚动为例）：
- 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; /* 重要 ：不折行，水平伸展 */
will-change: transform;
/* 动画周期时长应根据图片水平衔接的长度调整 */
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%); } } - 需要图片在垂直方向上滚动的，可参照本示例做些必要的改造。
前一篇: CSS offset-path 属性之几何图形路径
下一篇: 没有了
发表评论:
评论列表 [0条]
