css打勾动画制作

CSS打勾动画制作方法

使用CSS制作打勾动画可以通过伪元素、关键帧动画和变形属性实现。以下是几种常见方法：

方法一：利用border和transform属性

通过旋转和调整边框实现打勾效果：

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

.checkmark::after {
    content: "";
    position: absolute;
    left: 15px;
    top: 5px;
    width: 15px;
    height: 25px;
    border: solid green;
    border-width: 0 5px 5px 0;
    transform: rotate(45deg);
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

方法二：SVG路径动画

结合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: green;
    stroke-width: 6;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: draw 0.5s ease-out forwards;
}

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

方法三：纯CSS关键帧动画

通过逐步显示边框实现动画效果：

.checkmark {
    width: 20px;
    height: 40px;
    border-right: 5px solid green;
    border-bottom: 5px solid green;
    transform: rotate(45deg);
    opacity: 0;
    animation: checkmark 0.5s 0.2s ease-out forwards;
}

@keyframes checkmark {
    0% { height: 0; width: 0; opacity: 0; }
    50% { height: 0; width: 20px; opacity: 1; }
    100% { height: 40px; width: 20px; opacity: 1; }
}

方法四：缩放动画

结合缩放和旋转效果：

.checkmark {
    width: 20px;
    height: 40px;
    border-right: 3px solid green;
    border-bottom: 3px solid green;
    transform: rotate(45deg) scale(0);
    transform-origin: bottom left;
    animation: scaleUp 0.3s ease-out forwards;
}

@keyframes scaleUp {
    to { transform: rotate(45deg) scale(1); }
}

实现要点

• 使用伪元素::after或::before创建打勾图形
• 通过border属性绘制斜线形成打勾形状
• 应用transform: rotate()调整角度
• 使用@keyframes控制动画过程
• 调整stroke-dasharray和stroke-dashoffset实现SVG路径动画
• 合理设置animation-timing-function控制动画节奏

自定义选项

• 修改颜色：调整border-color或stroke属性值
• 改变大小：调整元素宽高和边框宽度
• 调整速度：修改animation-duration值
• 添加延迟：设置animation-delay属性
• 改变动画类型：替换ease-in-out等时间函数

这些方法均可根据实际需求组合使用或单独实现，适用于表单验证、任务完成提示等场景。