HOVER · 悬停交互
参数调改
PLAYGROUND
描边色 A--border_a
描边色 B--border_b
描边色 C--border_c
文字颜色--text_color
旋转周期--spin_ms
12009000
按钮圆角--radius_px
4999
描边宽度--border_w
14
实现要点
NOTES- 01
按钮自身是 conic-gradient 填充层,用 padding: var(--bw) 撑出描边厚度,内部 label 元素以同款圆角盖住中心只露出边缘一圈渐变——比 border-image 圆角更自由。
- 02
--gb_angle 必须用 @property 注册为 <angle> 才能在 keyframes 里插值旋转,否则 conic 渐变只会逐帧跳变;Chrome/Edge 85+ 支持。
- 03
内层圆角 = 外层圆角 - 描边宽度,保证任何圆角/描边宽度组合下转角处既不露底也不叠边。
- 04
hover 内部填充复用同一个 --gb_angle 变量,渐变方向随描边一起旋转,观感是『按钮内部被流动的光填了一层薄色』。
- 05
只动注册后的自定义属性(合成器路径的渐变插值),不改布局属性;不支持 @property 的环境降级为静态三色描边,按钮功能不受影响。
- 06
reduced-motion:停止旋转,保留 0deg 起始的静态三色描边。
源代码
SOURCE
加载源代码…