复选框动画

纯 CSS 实现的自定义复选框，勾选时方框缩放弹跳，对勾以描边动画绘制出现，无需任何 JavaScript。

实时预览

启用通知提醒

我已阅读用户协议

订阅邮件推送

代码

css

.cb-item {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.cb-item input[type="checkbox"] { display: none; }

.cb-box {
  width: 22px;
  height: 22px;
  border: 2px solid rgba(255,255,255,0.2);
  border-radius: 6px;
  position: relative;
  transition: all 0.3s ease;
}

.cb-item input:checked + .cb-box {
  background: #667eea;
  border-color: #667eea;
  animation: pop 0.35s ease;
}

.cb-box svg polyline {
  stroke: #fff;
  stroke-width: 2.5;
  fill: none;
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  transition: stroke-dashoffset 0.3s ease 0.1s;
}

.cb-item input:checked + .cb-box svg polyline {
  stroke-dashoffset: 0;
}

@keyframes pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

html

<label class="cb-item">
  <input type="checkbox" />
  <div class="cb-box">
    <svg viewBox="0 0 16 16">
      <polyline points="2.5 8 6 11.5 13.5 4" />
    </svg>
  </div>
  <span>选项文字</span>
</label>

纯 CSS 实现的复选框动画表单动画效果——通过伪类选择器（:focus、:checked）和过渡动画让表单元素具有交互反馈。无需 JS 即可实现聚焦发光、开关切换、浮动标签等效果。

快速使用

复制 CSS 代码到你的样式文件中
将 HTML 表单结构粘贴到页面中（注意 checkbox/radio 的 id-label 对应关系）
调整颜色和尺寸以匹配你的表单设计
配合 :valid/:invalid 伪类添加表单校验的视觉反馈

使用场景

登录/注册表单：聚焦发光效果让用户知道当前正在输入的字段
设置页面：开关切换和复选框动画让配置操作更直观
搜索框：下划线增长或聚焦扩展动画引导用户输入
错误提示：抖动动画+红色边框给校验失败的字段明确反馈

常见问题

Q: 纯 CSS 表单动画需要 JS 做校验吗？ A: CSS 负责视觉反馈，JS 负责逻辑校验。推荐配合使用：CSS 处理 :valid / :invalid 伪类的样式变化和过渡动画，JS 负责自定义校验规则和提交拦截。

Q: 浮动标签的兼容性如何？ A: :placeholder-shown 伪类 IE 不支持，但所有现代浏览器都支持。IE 降级方案：让标签始终在输入框上方，放弃浮动动画。或使用 :focus-within（同样不支持 IE）。

Q: 开关切换和复选框动画支持键盘操作吗？ A: 用 <label> 包裹的 checkbox/toggle 天然支持键盘操作（Tab 聚焦 + Space 切换）。配合 :focus-visible 伪类添加焦点环样式，满足无障碍要求。

浏览器兼容性

浏览器	兼容性
Chrome / Edge	✅ 完全支持
Firefox	✅ 完全支持
Safari	✅ 完全支持
移动端浏览器	✅ 完全支持
IE 11	⚠️ `:focus-within` / `:placeholder-shown` 不支持

使用说明

属性	说明
`stroke-dasharray`	对勾描边总长度，需大于路径实际长度
`stroke-dashoffset`	从 20 → 0 实现描边绘制动画
`animation: pop`	勾选时方框弹跳缩放效果
`0.1s delay`	对勾延迟 0.1s 开始绘制，视觉层次更佳
`input:checked + .cb-box`	纯 CSS 状态切换，零 JS

提示： 可将 #667eea 替换为任意品牌色。polyline 的 points 可修改为叉号或其他图形。

复选框动画 ​

实时预览 ​

代码 ​

快速使用 ​

使用场景 ​

常见问题 ​

浏览器兼容性 ​

使用说明 ​

📎 相关动画推荐