1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>loading动画</title> 6 <style type="text/css"> 7 @keyframes loading{ 8 from{ 9 transform: scale(1,1); 10 } 11 12 to{ 13 transform: scale(1,0.5); 14 } 15 } 16 17 .con{ 18 width: 300px; 19 height: 158px; 20 border: 1px solid #000; 21 margin: 150px auto 0; 22 } 23 24 .con div{ 25 width: 30px; 26 height: 100px; 27 float: left; 28 background-color: gold; 29 margin: 15px; 30 border-radius: 15px; 31 animation: loading 0.5s ease infinite alternate; 32 } 33 34 .con p{ 35 text-align: center; 36 } 37 .con div:nth-child(1){ 38 background-color: red; 39 animation-delay: 100ms; 40 41 } 42 43 .con div:nth-child(2){ 44 background-color: green; 45 animation-delay: 200ms; 46 } 47 .con div:nth-child(3){ 48 background-color: pink; 49 animation-delay: 300ms; 50 } 51 .con div:nth-child(4){ 52 background-color: lightgreen; 53 animation-delay: 400ms; 54 } 55 .con div:nth-child(5){ 56 background-color: lightblue; 57 animation-delay: 500ms; 58 } 59 60 </style> 61 </head> 62 <body> 63 <div class="con"> 64 <div></div> 65 <div></div> 66 <div></div> 67 <div></div> 68 <div></div> 69 <p>loading</p> 70 </div> 71 </body> 72 </html>