CSS实现checkbox选中动画

/* 定义checkbox样式 */
.checkbox-custom {
  position: absolute;
  opacity: 0;
  /* 隐藏原生的checkbox */
}
 
/* 定义checkbox选中后的样式 */
.checkbox-custom:checked + .label-custom {
  color: #fff;
  /* 根据需要更改选中后的颜色 */
}
 
/* 定义checkbox选中后的动画 */
.checkbox-custom:checked + .label-custom::after {
  content: '\2714';
  /* Unicode字符表示勾选 */
  color: #009966;
  /* 勾选后的颜色 */
  animation: checkbox-anim 0.2s forwards;
  /* 调用动画 */
}
 
/* 定义动画 */
@keyframes checkbox-anim {
  to {
    transform: scale(0.8) rotate(1turn);
    /* 动画结束时的变换，可以自定义 */
  }
}
 
/* 定义label样式 */
.label-custom {
  cursor: pointer;
  /* 使label可点击 */
  position: relative;
  /* 用于定位勾选标记 */
}
 
/* 定义label上勾选标记的样式 */
.label-custom::after {
  content: '';
  /* 需要与checkbox:checked::after的content一致 */
  position: absolute;
  left: 0;
  top: -2px;
  /* 位置调整 */
  font-size: 16px;
  /* 根据需要调整大小 */
}

这段代码展示了如何使用CSS隐藏原生的checkbox，并通过label和伪元素来创建一个自定义的勾选动画。当checkbox被选中时，label上会出现一个动画，该动画由@keyframes定义并通过animation应用到伪元素上。这是一个简单的例子，实际应用中可以根据需要添加更多样式和动画效果。