CSS Flip Switch 生成器

这个 CSS Flip Switch 生成器可以用纯 CSS 创建带动画的 toggle switch。你可以自定义 track、thumb、文字标签、颜色、边框、过渡效果和预设样式,并实时预览开关状态,最后复制生成的 HTML 与 CSS。

自定义设置

Animation

ms

Track Configuration

px
px
px
px

Thumb Configuration

px
px
%
px

Labels

px
px

预览

{{ isChecked ? labelActive : labelInactive }}