CSS3 動(dòng)畫(huà)打鉤

.tick {
height: 50px;
width: 50px;
border: #008000 solid 2px;
position: relative;
}
.tick::before, .tick::after {
content: "";
position: absolute;
background-color: #008000;
}
.tick::before {
height: 12px;
width: 2px;
top: 23px;
left: 18px;
transform: rotate(-45deg);
}
.tick::after {
height: 22px;
width: 2px;
top: 15px;
left: 11px;
transform: rotate(45deg);
animation: fillTick 0.7s ease forwards;
animation-delay: 1s;
}
@keyframes fillTick {
0% {
height: 0;
width: 0;
top: 30px;
left: 28px;
}
100% {
height: 22px;
width: 2px;
top: 15px;
left: 11px;
}
}

以上是打鉤效果的 CSS3 代碼，它實(shí)現(xiàn)了一個(gè) `.tick` 元素，使用了::before和::after偽元素來(lái)實(shí)現(xiàn)打鉤的兩個(gè)線條，同時(shí)使用了@keyframes動(dòng)畫(huà)和animation-delay屬性來(lái)給打鉤效果增加了延遲時(shí)間和填充效果。

你可以在任何地方使用這份 CSS3 代碼來(lái)實(shí)現(xiàn)打鉤效果，只需要在 HTML 文件中創(chuàng)建一個(gè)<div>元素并設(shè)置其中的類名為 “tick”，然后在 CSS 文件中添加這份代碼即可。