CSS 即将引入 `random()` 函数:Polypane 助力创意设计新玩法!

发布时间:2026/6/29 3:20:43
CSS 即将引入 `random()` 函数:Polypane 助力创意设计新玩法! 品牌套件与功能介绍此网站启用 JavaScript 效果更佳。Polypane 有品牌套件涵盖复制图标、标志为 SVG还有品牌指南和主页链接。菜单包含功能、响应式设计、可访问性、网站质量、门户暗黑模式页面等适用于开发人员、设计师、质量保证人员和营销人员。还有社交媒体预览、质量保证、Tailwind CSS、集成等更多功能以及 Polypane 代码片段库、颜色对比度检查器等免费在线工具。更新日志Polypane 29 于 2026 年 5 月 4 日更新有面板 UI、新网络面板、新代码片段库等改进Polypane 28.0.3 和 28.0.2 于 2026 年 3 月 10 日发布为修复 bug 版本。CSS random() 函数试验CSS 即将引入 random() 函数可在 Polypane 29 及更高版本、启用实验性功能的 Chromium 148 及更高版本、Safari 26.2 及更高版本中测试。作者制作了多个演示包括散景效果、飘落的花瓣、一叠可抛掷的宝丽来照片、使用 random-item() 设计一首诗等。散景效果演示散景效果通过 random() 函数设置圆圈的位置、大小、颜色、模糊程度和动画等。位置设置为绝对定位使用 random() 随机放置大小通过自定义属性和 element-scoped 关键字确保宽度和高度相同颜色使用 hsl() 函数和 random() 设置色调值并添加随机透明度模糊程度使用 filter: blur() 和 contrast() 滤镜以及 mix-blend-mode动画使用简单的脉冲动画设置随机的动画时间和延迟。飘落的花瓣演示飘落的花瓣效果通过 random() 函数设置花瓣的起始位置、大小、样式、飘落动画和旋转动画。起始位置使用自定义属性和 element-scoped 关键字随机分布大小使用 aspect-ratio 和 random()样式理论上可使用 random-item() 选择不同花瓣但该函数未实现作者使用 nth-child 解决飘落动画对 translate 进行动画处理设置随机的动画时间和延迟旋转动画使用两个单独的动画设置随机的动画时间和延迟。一叠可抛掷的宝丽来照片演示一叠可抛掷的宝丽来照片通过 CSS Grid 创建堆叠使用 random() 函数随机旋转和偏移每张卡片。添加交互性通过复选框和表单的 reset 功能点击卡片触发动画将其抛掷出去点击重置按钮可将卡片重置回原始位置。使用 random-item() 设计一首诗作者想创作一首诗让单词随机换行或有不同偏移可使用 display: random-item(block, inline-block) 功能但 random-items() 还不存在。作者意识到可将 random() 与 if() 函数中的样式查询结合起来获得类似效果但 if() 函数目前在 Safari 中不受支持。