MOTION HUB

霓虹开关

Neon Toggle
#neon-toggle · 37/72
CLICK · 点击交互

参数调改

PLAYGROUND
霓虹色--glow_color
圆钮颜色--knob_color
轨道宽度--track_w
4496
px
切换时长--dur_ms
100600
ms
呼吸脉冲--pulse

实现要点

NOTES
  1. 01

    霓虹感来自三层同色 box-shadow 叠加(2px 锐 + 6px 散 + 14px 晕,光晕半径与饱和度都刻意减半)再补一层 inset 内透光——绿色只做点缀级辉光,不需要 filter 与 color-mix。

  2. 02

    轨道高度、圆钮尺寸与行程全部由 --track_w 用 calc 推导,改一个宽度参数整体联动,不会错位。

  3. 03

    input 视觉隐藏但保留可聚焦:label 包裹使点击文字也可切换;:focus-visible 提供键盘操作外圈。

  4. 04

    knob 用带回弹的 cubic-bezier(0.3,1.4,0.6,1),滑到位有物理感;行程 transition 只动 transform。

  5. 05

    呼吸脉冲只在选中态播放,用 animation-play-state: var(--pulse) 控制启停;reduced-motion 下整体关闭。

源代码

SOURCE

加载源代码…