动画是从b站看up主视频学的 非原创
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>打勾动画</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
flex-direction: column;
}
h2 {
font-family: Helvetica;
margin-top: 40px;
font-size: 36px;
color: #333;
opacity: 0;
}
.circle {
stroke-dasharray: 1194;
stroke-dashoffset: 1194;
}
.tick {
stroke-dasharray: 350;
stroke-dashoffset: 350;
}
input[type="checkbox"]:checked+svg .circle {
animation: circle 1s ease-in-out forwards;
}
input[type="checkbox"]:checked+svg .tick {
animation: tick 0.8s 0.95s ease-in-out forwards;
}
input[type="checkbox"]:checked~h2 {
animation: title 0.6s 1.2s ease-in-out forwards;
}
@keyframes circle {
from {
stroke-dashoffset: 1194;
}
to {
stroke-dashoffset: 2388;
}
}
@keyframes tick {
from {
stroke-dashoffset: 350;
}
to {
stroke-dashoffset: 0;
}
}
@keyframes title {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
</style>
</head>
<body>
<input type="checkbox">
<svg width="400" height="400">
<circle class="circle" fill="none" transform="rotate(-90 200 200)" stroke="#68E534" stroke-width="20" cx="200"
cy="200" r="190" stroke-linecap="round" />
<polyline class="tick" fill="none" stroke="#68E534" stroke-width="24" points="88,214 173,284 304,138"
stroke-linecap="round" stroke-linejoin="round"></polyline>
</svg>
<h2>Paymnet Success</h2>
</body>
</html>