旋转的指南针加载Loading动画

旋转的指南针
Categories:加载动画
by 网页特效库 |
on 6 12 月, 2024

一个旋转的指南针加载动画，使用SVG和CSS3动画来完成。

整体结构和功能如下：

  1. HTML结构:
  • 整个页面只有一个<svg>元素，用于绘制加载动画的所有图形。
  • <svg>内部包含多个<g>（group）元素，每个组代表不同的动画部分，如箭头、环形描边和刻度线。
  1. CSS样式:
  • 全局样式:
    • 设置了页面背景颜色为黑色，并使页面内容垂直和水平居中。
  • 动画公共属性:
    • 所有动画部分（箭头、环形描边和刻度线）都设置了相同的动画持续时间（2秒）、动画函数（线性）和迭代次数（无限循环）。
  • 箭头样式:
    • .pl__arrows类定义了箭头的基本样式和动画效果，包括初始旋转角度和旋转中心。
    • @keyframes arrows42定义了箭头从45度旋转到405度的动画。
  • 环形描边样式:
    • .pl__ring-rotate和.pl__ring-stroke类分别定义了环形描边的基本样式和动画效果，包括旋转中心和初始旋转角度。
    • @keyframes ringRotate42定义了环形描边从0度旋转到720度的动画。
    • @keyframes ringStroke42定义了环形描边从完整描边到部分描边再到完整描边的过程。
  • 刻度线样式:
    • .pl__tick类定义了刻度线的基本样式和动画效果，包括旋转中心和初始位置。
    • 每个刻度线通过nth-child选择器设置了不同的动画延迟时间，使得它们依次出现。
    • @keyframes tick42定义了刻度线从隐藏状态变为可见状态再回到隐藏状态的动画。
  1. SVG内容:
  • 渐变定义:
    • 定义了两个线性渐变grad和两个矩形遮罩mask1和mask2，用于创建带渐变效果的图形。
  • 箭头:
    • 使用两个<path>元素绘制箭头，并应用了渐变遮罩mask2，使其带有渐变效果。
  • 环形描边:
    • 使用一个<circle>元素绘制环形描边，并应用了渐变遮罩mask1，使其带有渐变效果。
  • 刻度线:
    • 使用八个<polyline>元素绘制刻度线，并应用了渐变遮罩mask1，使其带有渐变效果。

这个加载动画通过结合SVG图形和CSS动画，实现了复杂的视觉效果，适用于各种前端项目中。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>旋转的指南针加载Loading动画</title>
		<style>
			body {
				background: #000;
				height: 100vh;
				display: grid;
				place-content: center;
			}
			.pl {
				display: block;
				width: 9.375em;
				height: 9.375em;
			}

			.pl__arrows,
			.pl__ring-rotate,
			.pl__ring-stroke,
			.pl__tick {
				animation-duration: 2s; /* 动画持续时间为2秒 */
				animation-timing-function: linear; /* 动画速度均匀 */
				animation-iteration-count: infinite; /* 动画无限循环 */
			}

			.pl__arrows {
				animation-name: arrows42; /* 应用箭头动画 */
				transform: rotate(45deg); /* 初始旋转角度 */
				transform-origin: 16px 52px; /* 设置旋转中心 */
			}

			.pl__ring-rotate,
			.pl__ring-stroke {
				transform-origin: 80px 80px; /* 设置旋转中心 */
			}

			.pl__ring-rotate {
				animation-name: ringRotate42; /* 应用环形旋转动画 */
			}

			.pl__ring-stroke {
				animation-name: ringStroke42; /* 应用环形描边动画 */
				transform: rotate(-45deg); /* 初始旋转角度 */
			}

			.pl__tick {
				animation-name: tick42; /* 应用刻度线动画 */
			}

			.pl__tick:nth-child(2) {
				animation-delay: -1.75s; /* 设置延迟时间 */
			}

			.pl__tick:nth-child(3) {
				animation-delay: -1.5s; /* 设置延迟时间 */
			}

			.pl__tick:nth-child(4) {
				animation-delay: -1.25s; /* 设置延迟时间 */
			}

			.pl__tick:nth-child(5) {
				animation-delay: -1s; /* 设置延迟时间 */
			}

			.pl__tick:nth-child(6) {
				animation-delay: -0.75s; /* 设置延迟时间 */
			}

			.pl__tick:nth-child(7) {
				animation-delay: -0.5s; /* 设置延迟时间 */
			}

			.pl__tick:nth-child(8) {
				animation-delay: -0.25s; /* 设置延迟时间 */
			}

			/* Animations */
			@keyframes arrows42 {
				from {
					transform: rotate(45deg); /* 起始旋转角度 */
				}

				to {
					transform: rotate(405deg); /* 结束旋转角度 */
				}
			}

			@keyframes ringRotate42 {
				from {
					transform: rotate(0); /* 起始旋转角度 */
				}

				to {
					transform: rotate(720deg); /* 结束旋转角度 */
				}
			}

			@keyframes ringStroke42 {

				from,
				to {
					stroke-dashoffset: 452; /* 描边偏移量 */
					transform: rotate(-45deg); /* 初始旋转角度 */
				}

				50% {
					stroke-dashoffset: 169.5; /* 描边偏移量 */
					transform: rotate(-180deg); /* 中间旋转角度 */
				}
			}

			@keyframes tick42 {

				from,
				3%,
				47%,
				to {
					stroke-dashoffset: -12; /* 描边偏移量 */
				}

				14%,
				36% {
					stroke-dashoffset: 0; /* 描边偏移量 */
				}
			}
		</style>
	</head>
	<body>
		<svg class="pl" viewBox="0 0 160 160" width="160px" height="160px" xmlns="http://www.w3.org/2000/svg">
			<defs>
				<linearGradient id="grad" x1="0" y1="0" x2="0" y2="1">
					<stop offset="0%" stop-color="#000"></stop> <!-- 渐变开始颜色 -->
					<stop offset="100%" stop-color="#fff"></stop> <!-- 渐变结束颜色 -->
				</linearGradient>
				<mask id="mask1">
					<rect x="0" y="0" width="160" height="160" fill="url(#grad)"></rect> <!-- 渐变遮罩 -->
				</mask>
				<mask id="mask2">
					<rect x="28" y="28" width="104" height="104" fill="url(#grad)"></rect> <!-- 渐变遮罩 -->
				</mask>
			</defs>

			<g>
				<g class="pl__ring-rotate">
					<circle class="pl__ring-stroke" cx="80" cy="80" r="72" fill="none" stroke="hsl(223,90%,55%)"
						stroke-width="16" stroke-dasharray="452.39 452.39" stroke-dashoffset="452"
						stroke-linecap="round" transform="rotate(-45,80,80)"></circle> <!-- 环形描边 -->
				</g>
			</g>
			<g mask="url(#mask1)">
				<g class="pl__ring-rotate">
					<circle class="pl__ring-stroke" cx="80" cy="80" r="72" fill="none" stroke="hsl(193,90%,55%)"
						stroke-width="16" stroke-dasharray="452.39 452.39" stroke-dashoffset="452"
						stroke-linecap="round" transform="rotate(-45,80,80)"></circle> <!-- 带渐变的环形描边 -->
				</g>
			</g>

			<g>
				<g stroke-width="4" stroke-dasharray="12 12" stroke-dashoffset="12" stroke-linecap="round"
					transform="translate(80,80)">
					<polyline class="pl__tick" stroke="hsl(223,10%,90%)" points="0,2 0,14"
						transform="rotate(-135,0,0) translate(0,40)"></polyline> <!-- 刻度线 -->
					<polyline class="pl__tick" stroke="hsl(223,10%,90%)" points="0,2 0,14"
						transform="rotate(-90,0,0) translate(0,40)"></polyline> <!-- 刻度线 -->
					<polyline class="pl__tick" stroke="hsl(223,10%,90%)" points="0,2 0,14"
						transform="rotate(-45,0,0) translate(0,40)"></polyline> <!-- 刻度线 -->
					<polyline class="pl__tick" stroke="hsl(223,10%,90%)" points="0,2 0,14"
						transform="rotate(0,0,0) translate(0,40)"></polyline> <!-- 刻度线 -->
					<polyline class="pl__tick" stroke="hsl(223,10%,90%)" points="0,2 0,14"
						transform="rotate(45,0,0) translate(0,40)"></polyline> <!-- 刻度线 -->
					<polyline class="pl__tick" stroke="hsl(223,10%,90%)" points="0,2 0,14"
						transform="rotate(90,0,0) translate(0,40)"></polyline> <!-- 刻度线 -->
					<polyline class="pl__tick" stroke="hsl(223,10%,90%)" points="0,2 0,14"
						transform="rotate(135,0,0) translate(0,40)"></polyline> <!-- 刻度线 -->
					<polyline class="pl__tick" stroke="hsl(223,10%,90%)" points="0,2 0,14"
						transform="rotate(180,0,0) translate(0,40)"></polyline> <!-- 刻度线 -->
				</g>
			</g>
			<g mask="url(#mask1)">
				<g stroke-width="4" stroke-dasharray="12 12" stroke-dashoffset="12" stroke-linecap="round"
					transform="translate(80,80)">
					<polyline class="pl__tick" stroke="hsl(223,90%,80%)" points="0,2 0,14"
						transform="rotate(-135,0,0) translate(0,40)"></polyline> <!-- 带渐变的刻度线 -->
					<polyline class="pl__tick" stroke="hsl(223,90%,80%)" points="0,2 0,14"
						transform="rotate(-90,0,0) translate(0,40)"></polyline> <!-- 带渐变的刻度线 -->
					<polyline class="pl__tick" stroke="hsl(223,90%,80%)" points="0,2 0,14"
						transform="rotate(-45,0,0) translate(0,40)"></polyline> <!-- 带渐变的刻度线 -->
					<polyline class="pl__tick" stroke="hsl(223,90%,80%)" points="0,2 0,14"
						transform="rotate(0,0,0) translate(0,40)"></polyline> <!-- 带渐变的刻度线 -->
					<polyline class="pl__tick" stroke="hsl(223,90%,80%)" points="0,2 0,14"
						transform="rotate(45,0,0) translate(0,40)"></polyline> <!-- 带渐变的刻度线 -->
					<polyline class="pl__tick" stroke="hsl(223,90%,80%)" points="0,2 0,14"
						transform="rotate(90,0,0) translate(0,40)"></polyline> <!-- 带渐变的刻度线 -->
					<polyline class="pl__tick" stroke="hsl(223,90%,80%)" points="0,2 0,14"
						transform="rotate(135,0,0) translate(0,40)"></polyline> <!-- 带渐变的刻度线 -->
					<polyline class="pl__tick" stroke="hsl(223,90%,80%)" points="0,2 0,14"
						transform="rotate(180,0,0) translate(0,40)"></polyline> <!-- 带渐变的刻度线 -->
				</g>
			</g>

			<g>
				<g transform="translate(64,28)">
					<g class="pl__arrows" transform="rotate(45,16,52)">
						<path fill="hsl(3,90%,55%)"
							d="M17.998,1.506l13.892,43.594c.455,1.426-.56,2.899-1.998,2.899H2.108c-1.437,0-2.452-1.473-1.998-2.899L14.002,1.506c.64-2.008,3.356-2.008,3.996,0Z">
						</path> <!-- 箭头路径 -->
						<path fill="hsl(223,10%,90%)"
							d="M14.009,102.499L.109,58.889c-.453-1.421,.559-2.889,1.991-2.889H29.899c1.433,0,2.444,1.468,1.991,2.889l-13.899,43.61c-.638,2.001-3.345,2.001-3.983,0Z">
						</path> <!-- 箭头路径 -->
					</g>
				</g>
			</g>
			<g mask="url(#mask2)">
				<g transform="translate(64,28)">
					<g class="pl__arrows" transform="rotate(45,16,52)">
						<path fill="hsl(333,90%,55%)"
							d="M17.998,1.506l13.892,43.594c.455,1.426-.56,2.899-1.998,2.899H2.108c-1.437,0-2.452-1.473-1.998-2.899L14.002,1.506c.64-2.008,3.356-2.008,3.996,0Z">
						</path> <!-- 带渐变的箭头路径 -->
						<path fill="hsl(223,90%,80%)"
							d="M14.009,102.499L.109,58.889c-.453-1.421,.559-2.889,1.991-2.889H29.899c1.433,0,2.444,1.468,1.991,2.889l-13.899,43.61c-.638,2.001-3.345,2.001-3.983,0Z">
						</path> <!-- 带渐变的箭头路径 -->
					</g>
				</g>
			</g>
		</svg>
	</body>
</html>
No Tag

No responses yet

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注