CSS梦幻光球loading

最新推荐文章于 2024-03-10 00:43:11 发布

QQ_286115751

最新推荐文章于 2024-03-10 00:43:11 发布

阅读量640

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_35515563/article/details/59482749

本文介绍了一种使用CSS实现的梦幻光球加载动画效果。通过不同圆形元素的旋转及阴影变化，创造出炫酷的3D视觉体验。动画涉及关键CSS属性包括-webkit-transform、-webkit-animation及box-shadow。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS梦幻光球loading

CSS梦幻光球loading是本人在昨天讲的css伪3d旋转的升级版，原理是通过多个圆形div通过不同的时间依旧进行旋转控制，并且box-shadow中的宽高阴影增加后的产物：

http://blog.youkuaiyun.com/qq_35515563/article/details/59113085

CSS源码：

body {
			-webkit-perspective: 5000;
		}
		.round {
			position: relative;
			width: 400px;
			height: 400px;
			margin: 50px auto;
		}
		.round div {
			position: absolute;
			width: 400px;
			height: 400px;
			margin: 0 auto;
			border-radius: 50%;
			-webkit-transform-style: preserve-3d;
			-moz-transform-style: preserve-3d;
			transform-style: preserve-3d;
			
		}
		.round div:nth-child(1) {
			box-shadow: inset 10px 50px 80px rgba(255, 0, 0, 0.5);
			-webkit-animation: change 3s linear infinite;
		}
		.round div:nth-child(2) {
			box-shadow: inset 10px 50px 80px rgba(0, 0, 255, 0.5);
			-webkit-animation: change 4s linear infinite;
		}
		.round div:nth-child(3) {
			box-shadow: inset 10px 50px 80px rgba(0, 255, 0, 0.5);
			-webkit-animation: change 5s linear infinite;
		}
		.round div:nth-child(4) {
			box-shadow: inset 10px 50px 80px rgba(0, 175, 0, 0.5);
			-webkit-animation: change 6s linear infinite;
		}
		.round div:nth-child(5) {
			box-shadow: inset 10px 50px 80px rgba(0, 0, 175, 0.5);
			-webkit-animation: change 7s linear infinite;
		}
		@-webkit-keyframes 'change' {
			from {-webkit-transform: rotate(0deg);}
			to {-webkit-transform: rotate(360deg);}
		}
		.round span:nth-child(6) {
			display: block;
			line-height: 400px;
			font-size: 42px;
			font-weight: bold;
			text-align: center;
			-webkit-animation: change2 5s linear infinite;
		}
		@-webkit-keyframes 'change2' {
			0 {color: rgba(0, 0, 0, 1);}
			10% {color: rgba(0, 0, 255, 0.5);}
			20% {color: rgba(0, 255, 255, 1);}
			30% {color: rgba(175, 255, 0, 0.5);}
			40% {color: rgba(255, 175, 255, 1);}
			50% {color: rgba(255, 0, 255, 0.5);}
			60% {color: rgba(175, 0, 175, 1);}
			70% {color: rgba(0, 175, 255, 0.5);}
			80% {color: rgba(255, 175, 175, 1);}
			90% {color: rgba(175, 175, 255, 0.5);}
			100% {color: rgba(0, 0, 0, 1);}
		}

html源码：

<body>
   	<div class='round'>
   		<div></div>
   		<div></div>
   		<div></div>
   		<div></div>
   		<div></div>
   		<span>loading...</span>
   	</div>
</body>