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

最新推荐文章于 2022-07-28 16:45:19 发布
最新推荐文章于 2022-07-28 16:45:19 发布
阅读量605 收藏
点赞数
分类专栏： CSS

　SpinKit 是一套网页动画效果，包含8种基于 CSS3 实现的很炫的加载动画。借助 CSS3 Animation 的强大功能来创建平滑，易于定制的动画。SpinKit 的目标不是提供一个每个浏览器都兼容的解决方案，而是给现代浏览器提供更优的技术实现方案和更佳的使用体验。（为保证最佳的效果，请在 Chrome、Firefox 和 Safari 等现代浏览器中浏览）

您可能感兴趣的相关文章

  

  

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

yghuaa
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3动画之DIY Loading动画
12-13
首先要知道什么是CSS3动画？然后才能做出自己想要的动画效果。下面会通过3个简单的Loading动画效果来对CSS3 animation动画做一个简单介绍，希望对你有用。 动画是使元素从一种样式逐渐变化为另一种样式的效果。 您可以改变任意多的样式任意多的次数。 使用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。 0% 是动画的开始，100% 是动画的完成。 要创建CSS3动画，那么首先就要了解@keyframes规则。@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。 当在
CSS3-loading动画（三）
weixin_30470857的博客
07-12 174
分享继续，图片看得不真切 在线演示demo：http://liyunpei.xyz/loading.html 十一、效果十一 四个小球分别包含于四个正方形div，将小球相对于正方形定位（top：0；left：0），将方形div设置旋转，使小球分别位于四角，然后使用关键帧动画控制小球在当前位置与靠近中心点的位置之间来回移动 {animation: flor_move 1s 0s...
使用 CSS3 实现超炫的 Loading（加载）动画效果以及cs3的在线制作工具
yoyoosyy的博客
03-16 1782
http://www.cnblogs.com/lhb25/p/loading-spinners-animated-with-css3.html
使用css3实现超炫的loading加载动画效果
09-25
主要介绍了使用css3实现超炫的loading加载动画效果,需要的朋友可以参考下
8款使用 CSS3 实现超炫的 Loading（加载）的动画效果
09-25
本文给大家总结分享了8款使用 CSS3 实现超炫的 Loading（加载）的动画效果，十分的炫酷，也非常实用，这里推荐给小伙伴们，希望大家能够喜欢。
css3超炫loading加载特效.zip
07-11
代码简介：CSS3超炫Loading加载特效是一款包含8种基于CSS3实现的很炫的加载动画。
loading css3动画
chenxi1025的博客
01-05 524
现在很多的网站网页在加载的时候都有一个加载的动画标识，有些事用gif动画图片，有些使用存css3写的，还有一些是使用js实现的，今天我就来用存css3来写一个加载的动画效果。 该效果使用咯css3的transform 里面的scale(缩放)、rotate(旋转)、translate(位移)，还使用了css3的动画keframes    animation。 思路： 1.定义一个大盒子，来装
CSS3-loading动画
liuhao9999的博客
07-28 272
代码】CSS3-loading动画。
28种CSS3炫酷loading页面加载动画特效代码
05-30
28酷炫吊的CSS3加载效果特效动画代码，分分钟让你的加载超乎你的想象
css3-loading动画
qq_41481924的博客
07-24 287
1.源码 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=, initial-scale=1.0"&gt; &lt;meta
CSS3--loading动画
liuhao9999的博客
07-28 216
代码】CSS3--loading动画。
css3 实现loading动画
花神的博客
09-07 540
&lt;!DOCTYPE html&gt; &lt;html lang="zh"&gt; &lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
css3实现loading动画
chenzfyy的博客
10-19 598
Document .box{width:100%;padding:3%;box-sizing:border-box;overflow:hidden} .box .loader{width:30%;float:left;height:200px;margin-right:3%;border:1px #ccc solid;box-sizing:border-box;display:flex
用css3实现一个简单的loading动画
不想翻身的咸鱼
04-25 920
在访问各种网站的时候我们经常会看到各式各样的加载动画，超级炫酷，有的是gif图片做成的，有的是svg做成的，有的是通过js控制dom做成的，在css3出现以后，好多都是纯css的，本着程序员造轮子的精神，自己决定用css实现自己网站的加载动画。效果如下（虽然不是很炫酷，嘿嘿） 下面我们开始动手，在开始前，我们分析一下这个动画是如何形成的 .最基本的旋转。 很明显6个白色圆点以半径r绕着中心...
CSS3 实现loading动画效果
NRGAGA的专栏
11-06 1219
https://www.jianshu.com/p/55372466ce70   前几篇介绍了CSS3的3个动画属性transform，transition，animation。但即使基本语法能看懂，也不代表能设计出棒棒的动画效果。在设计这条路上，是学无止境，甚至需要拼天赋的。我也很菜，只能站在优秀的设计师的肩膀上，模拟出一些效果。 例如非常常见的Loading的效果，你完全可以用GIF来实...
css3实现loading点的加载动画
最新发布
06-10
可以使用CSS3的伪元素和动画属性来实现loading点的加载动画，以下是一个简单的示例： HTML代码： ```html <div class="loading"> <div></div> <div></div> <div></div> ``` CSS代码： ```css .loading { ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值