Html
    Css
    Js

    
                        
body,html {
	display:flex;
	justify-content:center;
	align-items:center;
	width:100%;
	height:100dvh;
	background-color:#f9f9f9;
}
.container {
	width:90%;
	max-width:256px;
	aspect-ratio:1 / 1;
}
@keyframes check-svg-path-anim {
	0% {
	stroke-dasharray:0 400;
	stroke-width:50;
}
to {
	stroke-dasharray:400 0;
	stroke-width:20;
}
}@keyframes check-svg-circle-anim {
	0% {
	stroke-dasharray:0 2023;
	stroke-width:50;
}
to {
	stroke-dasharray:2023 0;
	stroke-width:20;
}
}.check-svg-commonds {
	fill:none;
	stroke:#198754;
	stroke-linecap:round;
	stroke-linejoin:round;
	stroke-width:20;
	transform-origin:50% 50%;
}
.check-svg-circle {
	stroke-dasharray:2023;
	stroke-dashoffset:2023;
	transform:rotate(-90deg);
	animation:1s ease-in-out 0.5s 1 normal forwards running check-svg-circle-anim;
}
.check-svg-path {
	stroke-dasharray:400;
	stroke-dashoffset:400;
	animation:0.5s ease-in-out 1s 1 normal forwards running check-svg-path-anim;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

检查完成SVG动画

更新时间:2024-08-01 09:11:16

0