用 CSS random() 掷骰子
💡
原文中文，约5700字，阅读约需14分钟。
📝
内容提要
CSS即将推出random()函数，允许生成随机数，支持随机动画延迟、布局和颜色等，无需JavaScript。该函数采用三参数模式，适用于星场、矩形布局和幸运转盘等场景，增强了CSS的动态表现力。
🎯
关键要点
-
CSS即将推出random()函数，允许生成随机数，支持随机动画延迟、布局和颜色等，无需JavaScript。
-
random()函数采用三参数模式：random(min, max, step)，可生成指定范围内的随机数。
-
可以通过设置随机值来创建星场效果，星星的分布和尺寸均可随机化。
-
自定义属性可以复用随机生成的值，确保在多个调用中保持一致性。
-
random()函数可与grid布局结合，生成随机着色的矩形。
-
random()函数还可用于生成随机堆叠的照片组，增加视觉趣味。
-
幸运转盘示例展示了random()函数在交互元素中的应用，增强了CSS的动态表现力。
-
CSS工作组正在征集开发者反馈，以完善random()函数的最终方案。
❓
延伸问答
CSS的random()函数有什么主要功能？
random()函数可以生成随机数，支持随机动画延迟、布局和颜色等，无需JavaScript。
random()函数的参数格式是什么？
random()函数采用三参数模式：random(min, max, step)，用于定义随机数生成范围。
如何使用random()函数创建星场效果？
通过设置星星的top和left属性为随机值，并使用random()函数生成随机尺寸，可以创建星场效果。
random()函数如何与grid布局结合使用？
可以将random()函数与grid布局结合，随机着色的矩形可以被放置在网格中的任意位置。
random()函数在交互设计中有哪些应用？
random()函数可以用于创建幸运转盘等交互元素，生成不可预测的结果，增强用户体验。
CSS工作组对random()函数的反馈征集有什么目的？
CSS工作组希望通过开发者的反馈来完善random()函数的最终方案，确保其符合开发者需求。
➡️
