弹性开关动画（3 款 Toggle Switch CSS 动效）

效果演示（真实可交互）

开关是设置面板最常见的控件，弹性能让它「活」起来：圆钮滑动时带一点过冲回弹，松手后稳稳停在终点，手感接近原生 iOS。演示区 3 款分别适合系统设置、日夜模式切换、紧凑工具栏，均为真实可点击的 checkbox，键盘 Tab 聚焦也有高亮反馈。

完整代码

HTML（隐藏原生 checkbox，label 包轨道与圆钮）：

<label class="switch">
  <input type="checkbox">
  <span class="track"><span class="knob"></span></span>
  <span class="text">弹性开关</span>
</label>

CSS（核心三件套：轨道、圆钮、回弹缓动）：

.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }

.track { position: relative; width: 52px; height: 30px; border-radius: 999px;
  background: #dde3f2; transition: background .35s ease; }
.knob { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px;
  border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(20,30,70,.25);
  /* 关键：cubic-bezier 的 overshoot 产生「弹一下」的过冲 */
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }

.switch input:checked + .track { background: #34c759; }
.switch input:checked + .track .knob { transform: translateX(22px); }

无需一行 JS：label 点击原生切换 checkbox，CSS 用相邻兄弟选择器 input:checked + .track 驱动状态。图标开关（日/月交叉旋转）与迷你开关的差异仅在轨道尺寸与圆钮内容，完整写法见演示区 .tg-* 系列。

参数说明

兼容性与性能

• 纯 CSS 实现，无 JS；隐藏 checkbox 保留原生语义，屏幕阅读器可直接朗读状态
• 动画只走 transform 与 background-color（合成器属性），60fps 流畅
• :focus-visible 提供键盘焦点轮廓，无障碍友好
• 兼容 Chrome / Firefox / Safari / Edge 最新版，无需任何前缀

常见问题

Q: 能商用吗？ 可以。本组件为粤喵自研，免费商用无需署名。

Q: 圆钮滑不到位、有缝隙？ 行程 translateX 必须精确等于「轨道宽 - 圆钮宽 - 左右内边距」。比如轨道 52、圆钮 24、内边距 3，行程就是 52 - 24 - 6 = 22px。

Q: 想用 JS 控制开关状态？ 直接操作隐藏 checkbox：input.checked = true 会同步触发 CSS 动画；如需监听变化用 change 事件，无需操作圆钮本身。

Q: 打开后想要文字跟着变？ 用 input:checked ~ .text 选择器给文字换色或换文案即可，注意 HTML 里文字要和 input 是兄弟关系。