第十七节 css3动画之animation loading案列

 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>loadingp>
70     div>
71 body>
72 html>