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>
