CSS 四个不同大小和颜色的圆环加载动画

原创于 2024-02-19 22:07:55 发布 · 228 阅读
0 ·
CC 4.0 BY-SA版权
文章标签：
#nginx #运维 #css #前端 #css3 #动画
CSS动画专栏收录该内容
74 篇文章
订阅专栏
<template>
	<!-- 定义一个视图容器，用于装载SVG加载动画 -->
	<view class="loader">
		<!-- SVG图形元素，定义一个240x240的可视区域 -->
		<svg class="pl" width="240" height="240" viewBox="0 0 240 240">
			<!-- 圆环A，作为动画的一部分 -->
			<circle class="pl__ring pl__ring--a" cx="120" cy="120" r="105" fill="none" stroke="#000" stroke-width="20"
				stroke-dasharray="0 660" stroke-dashoffset="-330" stroke-linecap="round"></circle>

			<!-- 圆环B，具有不同的颜色和独立的动画效果 -->
			<circle class="pl__ring pl__ring--b" cx="120" cy="120" r="35" fill="none" stroke="#000" stroke-width="20"
				stroke-dasharray="0 220" stroke-dashoffset="-110" stroke-linecap="round"></circle>

			<!-- 圆环C，同样有独特的颜色和动画 -->
			<circle class="pl__ring pl__ring--c" cx="85" cy="120" r="70" fill="none" stroke="#000" stroke-width="20"
				stroke-dasharray="0 440" stroke-linecap="round"></circle>

			<!-- 圆环D，与圆环C相似但位置不同 -->
			<circle class="pl__ring pl__ring--d" cx="155" cy="120" r="70" fill="none" stroke="#000" stroke-width="20"
				stroke-dasharray="0 440" stroke-linecap="round"></circle>
		</svg>
	</view>
</template>

<script>
	// (此处暂无脚本内容)
</script>

<style>
	/* 设置整个页面背景为深灰色 */
	body {
		background-color: #212121;
	}

	/* 设置加载动画容器样式，使其在页面上垂直居中并对齐水平中心 */
	.loader {
		margin-top: 350px;
		/* 垂直居中偏移量 */
		margin-left: 40%;
		/* 水平居中偏移量 */
	}

	/* 缩小SVG元素尺寸以便适应布局 */
	.pl {
		width: 6em;
		height: 6em;
	}

	/* 定义所有圆环的基本动画类名 */
	.pl__ring {
		animation: ringA 2s linear infinite;
		/* 初始设置为使用ringA动画 */
	}

	/* 为圆环A定义特定的颜色和动画 */
	.pl__ring--a {
		stroke: #f42f25;
		/* 设置圆环A的颜色 */
	}

	/* 为圆环B定义颜色及自定义动画keyframes */
	.pl__ring--b {
		animation-name: ringB;
		/* 使用名为ringB的动画 */
		stroke: #f49725;
		/* 设置圆环B的颜色 */
	}

	/* 为圆环C定义颜色及自定义动画keyframes */
	.pl__ring--c {
		animation-name: ringC;
		/* 使用名为ringC的动画 */
		stroke: #255ff4;
		/* 设置圆环C的颜色 */
	}

	/* 为圆环D定义颜色及自定义动画keyframes */
	.pl__ring--d {
		animation-name: ringD;
		/* 使用名为ringD的动画 */
		stroke: #f42582;
		/* 设置圆环D的颜色 */
	}

	/* 定义ringA动画的关键帧 */
	@keyframes ringA {

		from,
		4% {
			stroke-dasharray: 0 660;
			stroke-width: 20;
			stroke-dashoffset: -330;
		}

		12% {
			stroke-dasharray: 60 600;
			stroke-width: 30;
			stroke-dashoffset: -335;
		}

		32% {
			stroke-dasharray: 60 600;
			stroke-width: 30;
			stroke-dashoffset: -595;
		}

		40%,
		54% {
			stroke-dasharray: 0 660;
			stroke-width: 20;
			stroke-dashoffset: -660;
		}

		62% {
			stroke-dasharray: 60 600;
			stroke-width: 30;
			stroke-dashoffset: -665;
		}

		82% {
			stroke-dasharray: 60 600;
			stroke-width: 30;
			stroke-dashoffset: -925;
		}

		90%,
		to {
			stroke-dasharray: 0 660;
			stroke-width: 20;
			stroke-dashoffset: -990;
		}
	}

	/* 类似地，为ringB、ringC和ringD分别定义关键帧动画 */
	@keyframes ringB {

		from,
		12% {
			stroke-dasharray: 0 220;
			stroke-width: 20;
			stroke-dashoffset: -110;
		}

		20% {
			stroke-dasharray: 20 200;
			stroke-width: 30;
			stroke-dashoffset: -115;
		}

		40% {
			stroke-dasharray: 20 200;
			stroke-width: 30;
			stroke-dashoffset: -195;
		}

		48%,
		62% {
			stroke-dasharray: 0 220;
			stroke-width: 20;
			stroke-dashoffset: -220;
		}

		70% {
			stroke-dasharray: 20 200;
			stroke-width: 30;
			stroke-dashoffset: -225;
		}

		90% {
			stroke-dasharray: 20 200;
			stroke-width: 30;
			stroke-dashoffset: -305;
		}

		98%,
		to {
			stroke-dasharray: 0 220;
			stroke-width: 20;
			stroke-dashoffset: -330;
		}
	}

	@keyframes ringC {
		from {
			stroke-dasharray: 0 440;
			stroke-width: 20;
			stroke-dashoffset: 0;
		}

		8% {
			stroke-dasharray: 40 400;
			stroke-width: 30;
			stroke-dashoffset: -5;
		}

		28% {
			stroke-dasharray: 40 400;
			stroke-width: 30;
			stroke-dashoffset: -175;
		}

		36%,
		58% {
			stroke-dasharray: 0 440;
			stroke-width: 20;
			stroke-dashoffset: -220;
		}

		66% {
			stroke-dasharray: 40 400;
			stroke-width: 30;
			stroke-dashoffset: -225;
		}

		86% {
			stroke-dasharray: 40 400;
			stroke-width: 30;
			stroke-dashoffset: -395;
		}

		94%,
		to {
			stroke-dasharray: 0 440;
			stroke-width: 20;
			stroke-dashoffset: -440;
		}
	}

	@keyframes ringD {

		from,
		8% {
			stroke-dasharray: 0 440;
			stroke-width: 20;
			stroke-dashoffset: 0;
		}

		16% {
			stroke-dasharray: 40 400;
			stroke-width: 30;
			stroke-dashoffset: -5;
		}

		36% {
			stroke-dasharray: 40 400;
			stroke-width: 30;
			stroke-dashoffset: -175;
		}

		44%,
		50% {
			stroke-dasharray: 0 440;
			stroke-width: 20;
			stroke-dashoffset: -220;
		}

		58% {
			stroke-dasharray: 40 400;
			stroke-width: 30;
			stroke-dashoffset: -225;
		}

		78% {
			stroke-dasharray: 40 400;
			stroke-width: 30;
			stroke-dashoffset: -395;
		}

		86%,
		to {
			stroke-dasharray: 0 440;
			stroke-width: 20;
			stroke-dashoffset: -440;
		}
	}
</style>