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 @   种太阳  阅读(9)  评论(0)  编辑  收藏  举报
相关博文：
·  8.立方体旋转图---动图
·  7.你心动了吗--动图
·  CSS实现加载页面动画效果
·  ant loading效果实现
·  animation旋转动效
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· AI与.NET技术实操系列（六）：基于图像分类模型对图像进行分类
点击右上角即可分享
微信分享提示
SQL AI 助手