您现在的位置是：网站首页>前端技术>CSS3教程CSS3教程

CSS实现一个loading 载加中动画

神夜2020-08-22 14:41:40【CSS3教程】3103人已围观文章来源：神夜个人博客

简介CSS实现一个loading 载加中动画可用于提交资料时使用

效果：

代码如下：

		<style type="text/css">
	
		 *{ margin:0; padding:0px; font-size:12px; box-sizing: border-box;}
	
		 p{margin:0px; padding:0px;}
	
		 /***loading动画***/ 
	
		 .loading{ width:100px; padding:16px 0; text-align:center; color:#fff; position: fixed; left:0; right:0; margin: auto; top:50%; transform: translateY(-50%); z-index:2222; border-radius:5px; box-shadow:#eee 0 0 10px; background:rgba(0,0,0,0.8); }
	
		 .loading div{ position: relative; margin:0 auto; width:40px; height:40px; border-radius:50%; margin-bottom:10px;}
	
		 .loading span{width: 6px; height:6px; display: block; position: absolute;  border-radius: 50%; background:#fff; -webkit-animation: load 1.04s ease infinite;}
	
		 @-webkit-keyframes load{  0%{ opacity: 0; } 100%{opacity:1;}}
	
		 .loading span:nth-child(1){-webkit-animation-delay:0.13s; top:0; left:0; right:0; margin:auto;  }
	
		 .loading span:nth-child(2){-webkit-animation-delay:0.26s; right:5px; top:5px; }
	
		 .loading span:nth-child(3){-webkit-animation-delay:0.39s; right:0; top:50%; transform:translateY(-50%); }
	
		 .loading span:nth-child(4){-webkit-animation-delay:0.52s; right:5px; bottom:5px;}
	
		 .loading span:nth-child(5){-webkit-animation-delay:0.65s; bottom:0px; left:0px; right:0; margin:auto;}
	
		 .loading span:nth-child(6){-webkit-animation-delay:0.78s; bottom:5px; left:5px;}
	
		 .loading span:nth-child(7){-webkit-animation-delay:0.91s; left:0px; top:50%; transform: translateY(-50%);}
	
		 .loading span:nth-child(8){-webkit-animation-delay:1.04s; top:5px; left:5px;}
	
		</style>
	
		 <div class="loading">
	
		  <div>
	
		    <span></span>
	
		    <span></span>
	
		    <span></span>
	
		    <span></span>
	
		    <span></span>
	
		    <span></span>
	
		    <span></span>
	
		    <span></span>
	
		  </div>
	
		  <p>加载中...</p>
	
		</div>