css中打对勾的特效

CSS中打对勾的特效是一种较为常见的效果。可以将打对勾的特效应用于按钮、复选框等元素，使其更加美观、生动。

.checkmark {
  width: 25px;
  height: 25px;
  border: solid #999;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  display: inline-block;
}

.checkbox:checked ~ .checkmark {
  border-color: #2196F3;
}

.checkmark:after {
  content: "";
  display: none;
  position: absolute;
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid #2196F3;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.checkbox:checked ~ .checkmark:after {
  display: block;
} 

代码中利用border来绘制对勾，再利用transform来旋转，使其形成斜角的效果。.checkbox:checked ~ .checkmark的意思是选中状态下将对勾的颜色修改为蓝色。.checkmark:after则是在对勾的右侧增加一个小三角形，形成真正的对勾效果。