第十七节 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>loading</p>
70     </div>
71 </body>
72 </html>

 

posted @ 2020-03-14 15:52  kog_maw  阅读(134)  评论(0)    收藏  举报