当前位置：首页 > CSS

css打勾动画制作

2026-02-13 10:16:47CSS

CSS打勾动画制作方法

使用伪元素和关键帧动画

通过伪元素创建勾的形状，结合transform和opacity属性实现动画效果：

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

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

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

SVG路径动画

利用SVG的stroke-dasharray和stroke-dashoffset属性实现描边动画：

<svg class="checkmark" viewBox="0 0 52 52">
    <path class="checkmark-path" fill="none" d="M14 27l8 8 16-16"/>
</svg>

.checkmark-path {
    stroke: #4CAF50;
    stroke-width: 3;
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
    animation: draw 0.5s ease-out forwards;
}

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

纯CSS变形动画

通过改变边框宽度模拟勾的绘制过程：

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

.checkmark::before, .checkmark::after {
    content: "";
    position: absolute;
    background: #4CAF50;
    animation: grow 0.8s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark::before {
    width: 3px;
    height: 0;
    left: 17px;
    top: 0;
    transform-origin: bottom;
}

.checkmark::after {
    width: 0;
    height: 3px;
    left: 13px;
    top: 27px;
    transform-origin: left;
}

@keyframes grow {
    0% { height: 0; width: 0; }
    50% { height: 30px; width: 0; }
    100% { height: 30px; width: 25px; }
}

注意事项