使用 CSS3 实现超炫的 Loading（加载）动画效果

最新推荐文章于 2025-08-08 15:44:38 发布
最新推荐文章于 2025-08-08 15:44:38 发布
阅读量155 收藏
点赞数
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/smght/p/4813194.html
本文提供了多种使用CSS3实现的加载动画效果示例，包括不同类型的旋转、伸缩动画等，通过简单的HTML和CSS代码即可实现流畅且美观的页面加载效果。

Loading 动画效果一

 
 
 
 
 
 
 
 
 

HTML 代码：

1
2
3
4
5
6
7
<div  class = "spinner" >
   <div  class = "rect1" ></div>
   <div  class = "rect2" ></div>
   <div  class = "rect3" ></div>
   <div  class = "rect4" ></div>
   <div  class = "rect5" ></div>
</div>

CSS 代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
.spinner {
   margin :  100px  auto ;
   width :  50px ;
   height :  60px ;
   text-align :  center ;
   font-size :  10px ;
}
 
.spinner > div {
   background-color :  #67CF22 ;
   height :  100% ;
   width :  6px ;
   display : inline- block ;
   
   -webkit-animation: stretchdelay  1.2 s infinite ease-in-out;
   animation: stretchdelay  1.2 s infinite ease-in-out;
}
 
.spinner .rect 2  {
   -webkit-animation-delay:  -1.1 s;
   animation-delay:  -1.1 s;
}
 
.spinner .rect 3  {
   -webkit-animation-delay:  -1.0 s;
   animation-delay:  -1.0 s;
}
 
.spinner .rect 4  {
   -webkit-animation-delay:  -0.9 s;
   animation-delay:  -0.9 s;
}
 
.spinner .rect 5  {
   -webkit-animation-delay:  -0.8 s;
   animation-delay:  -0.8 s;
}
 
@-webkit-keyframes stretchdelay {
   0% ,  40% ,  100%  { -webkit-transform: scaleY( 0.4 ) } 
   20%  { -webkit-transform: scaleY( 1.0 ) }
}
 
@keyframes stretchdelay {
   0% ,  40% ,  100%  {
     transform: scaleY( 0.4 );
     -webkit-transform: scaleY( 0.4 );
   }   20%  {
     transform: scaleY( 1.0 );
     -webkit-transform: scaleY( 1.0 );
   }
}

Loading 动画效果二

 

 

HTML 代码：

1
<div  class = "spinner" ></div>

CSS 代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.spinner {
   width :  60px ;
   height :  60px ;
   background-color :  #67CF22 ;
 
   margin :  100px  auto ;
   -webkit-animation: rotateplane  1.2 s infinite ease-in-out;
   animation: rotateplane  1.2 s infinite ease-in-out;
}
 
@-webkit-keyframes rotateplane {
   0%  { -webkit-transform: perspective( 120px ) }
   50%  { -webkit-transform: perspective( 120px ) rotateY( 180 deg) }
   100%  { -webkit-transform: perspective( 120px ) rotateY( 180 deg)  rotateX( 180 deg) }
}
 
@keyframes rotateplane {
   0%  {
     transform: perspective( 120px ) rotateX( 0 deg) rotateY( 0 deg);
     -webkit-transform: perspective( 120px ) rotateX( 0 deg) rotateY( 0 deg)
   }  50%  {
     transform: perspective( 120px ) rotateX( -180.1 deg) rotateY( 0 deg);
     -webkit-transform: perspective( 120px ) rotateX( -180.1 deg) rotateY( 0 deg)
   }  100%  {
     transform: perspective( 120px ) rotateX( -180 deg) rotateY( -179.9 deg);
     -webkit-transform: perspective( 120px ) rotateX( -180 deg) rotateY( -179.9 deg);
   }
}

Loading 动画效果三

 

 
 

HTML 代码：

1
2
3
4
<div  class = "spinner" >
   <div  class = "double-bounce1" ></div>
   <div  class = "double-bounce2" ></div>
</div>

CSS 代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
.spinner {
   width :  60px ;
   height :  60px ;
 
   position :  relative ;
   margin :  100px  auto ;
}
 
.double-bounce 1 , .double-bounce 2  {
   width :  100% ;
   height :  100% ;
   border-radius:  50% ;
   background-color :  #67CF22 ;
   opacity:  0.6 ;
   position :  absolute ;
   top :  0 ;
   left :  0 ;
   
   -webkit-animation: bounce  2.0 s infinite ease-in-out;
   animation: bounce  2.0 s infinite ease-in-out;
}
 
.double-bounce 2  {
   -webkit-animation-delay:  -1.0 s;
   animation-delay:  -1.0 s;
}
 
@-webkit-keyframes bounce {
   0% ,  100%  { -webkit-transform: scale( 0.0 ) }
   50%  { -webkit-transform: scale( 1.0 ) }
}
 
@keyframes bounce {
   0% ,  100%  {
     transform: scale( 0.0 );
     -webkit-transform: scale( 0.0 );
   }  50%  {
     transform: scale( 1.0 );
     -webkit-transform: scale( 1.0 );
   }
}

Loading 动画效果四

 

 
 

 HTML 代码：

CSS 代码：

Loading 动画效果五

 
 

 HTML 代码：

CSS 代码：

Loading 动画效果六

 
 
 
 
 

 HTML 代码：

CSS 代码：

Loading 动画效果七

HTML 代码：

CSS 代码：

Loading 动画效果八

HTML 代码：

CSS 代码：

 

完整源码下载

 

转载地址：http://www.cnblogs.com/lhb25/archive/2013/12/28/loading-spinners-animated-with-css3.html

转载于:https://www.cnblogs.com/smght/p/4813194.html

科技感Loading加载动画特效.zip
07-11
代码片段： <title>科技感Loading加载动画特效</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel=&#39;stylesheet&#39; href=&#39;css/style.css&#39;>
使用css3实现超炫的loading加载动画效果
09-25
总结起来，使用CSS3实现超炫的loading加载动画效果，开发者可以通过创建自定义的关键帧动画和利用变换属性来实现各种动态效果。这不仅可以提升网站或应用的视觉吸引力，还能为用户提供反馈，让他们知道内容正在加载...
【CSS 常用加载动画效果】
前端-CV全粘工程师
08-24 1103
【代码】【CSS 常用加载动画效果】
利用CSS打造吸引人的页面加载动画效果
最新发布
weixin_36289813的博客
08-08 829
元素来定义容器，并通过CSS类来控制其样式和动画行为。容器可以是全屏的，也可以是页面中的一部分。-- 加载动画的具体内容将放在这里 -->
纯CSS3制作科技感十足的背景发光渐变网页Loading加载动画特效源码.zip
11-09
纯CSS3制作科技感十足的背景发光渐变网页Loading加载动画特效源码.zip
CSS实现加载动画
qq_44552416的博客
07-16 1688
需求：在开发过程中，我们会经常遇到一些基本的加载动画需求。这里我们简单介绍几个加载动画，主要是通过使用。
8款使用 CSS3 实现超炫的 Loading（加载）的动画效果
09-25
CSS3作为现代网页设计中不可或缺的技术，它允许开发者仅使用纯CSS来实现各种视觉动画效果，无需依赖JavaScript或Flash等插件。接下来，我们将分析和解释文章中提到的两种Loading动画实现方式，它们分别基于"stretch ...
8种超炫css3加载动画代码_css3 loading动画效果代码
11-05
总的来说，这8种CSS3加载动画代码展示了CSS3的强大动画能力，通过巧妙地组合和调整，可以创造出无数独特的加载效果，让网页加载过程不再枯燥乏味，而是充满乐趣和期待。无论你是前端开发者还是设计师，都能从中获得...
纯前端css实现酷炫loading动画
qq_45457134的博客
07-06 1947
纯前端css实现酷炫loading动画
手把手实现 CSS 加载动画（一）
p1967914901的博客
08-07 4704
接下来便是旋转这三个圆，最方便的做法便是将容器进行旋转，但有一个地方需要注意，我们是要等三个圆移动到最远的位置后开始旋转。既然是加载动画，我们不可能让他在角落展示吧，我们当然需要将它水平垂直居中，水平垂直居中的方式有很多，这里就不再赘述了。现在你已经看到了三个黑乎乎的圆已经重合在容器中间（为了方便观察，我们给容器加了一个背景颜色）。好了，到现在我们已经完成了初始状态，接下来我们要为它们分别定义动画。接下来我们来绘制三个圆，首先一开始三个圆是在容器中间。，这就是动画开始时一个圆分裂成三个圆的停顿时刻；...
网页端页面的加载动画效果
08-29
里面总共有13种不同的页面加载效果，里面总共有13种不同的页面加载效果。
wpf 实现类似qq好友列表样式+酷炫动画效果
03-26
wpf 实现类似qq好友列表样式+酷炫动画效果
CSS3发光Loading加载动画
08-23
今天我们要分享一款与众不同的CSS3 Loading动画效果，它是由几个不同的动画效果组合而成的，像文字打印效果、发光效果、飞入飞出效果，这几种效果都非常酷。另外我们可以再回顾一下其他的CSS3 Loading效果：HTML5 Canvas实现超酷Loading动画、很有个性的CSS3弹跳Loading动画。
【前端动画】科技感扫描效果 css动画animation
phhz的博客
07-20 854
参考了网友写的二维码扫描。
八种炫酷纯CSS加载动画代码
weixin_43923808的博客
05-12 8190
加载1CSS源码.title{ width: 100%; text-align: center; margin:60px 0; font-size: 18px; color: #999; } .loadingOne{ width: 80px; height: 40px; margin: 0 auto; } .loadingOne span{ display: inline-block; width: 8px; hei..
简易css loading加载
xidianyueyong的博客
12-07 636
 实现比较简单，代码如下： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;loading&lt;/title&gt; &lt;/head&gt; &lt;style type="text/css"&gt; .loading{ width: 300px; height: 40px;
css 原生代码写loading圆环
zhangxy
10-30 607
.loader{ height: 50px; width: 50px; margin: 20% auto 0 auto; } .loader::after,.loader::before{ content: ""; width: 50px; height: 50px; position: absolute; border: solid 8px transparent; border-radius: 50%; -webkit-animation: circles 1.4s linear infinite; .
【CSS加载动画特效】28种纯CSS实现的加载loading动态特效（附源码）
热门推荐
赏樱看雪撸代码
07-11 1万+
CSS3实现多种load加载效果，纯CSS3实现多种加载中效果，纯CSS3实现28种加载动态效果，页面实现loading效果，好看的loading动态特效，animation与transform的灵活应用。
8种炫酷的CSS3加载动画效果展示
**描述**："代码简介：CSS3超炫Loading加载特效是一款包含8种基于CSS3实现的很炫的加载动画。" - **代码简介**：这意味着提供了简单的介绍或指导，帮助用户理解代码的功能和用法。这对于那些想要学习如何创建炫酷...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值