CSS3 loading效果全

最新推荐文章于 2024-06-25 10:37:03 发布
最新推荐文章于 2024-06-25 10:37:03 发布
阅读量229 收藏
点赞数
文章标签： 前端 javascript 人工智能 ViewUI
原文链接：http://www.cnblogs.com/leigepython/p/9290210.html
版权

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

 

　　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 代码：

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
.spinner {
   margin :  100px  auto ;
   width :  32px ;
   height :  32px ;
   position :  relative ;
}
 
.cube 1 , .cube 2  {
   background-color :  #67CF22 ;
   width :  30px ;
   height :  30px ;
   position :  absolute ;
   top :  0 ;
   left :  0 ;
   
   -webkit-animation: cubemove  1.8 s infinite ease-in-out;
   animation: cubemove  1.8 s infinite ease-in-out;
}
 
.cube 2  {
   -webkit-animation-delay:  -0.9 s;
   animation-delay:  -0.9 s;
}
 
@-webkit-keyframes cubemove {
   25%  { -webkit-transform: translateX( 42px ) rotate( -90 deg) scale( 0.5 ) }
   50%  { -webkit-transform: translateX( 42px ) translateY( 42px ) rotate( -180 deg) }
   75%  { -webkit-transform: translateX( 0px ) translateY( 42px ) rotate( -270 deg) scale( 0.5 ) }
   100%  { -webkit-transform: rotate( -360 deg) }
}
 
@keyframes cubemove {
   25%  {
     transform: translateX( 42px ) rotate( -90 deg) scale( 0.5 );
     -webkit-transform: translateX( 42px ) rotate( -90 deg) scale( 0.5 );
   }  50%  {
     transform: translateX( 42px ) translateY( 42px ) rotate( -179 deg);
     -webkit-transform: translateX( 42px ) translateY( 42px ) rotate( -179 deg);
   }  50.1%  {
     transform: translateX( 42px ) translateY( 42px ) rotate( -180 deg);
     -webkit-transform: translateX( 42px ) translateY( 42px ) rotate( -180 deg);
   }  75%  {
     transform: translateX( 0px ) translateY( 42px ) rotate( -270 deg) scale( 0.5 );
     -webkit-transform: translateX( 0px ) translateY( 42px ) rotate( -270 deg) scale( 0.5 );
   }  100%  {
     transform: rotate( -360 deg);
     -webkit-transform: rotate( -360 deg);
   }
}

Loading 动画效果五

 
 

 HTML 代码：

CSS 代码：

Loading 动画效果六

 
 
 
 
 

 HTML 代码：

1
2
3
4
5
<div class= "spinner" >
   <div class= "bounce1" ></div>
   <div class= "bounce2" ></div>
   <div class= "bounce3" ></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
.spinner {
   margin :  100px  auto  0 ;
   width :  150px ;
   text-align :  center ;
}
 
.spinner > div {
   width :  30px ;
   height :  30px ;
   background-color :  #67CF22 ;
 
   border-radius:  100% ;
   display : inline- block ;
   -webkit-animation: bouncedelay  1.4 s infinite ease-in-out;
   animation: bouncedelay  1.4 s infinite ease-in-out;
   /* Prevent first frame from flickering when animation starts */
   -webkit-animation-fill-mode:  both ;
   animation-fill-mode:  both ;
}
 
.spinner .bounce 1  {
   -webkit-animation-delay:  -0.32 s;
   animation-delay:  -0.32 s;
}
 
.spinner .bounce 2  {
   -webkit-animation-delay:  -0.16 s;
   animation-delay:  -0.16 s;
}
 
@-webkit-keyframes bouncedelay {
   0% ,  80% ,  100%  { -webkit-transform: scale( 0.0 ) }
   40%  { -webkit-transform: scale( 1.0 ) }
}
 
@keyframes bouncedelay {
   0% ,  80% ,  100%  {
     transform: scale( 0.0 );
     -webkit-transform: scale( 0.0 );
   }  40%  {
     transform: scale( 1.0 );
     -webkit-transform: scale( 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
29
.spinner {
   width :  40px ;
   height :  40px ;
   margin :  100px  auto ;
   background-color :  #333 ;
 
   border-radius:  100% ; 
   -webkit-animation: scaleout  1.0 s infinite ease-in-out;
   animation: scaleout  1.0 s infinite ease-in-out;
}
 
@-webkit-keyframes scaleout {
   0%  { -webkit-transform: scale( 0.0 ) }
   100%  {
     -webkit-transform: scale( 1.0 );
     opacity:  0 ;
   }
}
 
@keyframes scaleout {
   0%  {
     transform: scale( 0.0 );
     -webkit-transform: scale( 0.0 );
   }  100%  {
     transform: scale( 1.0 );
     -webkit-transform: scale( 1.0 );
     opacity:  0 ;
   }
}

Loading 动画效果八

HTML 代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class= "spinner" >
   <div class= "spinner-container container1" >
     <div class= "circle1" ></div>
     <div class= "circle2" ></div>
     <div class= "circle3" ></div>
     <div class= "circle4" ></div>
   </div>
   <div class= "spinner-container container2" >
     <div class= "circle1" ></div>
     <div class= "circle2" ></div>
     <div class= "circle3" ></div>
     <div class= "circle4" ></div>
   </div>
   <div class= "spinner-container container3" >
     <div class= "circle1" ></div>
     <div class= "circle2" ></div>
     <div class= "circle3" ></div>
     <div class= "circle4" ></div>
   </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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
.spinner {
   margin :  100px  auto ;
   width :  20px ;
   height :  20px ;
   position :  relative ;
}
 
.container 1  > div, .container 2  > div, .container 3  > div {
   width :  6px ;
   height :  6px ;
   background-color :  #333 ;
 
   border-radius:  100% ;
   position :  absolute ;
   -webkit-animation: bouncedelay  1.2 s infinite ease-in-out;
   animation: bouncedelay  1.2 s infinite ease-in-out;
   -webkit-animation-fill-mode:  both ;
   animation-fill-mode:  both ;
}
 
.spinner .spinner-container {
   position :  absolute ;
   width :  100% ;
   height :  100% ;
}
 
.container 2  {
   -webkit-transform: rotateZ( 45 deg);
   transform: rotateZ( 45 deg);
}
 
.container 3  {
   -webkit-transform: rotateZ( 90 deg);
   transform: rotateZ( 90 deg);
}
 
.circle 1  {  top :  0 ;  left :  0 ; }
.circle 2  {  top :  0 ;  right :  0 ; }
.circle 3  {  right :  0 ;  bottom :  0 ; }
.circle 4  {  left :  0 ;  bottom :  0 ; }
 
.container 2  .circle 1  {
   -webkit-animation-delay:  -1.1 s;
   animation-delay:  -1.1 s;
}
 
.container 3  .circle 1  {
   -webkit-animation-delay:  -1.0 s;
   animation-delay:  -1.0 s;
}
 
.container 1  .circle 2  {
   -webkit-animation-delay:  -0.9 s;
   animation-delay:  -0.9 s;
}
 
.container 2  .circle 2  {
   -webkit-animation-delay:  -0.8 s;
   animation-delay:  -0.8 s;
}
 
.container 3  .circle 2  {
   -webkit-animation-delay:  -0.7 s;
   animation-delay:  -0.7 s;
}
 
.container 1  .circle 3  {
   -webkit-animation-delay:  -0.6 s;
   animation-delay:  -0.6 s;
}
 
.container 2  .circle 3  {
   -webkit-animation-delay:  -0.5 s;
   animation-delay:  -0.5 s;
}
 
.container 3  .circle 3  {
   -webkit-animation-delay:  -0.4 s;
   animation-delay:  -0.4 s;
}
 
.container 1  .circle 4  {
   -webkit-animation-delay:  -0.3 s;
   animation-delay:  -0.3 s;
}
 
.container 2  .circle 4  {
   -webkit-animation-delay:  -0.2 s;
   animation-delay:  -0.2 s;
}
 
.container 3  .circle 4  {
   -webkit-animation-delay:  -0.1 s;
   animation-delay:  -0.1 s;
}
 
@-webkit-keyframes bouncedelay {
   0% ,  80% ,  100%  { -webkit-transform: scale( 0.0 ) }
   40%  { -webkit-transform: scale( 1.0 ) }
}
 
@keyframes bouncedelay {
   0% ,  80% ,  100%  {
     transform: scale( 0.0 );
     -webkit-transform: scale( 0.0 );
   }  40%  {
     transform: scale( 1.0 );
     -webkit-transform: scale( 1.0 );
   }
}

 

完整源码下载

 

您可能感兴趣的相关文章

 

本文链接：分享8个使用 CSS3 实现的超炫的网页加载动画效果

编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

 

 
分类:  CSS3, 网页设计
好文要顶  关注我  收藏该文   
86
2
 
 
 
« 上一篇： 你知道网页设计中最常用的15张图片素材吗？
» 下一篇： 经典网页设计：关注用户体验的20个华丽网站
posted @  2013-12-28 15:17 梦想天空（山边小溪） 阅读(274981) 评论(47) 编辑 收藏
 

 
  
#1楼   2013-12-28 16:46 | 海农  
强大·
支持(0) 反对(0)
  
#2楼   2013-12-28 19:47 | 2J  
真强大
就是有些浏览器用不了...
支持(0) 反对(0)
  
#3楼   2013-12-28 20:38 | 破浪远航  
CSS3 动画效果的确不错
支持(0) 反对(0)
  
#4楼   2013-12-28 20:39 | 金姗  
真的很炫！
支持(0) 反对(0)
  
#5楼   2013-12-28 21:21 | 任意球  
来支持下
支持(0) 反对(0)
  
#6楼   2013-12-28 21:25 | 任意球  
我有个js的问题请教下，我加载一个页面，然后使用进度条，我怎样操作进度条在网页加载完毕的时候让进度条消失呢
支持(0) 反对(0)
  
#7楼   2013-12-28 22:24 | 醉温柔  
太厉害了
支持(0) 反对(0)
  
#8楼   2013-12-28 23:11 | Rising_Sun  
相当不错
支持(0) 反对(0)
  
#9楼   2013-12-29 00:14 | haiziguo  
good
支持(0) 反对(0)
  
#10楼   2013-12-29 00:23 | wenbolwm  
效果很不错
支持(0) 反对(0)
  
#11楼   2013-12-29 00:26 | 狼狼的蓝胖子  
@ 任意球
引用我有个js的问题请教下，我加载一个页面，然后使用进度条，我怎样操作进度条在网页加载完毕的时候让进度条消失呢
将进度条隐藏掉就好了啊，你是后台直接输出数据的吗？
支持(0) 反对(0)
  
#12楼   2013-12-29 04:49 | 冰麟轻武  
说实话,作为技术研究还不错,但是如果真的用在项目中的话不如一个gif来的实用
支持(1) 反对(0)
  
#13楼   2013-12-29 11:43 | Mr.Harry  
挺好看的东东..
支持(0) 反对(0)
  
#14楼   2013-12-30 09:01 | 大蘋果  
不错蛮好看的
支持(0) 反对(0)
  
#15楼 [ 楼主] 2013-12-30 15:57 | 梦想天空（山边小溪）  
@ 戢俊建
引用真强大就是有些浏览器用不了...
用高端浏览器，享高端享受，哈哈
支持(1) 反对(0)
  
#16楼 [ 楼主] 2013-12-30 15:58 | 梦想天空（山边小溪）  
@ 任意球
引用我有个js的问题请教下，我加载一个页面，然后使用进度条，我怎样操作进度条在网页加载完毕的时候让进度条消失呢
可以在onload事件里隐藏或删除进度表。
支持(0) 反对(0)
  
#17楼 [ 楼主] 2013-12-30 15:59 | 梦想天空（山边小溪）  
@ 冰麟轻武
引用说实话,作为技术研究还不错,但是如果真的用在项目中的话不如一个gif来的实用
移动端还是可以考虑用下 CSS3 的。
支持(0) 反对(0)
  
#18楼 [ 楼主] 2013-12-30 15:59 | 梦想天空（山边小溪）  
@ 醉温柔
@金姗
@两美码农
@戢俊建
@hinong
谢谢大家支持！
支持(0) 反对(0)
  
#19楼 [ 楼主] 2013-12-30 16:00 | 梦想天空（山边小溪）  
@ 大蘋果
@Mr.Harry
@wenbolwm
@haiziguo
@Rising_Sun
多谢支持！：）
支持(0) 反对(0)
  
#20楼   2013-12-30 20:27 | 白树  
好东西，学习了
支持(0) 反对(0)
  
#21楼 [ 楼主] 2013-12-31 13:33 | 梦想天空（山边小溪）  
@ 白树
引用好东西，学习了
多谢支持：）
支持(0) 反对(0)
  
#22楼   2014-01-01 23:17 | 任意球  
博主，您的这篇文章我可以拿去其他地方分享么，我会说明出处并带您的链接
支持(0) 反对(0)
  
#23楼 [ 楼主] 2014-01-02 09:21 | 梦想天空（山边小溪）  
@ 任意球
引用博主，您的这篇文章我可以拿去其他地方分享么，我会说明出处并带您的链接
可以啊：）
支持(0) 反对(0)
  
#24楼   2014-01-02 10:14 | 兔子先生不掉毛好么  
谢谢分享 ；）
支持(0) 反对(0)
  
#25楼 [ 楼主] 2014-01-02 12:12 | 梦想天空（山边小溪）  
@ 兔子先生不掉毛好么
引用谢谢分享 ；）
不用谢，欢迎常来关注！
支持(0) 反对(0)
  
#26楼   2014-01-06 15:34 | geass..  
请教下，跟gif比有什么优势？
支持(0) 反对(0)
  
#27楼   2014-01-07 09:21 | Treenew Lyn  
@ geass..
有意思。
和GIF没什么优势。在国内一点P优势都没。
支持(0) 反对(0)
  
#28楼 [ 楼主] 2014-01-08 22:46 | 梦想天空（山边小溪）  
@ geass..
引用请教下，跟gif比有什么优势？
使用 CSS 来做可以减少HTTP图片请求，另外可以任意放大缩小。
支持(0) 反对(0)
  
#29楼 [ 楼主] 2014-01-08 22:47 | 梦想天空（山边小溪）  
@ Treenew Lyn
引用@geass..有意思。
和GIF没什么优势。在国内一点P优势都没。
这个得看项目啊，哈哈。
像移动Web项目用 CSS3 来做还是很不错的方案。
支持(0) 反对(0)
  
#30楼   2014-05-09 21:44 | xujihui  
很好的资源，请注明出处  http://tobiasahlin.com/spinkit/
支持(0) 反对(0)
  
#31楼 [ 楼主] 2014-05-09 22:08 | 梦想天空（山边小溪）  
@ xujihui
引用很好的资源，请注明出处 http://tobiasahlin.com/spinkit/
开头就说了是SpinKit加载动画效果。
支持(0) 反对(0)
  
#32楼   2014-05-09 23:10 | xujihui  
@ Treenew Lyn
为什么没优势？建议你看一下项目原址
“An easy way to provide a fallback animation is to check for support for the animation property, and replace the spinner with a GIF if it's not supported.”
支持(0) 反对(0)
  
#33楼   2014-08-20 16:44 | 刘宏玺  
效果超赞
支持(0) 反对(0)
  
#34楼 [ 楼主] 2014-08-21 12:41 | 梦想天空（山边小溪）  
@ 刘宏玺
引用效果超赞
谢谢！
支持(0) 反对(0)
  
#35楼   2014-09-11 17:34 | Langjun  
赞，很漂亮！！
支持(0) 反对(0)
  
#36楼 [ 楼主] 2014-09-11 19:49 | 梦想天空（山边小溪）  
@ Langjun
引用赞，很漂亮！！
谢谢支持！
支持(0) 反对(0)
  
#37楼   2015-01-14 10:31 | bugong  
mark
支持(0) 反对(0)
  
#38楼   2015-03-16 15:40 | webfby  
m
支持(0) 反对(0)
  
#39楼 [ 楼主] 2015-03-16 21:33 | 梦想天空（山边小溪）  
@ webfby、
@bugong
感谢支持！
支持(0) 反对(0)
  
#40楼   2016-01-11 14:30 | 苏荷酒吧  
博主给力啊
支持(0) 反对(0)
  
#41楼   2016-01-15 10:41 | 喊你不戴帽子  
mark
支持(0) 反对(0)
  
#42楼 [ 楼主] 2016-01-16 21:44 | 梦想天空（山边小溪）  
@ 喊你不戴帽子
@苏荷酒吧
谢谢支持！
支持(0) 反对(0)
  
#43楼   2016-08-12 10:16 | lmh2072005  
不错哦
支持(0) 反对(0)
  
#44楼   2017-06-07 15:54 | GeQin  
赞一个
支持(0) 反对(0)
  
#45楼   2017-06-16 11:57 | 哈喽雨涵  
厉害呀
支持(0) 反对(0)
  
#46楼   2017-08-31 22:27 | TaoVincent  
请问在第一个例子中
rect类为什么一定要作为spinner类的后代才能延时呢？
直接用rect类进行延时为什么不好用呢？
支持(0) 反对(0)
  
#47楼   2017-09-12 20:28 | 水墨江山画  
赞赞赞
支持(0) 反对(0)
 
 
 

 

转载于:https://www.cnblogs.com/leigepython/p/9290210.html

agg7911
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css实现loading,CSS3实现18种Loading效果
weixin_42102220的博客
08-03 3149
昨晚用CSS3实现了几种常见的Loading效果，虽然很简单，但还是分享一下，顺便也当是做做笔记……第1种效果：代码如下：.loading{width: 80px;height: 40px;margin: 0 auto;margin-top:100px;}.loading span{display: inline-block;width: 8px;height: 100%;border-radiu...
css实现loading效果
tx_xiaobai的博客
11-19 369
一、 <div class="loading"> <span></span> <span></span> <span></span> <span></span> <span></span> </div> .lo...
CSS3实现8种Loading效果
最新发布
coldriversnow的专栏
06-25 206
【代码】CSS3实现8种Loading效果。
8种CSS实现loading加载特效的小技巧（分享）
qq_43067585的博客
05-27 4877
本篇文章给大家分享8种CSS实现loading加载特效的小技巧，希望对大家有所帮助！ 为什么会写这种文章呢？平时开发的时候，我们遇到加载，要么是UI框架中自带，要么就是百度，然后CV到项目中？但是，自己实现的时候，又会没有思路。久而久之，变成了CV工程师。本文针对不同的加载方式，讲解其中的思路，希望大家不只是会用，更要是会写。实践才能出真知。（学习视频分享：css视频教程、web前端） 本文只介绍圈形加载。其他的会在其他文章中介绍。 loader-1 这应该是最简单的CSS加载了。在圆圈上有
CSS 实现各种 Loading 效果
猿男孩的博客
06-16 5081
CSS 实现各种 Loading 效果 效果实现： 这篇文章主要介绍了CSS 实现各种 Loading 效果附带解析过程,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下。...
CSS实现的 Loading 效果
weixin_50367873的博客
01-17 1806
CSS实现的 Loading 效果。
CSS3实现10种Loading效果
09-24
主要为大家详细介绍了CSS3实现10种Loading效果，效果实现简单新颖，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
各种css3 loading效果
10-25
通过这个名为“cssLoading”的压缩包，开发者可以获取多种预设的CSS3加载效果，为自己的项目增添更多视觉魅力。结合实际需求，适当修改和创新，将这些效果应用到网页中，可以显著提升用户的浏览体验。
css3 loading等待加载代码
06-24
本资源“css3 loading等待加载代码”正是这样一款利用CSS3技术实现的优秀加载动画特效。 首先，CSS3中的关键帧动画（@keyframes）是创建加载动画的核心。通过定义动画的不同阶段，我们可以控制元素在加载过程中的...
css3实现加载loading特效小动画效果
06-12
CSS3的引入为开发者提供了更多创建动态和交互式元素的工具，其中之一就是制作加载（loading）动画效果。本文将深入探讨如何利用CSS3来实现吸引人的加载特效小动画效果。 首先，CSS3中的关键帧动画（@keyframes）是...
纯CSS3文字Loading动画特效
06-24
纯CSS3文字Loading动画特效是一种利用CSS3特性实现的创新加载效果，它将普通的加载指示器与文字结合，为用户提供了更加生动且富有个性化的等待体验。这种动画效果无需JavaScript或者其他复杂的编程语言，只需通过CSS...
css实现loading,CSS3 19种LOADING（加载）动效
weixin_31220971的博客
08-03 994
CSS语言：CSSSCSS确定body {background: #323943;text-align: center;width: 960px;max-width: 100%;margin: 0 auto;box-sizing: border-box;font-family: sans-serif;color: rgba(200, 200, 200, 0.5);}body *,body *:be...
轻松掌握 CSS，实现 loading 加载中的多种形式
Shids_的博客
02-08 6219
轻松掌握 CSS，实现 loading 加载中的多种形式
6种纯css实现loading效果
weixin_30279751的博客
08-06 647
1、 <div id="loadingWrap1"> <span></span> <span></span> <span></span> <span></span> <span></span></div&g...
CSS3实现18种Loading效果
zcc的博客
03-03 2778
在网上看到一篇文章，css实现loading的效果，特此整理代码方便以后使用。 第1种效果： <div class="loading"> <span></span> <span></span> <span></span> <span></span> <span></span> </.
纯css实现117个Loading效果（上）
weixin_39415598的博客
12-03 636
本文转自：纯css实现117个Loading效果(上) 前言 这是我这几十年间从世界各地寻觅到的 Loading特效，合计117个(本文贴出39个，其他例子的放在后面两篇，可在我主页寻找)，而且是 纯CSS 制作的。 因为特效数量太多，所以我分成上、中、下三篇(每篇39个特效)。 本文不讲解原理(以后可能会开新篇讲)，只贴代码，大家来感受一下复制粘贴的快感吧。 ❤️❤️喜欢的给本文点个赞呗~ ...
css实现loading,CSS3实现10种Loading效果
weixin_42115074的博客
08-03 3347
很适合菜鸟，果断搬过来了。第1种效果：代码如下：htmlcss.loading{width: 80px;height: 40px;margin: 0 auto;margin-top:100px;}.loading span{display: inline-block;width: 8px;height: 100%;border-radius: 4px;background: lightgreen;...
css生成loading效果
04-05
以下是一种基于CSS的loading效果的实现方式： HTML代码： ``` <div class="loading"> <div class="loading-inner"> ``` CSS代码： ``` .loading { position: fixed; top: 0; left: 0; width: 100%; ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值