CSS 实现彩虹条加载动画特效

利用 css 的 delay 延迟以及旋转动画效果实现彩虹条加载动画，纯 css 没有一行 js 代码，喜欢的搞起来。

HTML 结构：

<div class="box">
    <div class="wrap">
        <div class="yuan1"></div>
    </div>
    <div class="wrap">
        <div class="yuan2"></div>
    </div>
    <div class="wrap">
        <div class="yuan3"></div>
    </div>
    <div class="wrap">
        <div class="yuan3"></div>
    </div>
    <div class="wrap">
        <div class="yuan3"></div>
    </div>
</div>

CSS 结构

body {
	background-color:#000;
}
.box {
	position:relative;
	width:100px;
	height:50px;
	overflow:hidden;
	margin:0 auto;
}
.box .wrap {
	overflow:hidden;
	position:absolute;
	margin:0 auto;
	left:0;
	right:0;
	transform-origin:50% bottom;
	-webkit-transform-origin:50% bottom;
}
.box .wrap div {
	border-radius:50%;
	box-sizing:border-box;
	margin:0 auto;
}
.box .wrap:first-child div {
	width:100px;
	height:100px;
	border:5px solid red;
	animation:loading 1.5s infinite ease-in;
}
.box .wrap:nth-child(2) div {
	width:80px;
	height:80px;
	border:5px solid yellow;
	animation:loading 1.5s 100ms infinite ease-in;
}
.box .wrap:nth-child(3) div {
	width:60px;
	height:60px;
	border:5px solid green;
	animation:loading 1.5s 200ms infinite ease-in;
}
.box .wrap:nth-child(4) div {
	width:40px;
	height:40px;
	border:5px solid blue;
	animation:loading 1.5s 200ms infinite ease-in;
}
.box .wrap:nth-child(5) div {
	width:20px;
	height:20px;
	border:5px solid brown;
	animation:loading 1.5s 200ms infinite ease-in;
}
.box .wrap:nth-child(1) {
	width:100px;
	height:50px;
	top:0;
	animation:loading 1.5s infinite ease-in;
}
.box .wrap:nth-child(2) {
	top:10px;
	width:80px;
	height:40px;
	/* overflow:hidden;
	*/
        animation:loading 1.5s 100ms infinite ease-in;
}
.box .wrap:nth-child(3) {
	top:20px;
	width:60px;
	height:30px;
	/* overflow:hidden;
	*/
        animation:loading 1.5s 200ms infinite ease-in;
}
.box .wrap:nth-child(4) {
	top:30px;
	width:40px;
	height:20px;
	/* overflow:hidden;
	*/
        animation:loading 1.5s 300ms infinite ease-in;
}
.box .wrap:nth-child(5) {
	top:40px;
	width:20px;
	height:10px;
	/* overflow:hidden;
	*/
        animation:loading 1.5s 400ms infinite ease-in;
}
@keyframes loading {
	0% {
	transform:rotate(0);
}
100% {
	transform:rotate(360deg);
}
}

最终 GIF 效果展示：