9.旋转加载效果图--动图

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>
View Code

 

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}
View Code

 

效果：

 

posted @ 2023-11-09 14:28  种太阳  阅读(8)  评论(0)  编辑  收藏  举报