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 实现彩虹条加载动画特效

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » CSS 实现彩虹条加载动画特效

发表评论

提供最优质的资源集合

立即查看 了解详情