用 checkbox 实现滑动开关需隐藏原生控件，通过 label 关联并用 ::after 绘制圆球；设 position: relative 于 label、absolute 于 ::after，用 transform: translateX() 替代 left 配合 transition 实现精准滑动动画，避免 calc() 兼容问题。
怎么用 checkbox 实现带滑动动画的开关按钮
纯 CSS 就能做，关键不是“画个圆球”，而是让 checkbox 的状态变化触发 :checked 伪类 + transition 控制圆球位移。浏览器原生 checkbox 默认隐藏，靠 label 关联点击区域，再用兄弟选择器（input + label）或父容器包裹控制样式。
常见错误是直接对 input[type="checkbox"] 写 transform —— 它不可见也不响应动画，必须作用在视觉元素（比如 label::before 或内部 span）上。
- 把
input放在label内部，或用for属性绑定id，确保点击 label 能触发选中 - 用
label::after绘制圆球，初始left: 2px（关态），:checked + label::after设为left: calc(100% - 22px)（开态，预留边距） - 给
::after加transition: left 0.2s ease-in-out，别用all，避免意外属性参与动画
transition 卡顿或不触发的几个硬性条件
不是写了 transition 就一定动，CSS 动画依赖“可动画属性”和“重绘触发”。left 虽然可动画，但若父容器没设 position: relative，absolute 定位的圆球会脱离文档流，位移计算可能错乱；更隐蔽的是，如果用了 display: none 切换开关可见性，transition 直接失效——因为元素被移出渲染树了。
- 圆球必须用
position: absolute，且其父label设position: relative - 禁用
display: none / block控制显隐，改用opacity: 0 / 1+pointer-events: none / auto - 避免在
:checked规则里同时改background-color和left却只写一个transition，应明确写成transition: left 0.2s, background-color 0.2s
移动端点击区域小、误触多，怎么扩大又不破坏样式
原生 checkbox 的点击热区极小，直接放大 input 本身无效（它不可见）。真正有效的是撑开 label 的尺寸，并用 padding 或 min-width/min-height 保证最小可点面积 ≥ 44px × 44px（iOS 触控规范）。
立即学习“前端免费学习笔记（深入）”；
-
label设min-width: 56px; min-height: 32px;，内部圆球保持 20px × 20px 不变 - 用
box-sizing: border-box避免padding导致整体变大超出预期 - 不要给
label加border或背景色来“示意可点”，这会干扰开关本身的视觉反馈；改用outline: none+:focus-visible做键盘焦点样式
为什么 Safari 上滑动偏移量不准，Chrome 却正常
Safari 对 calc() 在 transition 中的解析更严格，尤其当涉及百分比和固定像素混合时（比如 left: calc(100% - 22px)）。某些版本 Safari 会四舍五入计算结果，导致圆球停靠位置偏移 1px。这不是 bug，是渲染引擎对布局精度的取舍。
- 统一用
transform: translateX()替代left，比如关态transform: translateX(0)，开态transform: translateX(36px)（根据容器宽度定死） - 把圆球宽度（20px）和轨道内边距（如左右各 2px）加起来算总位移：20px + 2px × 2 = 24px，但要留 2px 缓冲防贴边，最终用 22px 更稳
- 加
will-change: transform到圆球元素，提前告知 Safari 这个属性会变，减少重排抖动
微交互的麻烦不在“怎么做出来”，而在“不同设备上都刚好停在该停的位置”。位移值别图省事写百分比，用固定像素 + transform 最可控。
