使用css动画实现loding效果

最新推荐文章于 2024-09-17 10:24:19 发布

不及0908

最新推荐文章于 2024-09-17 10:24:19 发布

阅读量127

点赞数 1

文章标签： css html animation

本文链接：https://blog.csdn.net/huhuhuja/article/details/109022577

版权

代码如下：

<!doctype html>
<html>
  <head>
	<meta charset="ulf-8">
	<title>CSS动画实现loading效果</title>
	<style type="text/css">
	  *{margin:0;
	    padding:0;}
	  .circlebox{
	    width:40px;
	    height:40px;
	   /*border:1px solid red;*/
            margin:100px; 
	    position:absolute;}
	  .circlebox p{
	    width:12px;
	    height:12px;
	    background:#abc124;
	    border-radius:50%;
	    position:absolute;
	    animation:move 1.5s infinite linear;
	    }
	  .circlebox p:nth-of-type(1){left:0;top:0;}
 	  .circlebox p:nth-of-type(2){right:0;top:0;}
	  .circlebox p:nth-of-type(3){right:0;bottom:0;}
	  .circlebox p:nth-of-type(4){left:0;bottom:0;}
	  .circlebox:nth-of-type(2){transform:rotate(45deg);}
	  @keyframes move{
	  0%{transform:scale(0);}
	  50%{transform:scale(1);}
	  100%{transform:scale(0);}
	  }
	  .circlebox:nth-of-type(1) p:nth-of-type(1){animation-delay:-0.1s;}
 	  .circlebox:nth-of-type(2) p:nth-of-type(1){animation-delay:-0.3s;}
 	  .circlebox:nth-of-type(1) p:nth-of-type(2){animation-delay:-0.5s;}
	  .circlebox:nth-of-type(2) p:nth-of-type(2){animation-delay:-0.7s;}
 	  .circlebox:nth-of-type(1) p:nth-of-type(3){animation-delay:-0.9s;}
	  .circlebox:nth-of-type(2) p:nth-of-type(3){animation-delay:-1.1s;}
	  .circlebox:nth-of-type(1) p:nth-of-type(4){animation-delay:-1.3s;}
 	  .circlebox:nth-of-type(2) p:nth-of-type(4){animation-delay:-1.4s;}
        </style>	
  </head>

	<body>
	  <div class="circlebox">
		<p></p>
		<p></p>
		<p></p>
		<p></p>
	  </div>
	  <div class="circlebox">
		<p></p>
		<p></p>
		<p></p>
		<p></p>
	  </div>
	</body>
</html>