本文详解如何使用纯 CSS 构建真正无缝的无限滚动轮播组件，通过精确计算内容宽度、改用 transform: translateX() 替代 left 动画，并复制内容实现视觉连续性，彻底消除循环时的“卡顿”或“抖动”现象。
本文详解如何使用纯 css 构建真正无缝的无限滚动轮播组件，通过精确计算内容宽度、改用 `transform: translatex()` 替代 `left` 动画，并复制内容实现视觉连续性，彻底消除循环时的“卡顿”或“抖动”现象。
要实现一个平滑、无限、无感知跳变的 CSS 轮播（marquee），关键在于两点：动画基准必须与内容尺寸严格对齐，且循环过渡必须由重复内容自然承接。原代码中使用 left: -100% 和 width: 200% 的做法依赖父容器百分比，而父容器（.marquee-block）被设为 width: calc(30% * 5)，远小于实际内容宽度，导致动画位移失准——这是“抖动”的根本原因。
✅ 正确解法：精准宽度 + transform + 内容镜像
首先，明确 .marquee-item 固定宽为 580px，gap: 40px（由 .marquee-inner span 定义），共 --total-marquee-items: 5 项。单组 <span></span> 的总宽度应为：
5 × 580px（项目宽） + 4 × 40px（4个间隙） = 2900px + 160px = 3060px
但为实现无缝循环，需至少渲染两组完整内容（即两个 <span></span>），因此 .marquee-inner 的宽度应设为：
.marquee-inner {
width: calc((580px + 40px) * var(--total-marquee-items) + 40px);
/* = (620px × 5) + 40px = 3140px —— 精确覆盖 5 项 + 末尾 gap */
}? 注意：此处
+ 40px是为了补足最后一项后本该存在的gap（因gap仅作用于相邻项之间，5 项产生 4 个 gap，但双组拼接时第二组首项需与第一组末项保持相同间距，故总宽 = 单组宽 × 2 − 末项冗余 gap；更稳妥写法是calc((580px + 40px) * 5)，即每项含自身宽+右侧 gap，5 项共占5 × 620px = 3100px，已足够。示例中采用3140px属保守冗余，实际推荐calc(580px * 5 + 40px * 4)或直接3100px）。立即学习“前端免费学习笔记（深入）”；
其次，动画必须基于元素自身尺寸。将 left 改为 transform: translateX()，因为：
-
transform的%单位参照元素自身宽（而非父容器），translateX(-100%)精确等于向左移动一个自身宽度； - GPU 加速，性能更优，避免重排重绘导致的卡顿。
修正后的关键动画规则如下：
@keyframes marqueeLeft {
0% { transform: translateX(0); }
100% { transform: translateX(-3100px); } /* 推荐显式像素值，完全可控 */
}
/* 或更通用（依赖 CSS 变量）： */
@keyframes marqueeLeft {
0% { transform: translateX(0); }
100% { transform: translateX(calc(-1 * (580px * 5 + 40px * 4))); }
}⚠️ 强烈建议避免
translateX(-100%)：虽然语义清晰，但在多组<span></span>布局下，-100%指的是.marquee-inner自身宽度（如3140px），而实际需位移的距离是单组内容宽度（3100px）。若两者不等，终点位置偏差，就会在循环起点暴露空白或重叠——这正是“抖动”的视觉来源。
✅ HTML 结构：双组内容保障无缝衔接
原结构已正确采用双 <span></span> 复制内容（如 1-2-3-4-5 + 1-2-3-4-5），这是实现无限滚动的基石。当第一组滚动出视口时，第二组恰好完全进入，视觉上无中断。务必确保：
- 两组
<span></span>内容完全一致且顺序相同（对to-left方向）； -
.marquee-inner高度足够容纳单行内容（当前height: 150px合理）； -
.marquee-block设置overflow: hidden严格裁剪。
✅ 完整可运行示例（精简优化版）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Seamless CSS Marquee</title>
<style>
.marquee-wrapper { background: #2F394C; text-align: center; }
.marquee-wrapper .container { overflow: hidden; }
.marquee-inner span { display: flex; gap: 40px; }
.marquee-block {
--total: 5;
height: 150px;
margin: 20px auto;
background: #1B2531;
padding: 30px 0;
overflow: hidden;
position: relative;
}
.marquee-inner {
display: flex;
width: calc(580px * 5 + 40px * 4); /* 3100px */
position: absolute;
animation: marqueeLeft 5s linear infinite;
}
@keyframes marqueeLeft {
0% { transform: translateX(0); }
100% { transform: translateX(-3100px); }
}
.marquee-item {
width: 580px;
background: #00cc00;
flex-shrink: 0; /* 关键：禁止缩放破坏宽度 */
}
.marquee-item p {
font: 800 30px/1 cursive;
margin: 0;
color: white;
}
</style>
</head>
<body>
<div class="marquee-wrapper">
<div class="container">
<div class="marquee-block">
<div class="marquee-inner">
<!-- 第一组 -->
<div class="marquee-item"><p>1</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill7155" title="Browser Js"><img
src="https://img.php.cn/upload/skill/000/000/081/179134209757570.jpg" alt="Browser Js" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill7155" title="Browser Js">Browser Js</a>
<p>轻量级CDP浏览器控制，适用于AI代理。相较于内置浏览器工具，token消耗降低3‑10倍，仅在浏览时使用。</p>
</div>
<a href="/xiazai/skill7155" title="Browser Js" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div></div>
<div class="marquee-item"><p>2</p></div>
<div class="marquee-item"><p>3</p></div>
<div class="marquee-item"><p>4</p></div>
<div class="marquee-item"><p>5</p></div>
<!-- 第二组（完全相同） -->
<div class="marquee-item"><p>1</p></div>
<div class="marquee-item"><p>2</p></div>
<div class="marquee-item"><p>3</p></div>
<div class="marquee-item"><p>4</p></div>
<div class="marquee-item"><p>5</p></div>
</div>
</div>
</div>
</div>
</body>
</html>? 关键总结
-
宽度必须精确：
.marquee-inner宽 =itemWidth × count + gap × (count−1)，拒绝模糊百分比； -
动画用
transform：translateX()的%基于自身宽，但显式像素值（如-3100px）更可靠、易调试； - 内容必须双份：两组相同序列确保滚动终点与起点视觉连续；
-
禁用 flex 缩放：添加
flex-shrink: 0到.marquee-item，防止浏览器自动压缩； -
无需 JS、响应式无关：所有尺寸固定（
580px），天然适配需求，且不随屏幕变化。
按此方案实现，轮播将如丝般顺滑循环，彻底告别“一卡一跳”的体验缺陷。
