怎么用它 · 从代码里读出的实话
适用场景
- 替换现有页面中缺乏生气的静态区块
可调参数
- --bg
- #070711
- --panel
- rgba(255,255,255,.045)
- --line
- rgba(255,255,255,.1)
- --txt
- #eceaf9
- --dim
- #9d99c4
- --v1
- #8b5cf6
- --v2
- #d946ef
- --c1
- #22d3ee
无障碍
- ⚠尚未内置 reduced-motion 兜底——上线前请把动画包进 @media (prefers-reduced-motion: reduce)。
- ✓包含 ARIA 属性 / 标签,对辅助技术友好。
- ✓使用原生交互元素,键盘焦点开箱即用。
性能特征
- 动画只用 transform/opacity(GPU 合成),不触发布局重排。
- 使用了 CSS blur(最贵的滤镜)——移动端请控制模糊面积。
- backdrop-filter 玻璃面板好看但每帧都要合成——少量点缀可以,整页铺满会卡。
- 自包含单文件(约 4.6 KB,零网络请求)——可内联或 iframe 懒加载。
更多相关资源
评论与评分
加载评论中…