纯CSS实现彩虹loading动画

在Pinterest上看到一张loading图,如下,忽然想把它用css写出来,于是就写了。。。

可能实现效果不一定完全一模一样,权当是娱乐了。

 

原图:

 

 

实现后效果(完整见页尾):

 

 

代码实现:

 

1.html部分

 

	<div class="ccle">
		<b><span><i></i></span></b>
		<b><span><i></i></span></b>
		<b><span><i></i></span></b>
		<b><span><i></i></span></b>
		<b><span><i></i></span></b>
		<b><span><i></i></span></b>
		<b><span><i></i></span></b>
		<b><span><i></i></span></b>
	</div>

 

2.CSS部分:

 

		*{ padding: 0; margin: 0 }
		html,body{ width: 100%; height: 100%; overflow: hidden; background: #333; }
		.ccle{ width:260px; height: 260px; position: absolute; z-index: 10; left: 0; right: 0; top: 0; bottom: 0; margin: auto; }
		b{  overflow: hidden; display: block; position: absolute;left: 0; right: 0; top:0; bottom: 0; margin: auto; }
		b span{ display: block; width: 100%; height: 50%; float: left; overflow: hidden; }
		b i{border-radius: 50%; display: block; width: calc(100% - 16px); height: calc(200% - 16px); float: left; border-width: 8px; border-style: solid;  }
		b:nth-child(1){ width: 100%; height: 100%;  animation: ccle8 2.5s ease-in-out infinite;}
		b:nth-child(1) i{ border-color: #629;}
		b:nth-child(2){ width: calc(100% - 30px); height: calc(100% - 30px);   animation: ccle7 2.5s ease-in-out infinite;}
		b:nth-child(2) i{ border-color: #c28;}
		b:nth-child(3){ width: calc(100% - 60px); height: calc(100% - 60px);   animation: ccle6 2.5s ease-in-out infinite; }
		b:nth-child(3) i{ border-color: #e25;}
		b:nth-child(4){ width: calc(100% - 90px); height: calc(100% - 90px);   animation: ccle5 2.5s ease-in-out infinite;}
		b:nth-child(4) i{ border-color: #f53;}
		b:nth-child(5){ width: calc(100% - 120px); height: calc(100% - 120px);   animation: ccle4 2.5s ease-in-out infinite;}
		b:nth-child(5) i{ border-color: #fb2;}
		b:nth-child(6){ width: calc(100% - 150px); height: calc(100% - 150px);   animation: ccle3 2.5s ease-in-out infinite;}
		b:nth-child(6) i{ border-color: #8c4;}
		b:nth-child(7){ width: calc(100% - 180px); height: calc(100% - 180px);   animation: ccle2 2.5s ease-in-out infinite;}
		b:nth-child(7) i{ border-color: #0a9;}
		b:nth-child(8){ width: calc(100% - 210px); height: calc(100% - 210px);   animation: ccle1 2.5s ease-in-out infinite; }
		b:nth-child(8) i{ border-color: #17b;}
		@keyframes ccle1{
			0% { transform: rotate(0deg); }				
			100% {transform: rotate(360deg);}
		}
		@keyframes ccle2{
			0% { transform: rotate(0deg); }				
			100% {transform: rotate(720deg);}
		}
		@keyframes ccle3{
			0% { transform: rotate(0deg); }				
			100% {transform: rotate(1080deg);}
		}
		@keyframes ccle4{
			0% { transform: rotate(0deg); }				
			100% {transform: rotate(1440deg);}
		}
		@keyframes ccle5{
			0% { transform: rotate(0deg); }				
			100% {transform: rotate(1800deg);}
		}
		@keyframes ccle6{
			0% { transform: rotate(0deg); }				
			100% {transform: rotate(2160deg);}
		}
		@keyframes ccle7{
			0% { transform: rotate(0deg); }				
			100% {transform: rotate(2520deg);}
		}
		@keyframes ccle8{
			0% { transform: rotate(0deg); }				
			100% {transform: rotate(2880deg);}
		}

 

 

完整demo:

 

>>点击查看<<

D.Young

85后 / 代码散修 / 平面设计 / 一个老父亲 / 直男 / 被认为胖

相关推荐

发表回复

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

微信扫一扫,分享到朋友圈

纯CSS实现彩虹loading动画
返回顶部

显示

忘记密码?

显示

显示

获取验证码

Close