纯CSS无法实现真随机滚动，只能通过预设差异化的animation-duration和animation-delay值模拟视觉随机感；关键在于让每个标签动画节奏错开、避免同步重合，并选用transform等高性能属性。
纯 CSS 无法在运行时生成真正的随机数，animation-duration 也不能动态设为“随机值”。所谓“随机滚动效果”，本质是**预设一组离散的、差异明显的持续时间 + 延迟值**，靠人眼分辨不出规律，从而形成视觉随机感。
为什么不能用 JavaScript 式的 Math.random() 给 animation-duration 赋值
CSS 中的 animation-duration 是静态声明式属性，不支持表达式、函数或运行时计算。浏览器解析样式表时就已确定所有动画参数，不存在“每次渲染都重新取一个随机数”的机制。试图用 style.animationDuration = Math.random() * 5 + 's' 属于 JS 行为，已脱离纯 CSS 范畴。
如何用预设 duration/ delay 模拟随机滚动
关键不是“真随机”，而是让每个标签的动画节奏错开、不重合：
- 给每个
<a></a>标签手动加不同类名（如tag-1、tag-2…），或用 :nth-child(n) 选择器批量控制 - 为每组定义独立的
animation-duration（如4.2s、5.7s、6.1s）和animation-delay（如-1.3s、-0.8s） - 避免使用整数秒（如
5s、6s），小数能显著降低同步概率 - 动画本身建议用
transform: translateX()或rotate()，别用margin-left等触发布局重排的属性
常见翻车点：看似随机，实则卡顿/重叠
以下写法会让多个标签在某一帧突然“撞在一起”或集体停顿：
立即学习“前端免费学习笔记（深入）”；
- 所有标签共用同一个
@keyframes名但没配animation-delay→ 全部从 0% 同步启动 -
animation-duration全设成相同值（哪怕带小数），而animation-delay又是等差数列 → 周期性重合 - 容器
overflow: hidden没设，导致滚动内容溢出破坏布局 - 用了
white-space: nowrap却没限制父容器宽度 → 标签被强行拉长，旋转后定位偏移不可控
一个可直接抄的最小可行片段
假设你有 6 个标签，HTML 结构如下：
<div class="tag-cloud"> <a href="#" class="tag tag-1">CSS</a> <a href="#" class="tag tag-2">Animation</a> <a href="#" class="tag tag-3">Flex</a> <a href="#" class="tag tag-4">Rotate</a> <a href="#" class="tag tag-5">Cloud</a> <a href="#" class="tag tag-6">Scroll</a> </div>
CSS 部分只需这样写几行就能起效：
.tag {
position: absolute;
animation: float 5s ease-in-out infinite;
}
.tag-1 { animation-duration: 4.3s; animation-delay: -0.2s; }
.tag-2 { animation-duration: 5.8s; animation-delay: -1.7s; }
.tag-3 { animation-duration: 6.2s; animation-delay: -0.9s; }
.tag-4 { animation-duration: 4.9s; animation-delay: -2.1s; }
.tag-5 { animation-duration: 5.4s; animation-delay: -1.3s; }
.tag-6 { animation-duration: 6.6s; animation-delay: -0.5s; }
@keyframes float {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
25% { transform: translate(12px, -8px) rotate(3deg); }
50% { transform: translate(-5px, 5px) rotate(-2deg); }
75% { transform: translate(8px, 3px) rotate(1deg); }
}真正难的是让几十个标签在不同屏幕尺寸下都保持分散不堆叠——这需要结合 top/left 的百分比定位、transform: scale() 的响应缩放，以及对 animation-timing-function 的微调。别指望一套值通用所有场景。
