加载动画01

最新推荐文章于 2024-07-25 09:24:40 发布

weixin_52707625

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量42

点赞数

分类专栏：加载动画文章标签：前端动画 css3

本文链接：https://blog.csdn.net/weixin_52707625/article/details/127648026

版权

加载动画专栏收录该内容

1 篇文章 0 订阅

订阅专栏

加载动画1

效果图
实现代码

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>加载动画01</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		body{
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100vh;
			background-color: black;
		}
		.box{
			position: relative;
			width: 80px;
			height: 80px;
			animation: f1 2s infinite linear;
		}
		.box::before{
			content: "加载中";
			position: absolute;
			top: 50%;
			transform: translate(0%, -50%);
			width: 100%;
			text-align: center;
			background-color: orange;
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			font-size: 14px;
		}
		.box span{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			transform: rotate(calc(18deg * var(--i)));
		}
		.box span::before{
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 8px;
			height: 8px;
			background-color: green;
			border-radius: 50%;
			box-shadow: 0 0 5px green,
						0 0 10px green,
						0 0 30px green,
						0 0 50px green,
						0 0 80px green;
			animation: f2 1s infinite linear;
			animation-delay: calc(0.1s * var(--i));
		}
		@keyframes f1{
			0%{
				filter: hue-rotate(0deg);
			}
			100%{
				filter: hue-rotate(360deg);
			}
		}
		@keyframes f2{
			0%{
				transform: scale(1);
			}
			80%, 100%{
				transform: scale(0);
			}
		}
	</style>
</head>
<body>
	<div class="box">
		<span style="--i:1;"></span>
		<span style="--i:2;"></span>
		<span style="--i:3;"></span>
		<span style="--i:4;"></span>
		<span style="--i:5;"></span>
		<span style="--i:6;"></span>
		<span style="--i:7;"></span>
		<span style="--i:8;"></span>
		<span style="--i:9;"></span>
		<span style="--i:10;"></span>
		<span style="--i:11;"></span>
		<span style="--i:12;"></span>
		<span style="--i:13;"></span>
		<span style="--i:14;"></span>
		<span style="--i:15;"></span>
		<span style="--i:16;"></span>
		<span style="--i:17;"></span>
		<span style="--i:18;"></span>
		<span style="--i:19;"></span>
		<span style="--i:20;"></span>
	</div>
</body>
</html>