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 中不受支持。