HTML:
1 <!DOCTYPE html> 2 <head> 3 <meta charset="utf-8"/> 4 <title>demo04</title> 5 <link type="text/css" href="E:\htmltest1\demo1\demo04.css" rel="stylesheet"> 6 </head> 7 <body> 8 <div class="loading"> 9 <ul class="loading1"> 10 <li></li> 11 <li></li> 12 <li></li> 13 <li></li> 14 </ul> 15 <ul class="loading2"> 16 <li></li> 17 <li></li> 18 <li></li> 19 <li></li> 20 </ul> 21 </div> 22 </body>
CSS:
1 *{margin:0;padding:0;} 2 3 .loading{ 4 width:200px; 5 height:200px; 6 margin:100px auto; 7 } 8 .loading ul { 9 width:100px; 10 height:100px; 11 list-style:none; 12 position:absolute; 13 } 14 .loading li{ 15 width:20px; 16 height:20px; 17 background-color:#c6c6c6; 18 border-radius:50%; 19 position:absolute; 20 animation:move 1.5s infinite linear; 21 } 22 .loading2{ 23 transform:rotate(45deg); 24 } 25 26 .loading ul li:nth-of-type(1){top:0;} 27 .loading ul li:nth-of-type(2){top:0;left:80px} 28 .loading ul li:nth-of-type(3){top:80px;} 29 .loading ul li:nth-of-type(4){top:80px;left:80px} 30 31 @keyframes move{ 32 0%{transform:scale(0)} 33 50%{transform:scale(1)} 34 100%{transform:scale(0)} 35 } 36 .loading1 li:nth-of-type(1){animation-delay:0.1s} 37 .loading2 li:nth-of-type(1){animation-delay:0.3s} 38 .loading1 li:nth-of-type(2){animation-delay:0.5s} 39 .loading2 li:nth-of-type(2){animation-delay:0.7s} 40 .loading1 li:nth-of-type(3){animation-delay:0.9s} 41 .loading2 li:nth-of-type(3){animation-delay:1.1s} 42 .loading1 li:nth-of-type(4){animation-delay:1.3s} 43 .loading2 li:nth-of-type(4){animation-delay:1.5s}
效果：
