纯css实现checkbox动画必须满足input在目标元素前且同级，用~或+选择器控制；:checked伪类仅对后续同级元素生效，dom顺序和层级错误会导致失效。
纯 CSS 实现 checkbox 动画完全可行，但必须严格满足结构和选择器限制——input[type="checkbox"] 必须在目标元素之前、同级、且用 ~ 或 + 选择器控制后续兄弟元素；否则动画不会触发。
为什么:checked 伪类不生效？检查 DOM 顺序和兄弟关系
CSS 的 :checked 只能通过兄弟选择器（~ 或 +）影响它后面的同级元素。如果你写了 #toggle:checked ~ .box 却没反应，大概率是：input 不在 .box 前面，或者两者不在同一父容器下。
-
input和动画目标元素必须写在同一个父元素内，且input在前 - 不能跨层：
.parent #toggle:checked ~ .child .box无效，~只匹配**直接同级**的后续元素 - 如果目标元素是
input的父级或前面的兄弟，CSS 无解，必须换 JS
隐藏原生 checkbox 的两种稳妥写法
美化前提：先让浏览器默认复选框不可见，再用伪元素重绘。推荐用 opacity: 0 + position: absolute，比 appearance: none 兼容性更稳（尤其 Safari 旧版）。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
.hidden-checkbox { position: absolute; opacity: 0; pointer-events: none; }—— 完全透传点击，label 点击仍有效 - 别用
display: none：它会让:checked失效，状态无法被 CSS 捕获 - 如果用了
visibility: hidden，记得同时加pointer-events: none，否则可能拦截点击
实现滑入/缩放/对勾等动画的关键 CSS 属性组合
动画效果本质是控制目标元素的 transform、opacity、visibility，并配合 transition。注意：仅靠 display 无法过渡，必须避开它。
- 滑入（如底部弹出）：
transform: translateY(100%)→transform: translateY(0) - 缩放入场：
transform: scale(0.8); opacity: 0;→transform: scale(1); opacity: 1; - 对勾动画（用伪元素）：在
span后置内容，input:checked + span::after控制transform: rotate(45deg) scaleX(1)，初始设为scaleX(0)并加transition - 必加
transition：只写transition: all .3s容易卡顿，建议明确属性，如transition: transform .3s ease, opacity .2s ease
移动端点击无响应？补上 touch-action 和 user-select
部分安卓 WebView 或 iOS Safari 在 label 上点击 checkbox 时响应迟钝，甚至失效，常见原因是默认行为被干扰。
- 给触发用的
label加上：user-select: none; -webkit-tap-highlight-color: transparent; - 若动画区域较大（如整个卡片），加
touch-action: manipulation提升点击灵敏度 - 确保
input没被z-index或pointer-events错误遮挡——哪怕它透明，也要能被点中
最易被忽略的一点：所有动画依赖 :checked 状态切换，而这个状态只在用户真实交互（点击 label 或 input 本身）时更新；用 JS 手动设置 input.checked = true 不会触发 CSS 动画，除非你额外用 class 模拟或强制重排。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
