css打勾动画制作

2026-01-28 15:57:18CSS

CSS打勾动画制作方法

使用CSS制作打勾动画可以通过伪元素和关键帧动画实现，以下是具体实现方式：

HTML结构

<div class="checkmark"></div>

基础样式

css打勾动画制作

.checkmark {
  width: 50px;
  height: 50px;
  position: relative;
}

.checkmark::before,
.checkmark::after {
  content: "";
  position: absolute;
  background-color: #4CAF50;
}

.checkmark::before {
  width: 5px;
  height: 25px;
  left: 15px;
  top: 10px;
  transform: rotate(45deg);
}

.checkmark::after {
  width: 5px;
  height: 45px;
  left: 30px;
  top: 0;
  transform: rotate(-45deg);
}

动画实现方案

方案一：逐段绘制动画

.checkmark {
  width: 50px;
  height: 50px;
}

.checkmark::before {
  animation: drawBefore 0.5s ease-in-out forwards;
}

.checkmark::after {
  animation: drawAfter 0.5s ease-in-out 0.5s forwards;
  height: 0;
}

@keyframes drawBefore {
  0% { height: 0 }
  100% { height: 25px }
}

@keyframes drawAfter {
  0% { height: 0 }
  100% { height: 45px }
}

方案二：SVG路径动画

css打勾动画制作

<svg class="checkmark" viewBox="0 0 52 52">
  <path class="checkmark-path" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
</svg>

.checkmark {
  width: 50px;
  height: 50px;
}

.checkmark-path {
  stroke: #4CAF50;
  stroke-width: 4;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: dash 0.5s ease-in-out forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

进阶效果

弹性动画效果

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

.checkmark {
  animation: checkmark 0.6s ease-in-out;
}

颜色渐变效果

.checkmark::before,
.checkmark::after {
  background: linear-gradient(to right, #4CAF50, #8BC34A);
}

响应式调整

通过媒体查询调整不同屏幕尺寸下的打勾大小：

@media (max-width: 768px) {
  .checkmark {
    width: 30px;
    height: 30px;
  }

  .checkmark::before {
    height: 15px;
    left: 9px;
    top: 6px;
  }

  .checkmark::after {
    height: 27px;
    left: 18px;
  }
}

以上方法可根据实际需求组合使用，通过调整动画时间、缓动函数和尺寸参数可获得不同的视觉效果。SVG方案适合需要精细控制路径的场景，而纯CSS方案则更轻量且易于实现。