AUTO · 自动演示
参数调改
PLAYGROUND
辉光色 A--glow_a
辉光色 B--glow_b
旋转周期--spin_ms
150010000
卡片圆角--radius_px
632
光晕强度--halo_opacity
01
卡面底色--surface
实现要点
NOTES- 01
描边层 = 1px padding + conic-gradient 背景,内层同构 surface 元素盖住中部,只露出边缘 1px 显色。
- 02
--angle 必须用 @property 注册为 <angle> 才能参与 keyframes 插值,否则渐变只会逐帧跳变;Chrome/Edge 85+ 支持。
- 03
光晕是独立的兄弟层(blur 24px),与描边层跑同一条动画;--angle 注册为 inherits:false,两层各持一份、天然同步,blur 开销只算在这一层。
- 04
圆角内外联动:内层半径 = 外层 - 1px,避免描边转角处露底或叠边。
- 05
reduced-motion:停掉旋转,保留 0deg 起始的静态双色描边。
源代码
SOURCE
加载源代码…