纯css3加载loading发光变色动画特效代码-QQ沐编程

特效代码

纯css3加载loading发光变色动画特效代码是一款基于css3 keyframes属性实现的发光变色圆点串联旋转loading加载动画特效。

可以做网站跳转加载页面或者loading加载页面

源码由HTML+CSS+JS组成，记事本打开源码文件可以进行内容文字之类的修改，

双击html文件可以本地运行效果，也可以上传到服务器里面，

更多好看的特效代码可以搜索QQ沐编程，觉得有帮助的话可以CTRL+D收藏一下本站

效果截图

源代码

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>纯css3加载发光变色动画特效 - QQ沐编程</title>
	<style>
		* {
			margin: 0px;
			padding: 0px;
			box-sizing: border-box;
		}

		section {
			display: flex;
			justify-content: center;
			align-items: center;
			min-height: 100vh;
			background: #042104;
			animation: animateBg 10s linear infinite;
		}

		section .loader{
			position: relative;
			width: 120px;
			height: 120px;
		}

		section .loader span{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			transform: rotate(calc(18deg * var(--i)));
		}

		section .loader span::before{
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 15px;
			height: 15px;
			border-radius: 50%;
			background: #00ff0a;
			box-shadow: 0 0 10px #00ff0a,
						0 0 20px #00ff0a,
						0 0 40px #00ff0a,
						0 0 60px #00ff0a,
						0 0 70px #00ff0a,
						0 0 100px #00ff0a;
			animation: animate 2s linear infinite;
			animation-delay: calc(0.1s * var(--i));
		}

		@keyframes animateBg{
			0%{filter: hue-rotate(0deg)}
			100%{filter: hue-rotate(360deg)}
		}

		@keyframes animate{
			0%{transform: scale(1);}
			80%, 100%{transform: scale(0);}
		}
	</style>
</head>
<body>
	<section>
		<div class="loader">
			<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>
	</section>
</body>
</html>

本站资源来自互联网收集，仅供用于学习和交流，请勿用于商业用途。如有侵权、不妥之处，请联系站长并出示版权证明以便删除。敬请谅解！

THE END