使用css动画实现loding效果

小咪咪 2022-12-13 14:06 177阅读 0赞

代码如下：

<!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>