MOTION HUB

辉光描边卡片

Glow Border Card
#glow-border-card · 17/72
AUTO · 自动演示

参数调改

PLAYGROUND
辉光色 A--glow_a
辉光色 B--glow_b
旋转周期--spin_ms
150010000
ms
卡片圆角--radius_px
632
px
光晕强度--halo_opacity
01
卡面底色--surface

实现要点

NOTES
  1. 01

    描边层 = 1px padding + conic-gradient 背景,内层同构 surface 元素盖住中部,只露出边缘 1px 显色。

  2. 02

    --angle 必须用 @property 注册为 <angle> 才能参与 keyframes 插值,否则渐变只会逐帧跳变;Chrome/Edge 85+ 支持。

  3. 03

    光晕是独立的兄弟层(blur 24px),与描边层跑同一条动画;--angle 注册为 inherits:false,两层各持一份、天然同步,blur 开销只算在这一层。

  4. 04

    圆角内外联动:内层半径 = 外层 - 1px,避免描边转角处露底或叠边。

  5. 05

    reduced-motion:停掉旋转,保留 0deg 起始的静态双色描边。

源代码

SOURCE

加载源代码…