当前位置：首页 > CSS

css打勾动画制作

2026-04-01 19:12:13CSS

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; }
}

方法四：缩放动画

结合缩放和旋转效果：

css打勾动画制作

.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); }
}