Liquid Glass UI 2026 — CSS @property 变形卡片，零 JavaScript
发布: (2026年3月14日 GMT+8 02:09)
1 分钟阅读
原文: Dev.to
Source: Dev.to
Liquid glass morphing cards (CSS‑only)
- 使用纯 CSS 构建 – 无需 JavaScript。
- 利用 CSS
@property动画 圆锥渐变旋转边框。 - 悬停时的光泽效果由自定义属性
--shine-x和--shine-y驱动。 - 使用
backdrop-filter实现 折射深度。 - 通过 SVG
feTurbulence添加颗粒叠加层。 - 采用错位的 sparkline 条形图 增添视觉亮点。
所有这些效果均仅通过 CSS 实现。