AI 摘要：这篇博文由 Chris Coyier 撰写，通过一系列小实验展示了 CSS random() 函数的潜力与趣味。作者用它生成旋转星空、滚动视差(parallax)星空及基于滚动的点阵动效，探索随机数与动画、滚动时间轴 (scroll-driven animation) 以及 steps() 函数的互动效果。虽然目前仅 Safari 技术预览版支持该功能，但文章提供了可视化演示和代码片段，展示了 random() 带来的新创意空间和未来样式系统的潜能。

1. 引言与 random() 函数现状
• 作者介绍 CSS random() 函数的出现与规范化
• 指出目前仅 Safari Technical Preview 支持
• 强调实验性质：探索随机性在视觉设计中的可玩性

2. 旋转星空背景（Rotating Star Field）
• 灵感来自游戏 BALL x PIT 的旋转星空视觉
• 通过一系列定位在中心的 <div> 构建星体容器
• 使用 random() 控制星距、高度与旋转角度实现随机布局
• 结合 CSS 动画让内外圈星星反向旋转，形成动态层次感
• 提供 Demo 示例

3. 滚动视差星空（Parallax Stars）
• 扩展星空概念，将运动与滚动事件绑定
• 随机分组不同星星移动速度（100px、200px、300px）制造深度感
• 利用 animation-timeline: scroll(root) 与 animation-composition: accumulate 控制滚动叠加动画
• 展示了如何通过原生 CSS 控制视觉差与滚动互动
• 提供 Demo 示例

4. 网格点水平线（Horizontal Rules of Gridded Dots）
• 探索 random() 与 steps() 的结合，用离散滚动帧创造“跳动式”动画
• 创建点阵 <div> 元素随机偏移，再在滚动中平滑对齐
• 使用 view-timeline 触发每个分隔条的独立动画范围
• 通过渐变色与对齐位置制造视觉满足的“入场”效果
• 提供 Demo 示例

5. 结语与对未来 CSS 的思考
• random() 带来动态纹理与自然随机性的设计潜力
• 讨论当前需大量 <div> 的实现代价，期望未来 CSS 原生支持“可样式化网格单元”
• 总结：CSS 的随机性为网页设计开辟更多创造性方向

Frontendmasters

More CSS random() Learning Through Experiments

There is quite a bit of interesting design possibility with `random()` coming to CSS. It pairs nicely with animation, particularly animation-composition for agumenting those generated values.