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 效果展示：

以上关于CSS 实现彩虹条加载动画特效的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。