css打勾动画制作

CSS打勾动画制作方法

通过CSS可以创建平滑的打勾动画效果，通常结合伪元素和关键帧动画实现。以下是两种常见实现方式：

基础实现（使用伪元素）

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

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

.checkmark::after {
    content: "";
    position: absolute;
    width: 25px;
    height: 50px;
    border-right: 5px solid #4CAF50;
    border-bottom: 5px solid #4CAF50;
    transform: rotate(45deg) scale(0);
    left: 15px;
    animation: checkmark 0.4s ease-out 0s forwards;
}

@keyframes checkmark {
    0% { transform: rotate(45deg) scale(0); }
    80% { transform: rotate(45deg) scale(1.2); }
    100% { transform: rotate(45deg) scale(1); }
}

SVG路径动画实现

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

.checkmark {
    width: 50px;
    height: 50px;
    stroke-width: 3;
    stroke: #fff;
    stroke-miterlimit: 10;
}

.checkmark__check {
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

@keyframes stroke {
    100% { stroke-dashoffset: 0; }
}

进阶优化技巧

弹性动画效果 在关键帧动画中使用cubic-bezier曲线增强弹性效果：

@keyframes checkmark {
    0% { transform: rotate(45deg) scale(0); }
    50% { transform: rotate(45deg) scale(1.2); }
    70% { transform: rotate(45deg) scale(0.9); }
    100% { transform: rotate(45deg) scale(1); }
}

多阶段动画 分阶段实现先画圈再打勾的效果：

.checkmark-circle {
    animation: circle 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark-check {
    animation: check 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.6s forwards;
}

浏览器兼容性提示

• 使用-webkit前缀确保旧版浏览器兼容
• SVG动画在IE11需要polyfill支持
• 考虑使用will-change属性优化性能：

  .checkmark {
    will-change: transform, opacity;
  }

这些方法可根据实际需求调整颜色、尺寸和动画时长，适用于表单提交、任务完成等场景的视觉反馈。