用css3写的loading效果一个

最新推荐文章于 2024-01-17 14:32:29 发布

dream0129

最新推荐文章于 2024-01-17 14:32:29 发布

阅读量353

点赞数

分类专栏： css3 文章标签： loading

本文链接：https://blog.csdn.net/dream0129/article/details/73087412

版权

css3 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

html内容如下：

<div id="loading" style="display: block;">
	<div id="loading-center">
		<div id="loading-center-absolute">
			<div class="object" id="object_one"></div>
			<div class="object" id="object_two"></div>
			<div class="object" id="object_three"></div>
		</div>
	 </div>
</div>

css3：

#loading{background:rgba(0,0,0,.4);height:100%;width:100%;position:fixed;z-index:999;left:0;top:0;/* display:none */}
#loading-center{width:100%;height:100%;position:relative}
#loading-center-absolute{position:absolute;left:50%;top:50%;height:100px;width:100px;margin-top:-50px;margin-left:-40px}
.object{width:16px;height:16px;background-color:#FFF;float:left;margin-right:16px;margin-top:65px;-moz-border-radius:50% 50% 50% 50%;-webkit-border-radius:50% 50% 50% 50%;border-radius:50% 50% 50% 50%}
#object_one{-webkit-animation:object_one 1.5s infinite;animation:object_one 1.5s infinite}
#object_two{-webkit-animation:object_two 1.5s infinite;animation:object_two 1.5s infinite;-webkit-animation-delay:.25s;animation-delay:.25s}
#object_three{-webkit-animation:object_three 1.5s infinite;animation:object_three 1.5s infinite;-webkit-animation-delay:.5s;animation-delay:.5s}
@-webkit-keyframes object_one{75%{-webkit-transform:scale(0)}
}
@keyframes object_one{75%{transform:scale(0);-webkit-transform:scale(0)}
}
@-webkit-keyframes object_two{75%{-webkit-transform:scale(0)}
}
@keyframes object_two{75%{transform:scale(0);-webkit-transform:scale(0)}
}
@-webkit-keyframes object_three{75%{-webkit-transform:scale(0)}
}
@keyframes object_three{75%{transform:scale(0);-webkit-transform:scale(0)}
}