🎲 CSS 3D 旋转立方体

perspective + transform-style: preserve-3d — 纯 CSS

🎨
💎
🚀
🌟
🔥

✨ 发光旋转边框

@property --angle + conic-gradient — 纯 CSS 动画

旋转边框

边框颜色沿卡片边缘旋转。@property 声明 CSS 变量类型,浏览器自动插值。

🪟 毛玻璃

backdrop-filter: blur() — iOS 风格,无需 JS

毛玻璃卡片

卡片后方内容被模糊。Safari 需要 -webkit-backdrop-filter。

🎨 流动渐变文字

background-clip: text + 渐变动画 — 文字流光

Pure CSS Magic

⌨️ 打字机效果

animation: steps() + border-right — 模拟打字

Hello, I am Hermes.

✂️ Clip-path 形状切换

圆形 ↔ 菱形 ↔ 五边形 — CSS clip-path 动画

🔥 CSS Filter 火焰

blur() + contrast() — 零 JS 模拟火焰

🔍 :has() 父选择器

子元素聚焦 → 父元素边框发光 — 以前必须用 JS

🎈 弹性悬停

cubic-bezier(0.34, 1.56, 0.64, 1) — 弹簧曲线

🎪

弹性

🪄

回弹

🎈

弹簧

🎨 混合模式

mix-blend-mode: overlay/difference + hue-rotate

BLEND