[分享]css3打勾特效

CSS3打勾特效是一种非常简单而实用的装饰效果，可以让网页元素看起来更加生动活泼。下面我们来一起学习如何实现这个特效。.tick { width: 30px; height: 30px; border...

CSS3打勾特效是一种非常简单而实用的装饰效果，可以让网页元素看起来更加生动活泼。下面我们来一起学习如何实现这个特效。

.tick {
  width: 30px;
  height: 30px;
  border: 2px solid #333;
  border-radius: 50%;
  position: relative;
}

.tick::before,
.tick::after {
  content: ';
  position: absolute;
  width: 2px;
  height: 20px;
  background-color: #333;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}

.tick::before {
  height: 10px;
  transform-origin: center bottom;
}

.tick:hover::before {
  animation: tick 0.3s linear forwards;
}

@keyframes tick {
  0% {
    height: 0;
    transform-origin: center bottom;
  }
  100% {
    height: 10px;
    transform-origin: center bottom;
  }
}

.tick:hover::after {
  animation: reverse-tick 0.3s linear forwards;
}

@keyframes reverse-tick {
  0% {
    height: 20px;
  }
  100% {
    height: 0px;
  }
}

以上就是CSS3打勾特效的实现代码，它使用了伪元素和动画效果来完成。在一个.tick类的元素中，我们使用了一个::before伪元素来代表打勾，::after伪元素来代表反向打勾。这两个伪元素都是以绝对定位的方式出现在.tick元素的中心位置。

当鼠标滑过.tick元素时，我们使用了一个:hover伪类，触发动画效果。在这个动画中，::before伪元素会展开，呈现出打勾的形状，而::after伪元素则会收缩，呈现出反向打勾的形状。

这个特效可以运用在很多地方，比如用作选择框或确认框的勾按钮等，相信大家都可以根据自己的需求进行修改和定制。希望这篇文章对大家有所启发！