css+svg实现骑缝号loading加载动画效果代码-html代码-BFW代码库

css+svg实现骑缝号loading加载动画效果代码

代码语言：html

代码描述：css+svg实现骑缝号loading加载动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">



    <style>
        * {
        	border: 0;
        	box-sizing: border-box;
        	margin: 0;
        	padding: 0;
        }
        :root {
        	--hue: 223;
        	--bg: hsl(var(--hue),90%,55%);
        	--fg: hsl(var(--hue),10%,90%);
        	font-size: calc(16px + (24 - 16) * (100vw - 320px) / (1280 - 320));
        }
        body {
        	background: var(--bg);
        	color: var(--fg);
        	font: 1em/1.5 sans-serif;
        	height: 100vh;
        	display: grid;
        	place-items: center;
        }
        .tally {
        	width: 10em;
        	height: 10em;
        }
        .tally__line,
        .tally__path {
        	stroke: currentColor;
        }
    </style>



</head>

<body>
    <svg class="tally" width="80" height="80" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg">
	<path class="tally__path" d="M 10 10 C 10 15, 10 35, 10 70" stroke="#000" stroke-width="8" fill="none" stroke-linecap="round" stroke-dasharray="60 60" stroke-dashoffset="60">
		<animate
			attributeName="d"
			values="
				M 10 10 C 10 15, 10 35, 10 70;
				M 10 10 C 10 15, 10 35, 10 70;
				M 10 10 C 15 15, 15 35, 10 70;
				M 10 10 C 15 15, 15 35, 10 70;
				M 10 10 C  7 15,  7 35, 10 70;
				M 10 10 C 12 15, 12 35, 10 70;
				M 10 10 C 10 15, 10 35, 10 70;
				M 10 10 C 10 15, 10 35, 10 70
				"
			keyTimes="0;0.25;0.28;0.51;0.53;0.55;0.57;1"
			keySplines="0 0 0.5 1"
			dur="4s"
			repeatCount="indefinite"
		/>
		<animate
			attributeName="stroke-dashoffset"
			values="60;0;0;-60;-60"
			keyTimes="0;0.075;0.75;0.825;1"
			keySplines="0 0 0.5 1"
			dur="4s"
			repeatCount="indefinite"
		/>
	</path>
	<path class="tally__path" d="M 30 10 C 30 25, 30 45, 30 70" stroke="#000" stroke-width="8" fill="none" stroke-linecap="round" stroke-dasharray="60 60" stroke-dashoffset="60">
		<animate
			attributeName="d"
			values="
				M 30 10 C 30 25, 30 45, 30 70;
				M 30 10 C 30 25, 30 45, 30 70;
				M 30 10 C 35 25, 35 45, 30 70;
				M 30 10 C 35 25, 35 45, 30 70;
				M 30 10 C 27 25, 27 45, 30 70;
				M 30 10 C 32 25, 32 45, 30 70;
				M 30 10 C 30 25, 30 45, 30 70;
				M 30 10 C 30 25, 30 45, 30 70
				"
			keyTimes="0;0.25;0.28;0.51;0.53;0.55;0.57;1"
			keySplines="0 0 0.5 1"
			dur="4s"
			begin="0.1s"
			repeatCount="indefinite"
		/>
		<animate
			attributeName="stroke-dashof.........完整代码请登录后点击上方下载按钮下载查看