复选框动画（对勾描线 + 弹性回弹勾选动效）

效果演示（真实可交互）

点击演示区的复选框：勾选瞬间盒子先弹性放大再回弹，同时对勾以描线动画逐笔画出；取消勾选时对勾淡出。四个样式分别是圆角方形（默认选中）、圆形、圆角方形变体和禁用态，全部基于原生 checkbox 实现——点击、聚焦、键盘空格切换都开箱即用。

完整代码

HTML（原生 input 加 SVG 对勾，label 包裹保证可访问性）：

<label class="cbx">
  <input type="checkbox" />
  <span class="cbx-box">
    <svg viewBox="0 0 24 24" class="cbx-svg">
      <path d="M5 12.5l4.6 4.6L19 7.4" />
    </svg>
  </span>
  复选框文字
</label>

CSS（描线动画用 stroke-dasharray / stroke-dashoffset，弹跳用关键帧）：

.cbx input { position: absolute; opacity: 0; }
.cbx-svg path {
  stroke-dasharray: 26;        /* 对勾路径总长 */
  stroke-dashoffset: 26;       /* 初始全部隐藏 */
}
.cbx input:checked + .cbx-box {
  background: linear-gradient(135deg, #6c8cff, #8a5cff);
  animation: cbx-pop .35s ease;              /* 盒子弹性回弹 */
}
.cbx input:checked + .cbx-box .cbx-svg path {
  animation: cbx-draw .3s ease .1s forwards; /* 延迟描线 */
}
@keyframes cbx-pop { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes cbx-draw { to { stroke-dashoffset: 0; } }

两个动画的配合是精髓：stroke-dasharray 与 stroke-dashoffset 同值，让对勾路径初始「完全隐藏」，勾选时 offset 归零，笔画从起点画到终点；盒子用 scale 关键帧做弹性回弹，对勾描线延迟 0.1 秒开始，形成「先弹盒子、再画对勾」的先后节奏。input 用绝对定位透明隐藏，label 仍可点击切换，键盘焦点用 :focus-visible 绘制外圈高亮。

参数说明

兼容性与性能

• 纯 CSS 实现，无 JavaScript；依赖 stroke-dasharray 动画与 transform，Chrome 31+ / Safari 7+ / Firefox 34+ / Edge 全支持
• 动画只涉及 transform 与 stroke 属性，无重排；多个复选框同页使用毫无压力
• 保留原生 input 与 label 语义，屏幕阅读器可正常播报，键盘 Tab 聚焦有可见高亮
• 圆形与圆角变体只需改 border-radius 一处，维护成本极低

常见问题

Q: 对勾没有描线效果，直接整条出现？ 检查 stroke-dasharray 数值是否与路径长度一致。路径总长约为 26，若自定义了更复杂的对勾路径，需用 JS 读取 path.getTotalLength() 重新赋值。

Q: 点击文字没有反应？ label 需要与 input 建立关联。用 label 包裹 input 的方式（本组件的写法）或给 label 设置 for 属性指向 input 的 id，二选一即可。

Q: 复选框在深色背景下看不清边框？ 把 .cbx-box 的 border 颜色换成高对比色，或将 input:checked 的渐变换成亮色主题，伪元素绘制方式不变。

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