纯CSS开关按钮应使用type="checkbox"实现，通过::after伪元素配合transform:translateX()和正确声明的transition（如cubic-bezier(0.4,0,0.2,1)）实现平滑滑动，同时确保可访问性、键盘操作与移动端适配。
纯 CSS 实现的开关按钮滑动过渡效果，核心不是“做动画”，而是让 input[type="checkbox"] 的状态变化自然触发 ::after 伪元素的位移，再靠 transition 控制这个位移过程是否平滑。只要结构和关键属性写对，不需要 JS 就能有可靠、可访问、可键盘操作的滑动效果。
为什么用 input[type="checkbox"] 而不是 button 或自定义标签
因为原生 checked 状态自带语义、焦点管理、键盘支持（空格键切换）、屏幕阅读器识别，且无需监听 click 或模拟状态。用 button + JS 模拟会丢失这些能力，还容易在 Safari 或 NVDA 下失效。所有“iOS 风格 toggle”都是复选框伪装的——这不是妥协，是标准做法。
-
display: none或opacity: 0会让它脱离可访问流，必须用position: absolute; left: -9999px移出视口但保留交互性 - 必须用
<label for="id"></label>或包裹<input>，否则点击轨道无法触发状态变更 - 不能用
role="switch"单独加在 div 上代替 checkbox——它只是辅助说明，不提供状态控制能力
transform: translateX() 是滑块位移的唯一可靠方式
滑块从左到右的“滑动”本质是改变水平位置，transform 触发 GPU 加速、不触发重排、动画帧率稳。用 left / margin-left 会强制浏览器计算布局，尤其在低端 Android 上容易卡顿或跳变。
- 轨道宽 60px、高 30px 时，滑块（
::after）通常设为 26px × 26px；默认translateX(2px)（留边），选中后translateX(32px)（右对齐） - 必须显式声明基础态的
transform: translateX(2px)，否则未选中时浏览器按none处理，过渡起点不明确 - 不要用
transition: all 0.3s——万一未来加了box-shadow或filter，会意外触发动画
transition 必须写在 label 或伪元素的基础样式里
只在 input:checked + .slider::after 里写 transition，会导致“打开有动画、关闭没动画”。浏览器只在进入该选择器时应用规则，离开后规则失效，滑块啪地弹回原位。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 正确写法：
.slider::after { transform: translateX(2px); transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); } - 缓动函数推荐
cubic-bezier(0.4, 0, 0.2, 1)（类似 iOS 的“标准缓动”），比ease-in-out更跟手 - 避免用
0.1s这类过短时长——人眼感知不到“滑动”，只觉得是闪；也别用超过0.35s——交互反馈延迟感明显
移动端点击区域与 focus 样式容易被忽略
PC 上靠 :hover 提示，但手机没有 hover，用户点哪、焦点在哪、是否已激活，全靠视觉反馈。没处理好，用户会反复点击怀疑失灵。
-
label宽度至少设为 60px，高度 30px，但点击热区建议扩到 44×44px（符合 WCAG 触摸最小尺寸） - 必须加
.slider:focus-within::before或label:focus-within .slider::before给轨道加 outline，否则键盘 Tab 到开关时看不到焦点 - 不要仅靠颜色区分状态——深色模式下
background-color: #4A90E2可能和背景混在一起，加个box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.5)更稳妥
真正难的不是让滑块动起来，而是让它的动“不突兀、不卡、不丢焦点、不瞎”，而这些全由基础结构和 transition 位置决定。改一个 left 为 transform，把 transition 从 :checked 里挪到基础样式，再补上 focus 样式——三处改动，就覆盖了 90% 的线上问题。
