梦想天空

关注前端开发技术 ◆ 推动 HTML5 & CSS3 技术发展 ◆ 本博客全新站点：yyyweb.com 欢迎围观：）

随笔- 2452  文章- 1  评论- 16110 

使用 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.2s infinite ease-in-out;
  animation: stretchdelay 1.2s infinite ease-in-out;
}
 
.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
 
.spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}
 
.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
 
.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
 
@-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.2s infinite ease-in-out;
  animation: rotateplane 1.2s infinite ease-in-out;
}
 
@-webkit-keyframes rotateplane {
  0% { -webkit-transform: perspective(120px) }
  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}
 
@keyframes rotateplane {
  0% {
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
  } 50% {
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
  } 100% {
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}

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-bounce1, .double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #67CF22;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
   
  -webkit-animation: bounce 2.0s infinite ease-in-out;
  animation: bounce 2.0s infinite ease-in-out;
}
 
.double-bounce2 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}
 
@-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;
}
 
.cube1, .cube2 {
  background-color: #67CF22;
  width: 30px;
  height: 30px;
  position: absolute;
  top: 0;
  left: 0;
   
  -webkit-animation: cubemove 1.8s infinite ease-in-out;
  animation: cubemove 1.8s infinite ease-in-out;
}
 
.cube2 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
 
@-webkit-keyframes cubemove {
  25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) }
  50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) }
  75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) }
  100% { -webkit-transform: rotate(-360deg) }
}
 
@keyframes cubemove {
  25% {
    transform: translateX(42px) rotate(-90deg) scale(0.5);
    -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
  } 50% {
    transform: translateX(42px) translateY(42px) rotate(-179deg);
    -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
  } 50.1% {
    transform: translateX(42px) translateY(42px) rotate(-180deg);
    -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
  } 75% {
    transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
    -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
  } 100% {
    transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
  }
}

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.4s infinite ease-in-out;
  animation: bouncedelay 1.4s infinite ease-in-out;
  /* Prevent first frame from flickering when animation starts */
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
 
.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
 
.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
 
@-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.0s infinite ease-in-out;
  animation: scaleout 1.0s 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;
}
 
.container1 > div, .container2 > div, .container3 > div {
  width: 6px;
  height: 6px;
  background-color: #333;
 
  border-radius: 100%;
  position: absolute;
  -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
  animation: bouncedelay 1.2s infinite ease-in-out;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
 
.spinner .spinner-container {
  position: absolute;
  width: 100%;
  height: 100%;
}
 
.container2 {
  -webkit-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
}
 
.container3 {
  -webkit-transform: rotateZ(90deg);
  transform: rotateZ(90deg);
}
 
.circle1 { top: 0; left: 0; }
.circle2 { top: 0; right: 0; }
.circle3 { right: 0; bottom: 0; }
.circle4 { left: 0; bottom: 0; }
 
.container2 .circle1 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
 
.container3 .circle1 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}
 
.container1 .circle2 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
 
.container2 .circle2 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
 
.container3 .circle2 {
  -webkit-animation-delay: -0.7s;
  animation-delay: -0.7s;
}
 
.container1 .circle3 {
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}
 
.container2 .circle3 {
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}
 
.container3 .circle3 {
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}
 
.container1 .circle4 {
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}
 
.container2 .circle4 {
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
}
 
.container3 .circle4 {
  -webkit-animation-delay: -0.1s;
  animation-delay: -0.1s;
}
 
@-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 实现的超炫的网页加载动画效果

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

 
posted @ 2013-12-28 15:17 梦想天空（山边小溪） 阅读(274981) 评论(47) 编辑 收藏
 
发表评论
 
  

#1楼 2013-12-28 16:46 | 海农 

  

#2楼 2013-12-28 19:47 | 2J 

真强大
就是有些浏览器用不了...
  

#3楼 2013-12-28 20:38 | 破浪远航 

CSS3 动画效果的确不错
  

#4楼 2013-12-28 20:39 | 金姗 

真的很炫！
  

#5楼 2013-12-28 21:21 | 任意球 

来支持下
  

#6楼 2013-12-28 21:25 | 任意球 

我有个js的问题请教下，我加载一个页面，然后使用进度条，我怎样操作进度条在网页加载完毕的时候让进度条消失呢
  

#7楼 2013-12-28 22:24 | 醉温柔 

太厉害了
  

#8楼 2013-12-28 23:11 | Rising_Sun 

相当不错
  

#9楼 2013-12-29 00:14 | haiziguo 

  

#10楼 2013-12-29 00:23 | wenbolwm 

效果很不错
  

#11楼 2013-12-29 00:26 | 狼狼的蓝胖子 

@ 任意球
引用我有个js的问题请教下，我加载一个页面，然后使用进度条，我怎样操作进度条在网页加载完毕的时候让进度条消失呢
将进度条隐藏掉就好了啊，你是后台直接输出数据的吗？
  

#12楼 2013-12-29 04:49 | 冰麟轻武 

说实话,作为技术研究还不错,但是如果真的用在项目中的话不如一个gif来的实用
  

#13楼 2013-12-29 11:43 | Mr.Harry 

挺好看的东东..
  

#14楼 2013-12-30 09:01 | 大蘋果 

不错蛮好看的
  

#15楼[楼主] 2013-12-30 15:57 | 梦想天空（山边小溪） 

@ 戢俊建
引用真强大就是有些浏览器用不了...
用高端浏览器，享高端享受，哈哈
  

#16楼[楼主] 2013-12-30 15:58 | 梦想天空（山边小溪） 

@ 任意球
引用我有个js的问题请教下，我加载一个页面，然后使用进度条，我怎样操作进度条在网页加载完毕的时候让进度条消失呢
可以在onload事件里隐藏或删除进度表。
  

#17楼[楼主] 2013-12-30 15:59 | 梦想天空（山边小溪） 

@ 冰麟轻武
引用说实话,作为技术研究还不错,但是如果真的用在项目中的话不如一个gif来的实用
移动端还是可以考虑用下 CSS3 的。
  

#18楼[楼主] 2013-12-30 15:59 | 梦想天空（山边小溪） 

@ 醉温柔
@金姗
@两美码农
@戢俊建
@hinong
谢谢大家支持！
  

#19楼[楼主] 2013-12-30 16:00 | 梦想天空（山边小溪） 

@ 大蘋果
@Mr.Harry
@wenbolwm
@haiziguo
@Rising_Sun
多谢支持！：）
  

#20楼 2013-12-30 20:27 | 白树 

好东西，学习了
  

#21楼[楼主] 2013-12-31 13:33 | 梦想天空（山边小溪） 

@ 白树
引用好东西，学习了
多谢支持：）
  

#22楼 2014-01-01 23:17 | 任意球 

博主，您的这篇文章我可以拿去其他地方分享么，我会说明出处并带您的链接
  

#23楼[楼主] 2014-01-02 09:21 | 梦想天空（山边小溪） 

@ 任意球
引用博主，您的这篇文章我可以拿去其他地方分享么，我会说明出处并带您的链接
可以啊：）
  

#24楼 2014-01-02 10:14 | 兔子先生不掉毛好么 

谢谢分享 ；）
  

#25楼[楼主] 2014-01-02 12:12 | 梦想天空（山边小溪） 

@ 兔子先生不掉毛好么
引用谢谢分享 ；）
不用谢，欢迎常来关注！
  

#26楼 2014-01-06 15:34 | geass.. 

请教下，跟gif比有什么优势？
  

#27楼 2014-01-07 09:21 | Treenew Lyn 

@ geass..
有意思。
和GIF没什么优势。在国内一点P优势都没。
  

#28楼[楼主] 2014-01-08 22:46 | 梦想天空（山边小溪） 

@ geass..
引用请教下，跟gif比有什么优势？
使用 CSS 来做可以减少HTTP图片请求，另外可以任意放大缩小。
  

#29楼[楼主] 2014-01-08 22:47 | 梦想天空（山边小溪） 

@ Treenew Lyn
引用@geass..有意思。
和GIF没什么优势。在国内一点P优势都没。
这个得看项目啊，哈哈。
像移动Web项目用 CSS3 来做还是很不错的方案。
  

#30楼 2014-05-09 21:44 | xujihui 

很好的资源，请注明出处 http://tobiasahlin.com/spinkit/
  

#31楼[楼主] 2014-05-09 22:08 | 梦想天空（山边小溪） 

@ xujihui
引用很好的资源，请注明出处 http://tobiasahlin.com/spinkit/
开头就说了是SpinKit加载动画效果。
  

#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.”
  

#33楼 2014-08-20 16:44 | 刘宏玺 

效果超赞
  

#34楼[楼主] 2014-08-21 12:41 | 梦想天空（山边小溪） 

@ 刘宏玺
引用效果超赞
谢谢！
  

#35楼 2014-09-11 17:34 | Langjun 

赞，很漂亮！！
  

#36楼[楼主] 2014-09-11 19:49 | 梦想天空（山边小溪） 

@ Langjun
引用赞，很漂亮！！
谢谢支持！
  

#37楼 2015-01-14 10:31 | bugong 

  

#38楼 2015-03-16 15:40 | webfby 

  

#39楼[楼主] 2015-03-16 21:33 | 梦想天空（山边小溪） 

@ webfby、
@bugong
感谢支持！
  

#40楼 2016-01-11 14:30 | 苏荷酒吧 

博主给力啊
  

#41楼 2016-01-15 10:41 | 喊你不戴帽子 

  

#42楼[楼主] 2016-01-16 21:44 | 梦想天空（山边小溪） 

@ 喊你不戴帽子
@苏荷酒吧
谢谢支持！
  

#43楼 2016-08-12 10:16 | lmh2072005 

不错哦
  

#44楼 2017-06-07 15:54 | GeQin 

赞一个
  

#45楼 2017-06-16 11:57 | 哈喽雨涵 

厉害呀
  

#46楼 2017-08-31 22:27 | TaoVincent 

请问在第一个例子中
rect类为什么一定要作为spinner类的后代才能延时呢？
直接用rect类进行延时为什么不好用呢？
  

#47楼 2017-09-12 20:28 | 水墨江山画 

赞赞赞
 
< 2018年7月 >
日 一 二 三 四 五 六
24 25 26 27 28 29 30
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 1 2 3 4

搜索

 
 

我的标签

阅读排行榜

推荐排行榜

 
 
Copyright ©2018 梦想天空（山边小溪）

CSS3 loading效果全的更多相关文章

  1. HTML5+CSS3 loading 效果收集－－转载

    用gif图片来做loading的时代已经过去了,它显得太low了,而用HTML5/CSS3以及SVG和canvas来做加载动画显得既炫酷又逼格十足.这已经成为一种趋势. 这里收集了几十个用html5和 ...

  2. html5 css3 loading 效果

    canvas  html5load1 主要思路update  实现12个点的绘制和旋转效果 var update = function() { ctx.save();// 把当前绘图状态保存起来 ct ...

  3. css3 loading效果

    file:///E:/zhangqiangWork/2014/SPDbank/index.html 参考该网站 http://tobiasahlin.com/spinkit/ 查看源代码把里面的dom ...

  4. css3 loading 效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. css3 之炫酷的loading效果

    css3 之炫酷的loading效果 今天实现了一个炫酷的loading效果,基本全用css来实现,主要练习一下css3的熟练运用 js需要引入jquery 只用到了一点点js 先看效果图 html: ...

  6. 【转】 CSS3实现10种Loading效果

    昨晚用CSS3实现了几种常见的Loading效果,虽然很简单,但还是分享一下,顺便也当是做做笔记…… PS:如需转载,请注明出处! 第1种效果: 代码如下: <div class="l ...

  7. CSS3轻松实现清新 Loading 效果

    至今HTML5中国已经为大家分享过几百种基于 CSS3 的Loading加载动画,效果酷炫代码简洁,非常值得学习借鉴;今天就先给大家分享两个常用的CSS3的Loading的案例. 第一种效果: HTM ...

  8. CSS3实现10种Loading效果

    昨晚用CSS3实现了几种常见的Loading效果,虽然很简单,但还是分享一下,顺便也当是做做笔记…… 第1种效果: 代码如下: <div class="loading"> ...

  9. CSS3实现8种Loading效果【第二波】

    原文:CSS3实现8种Loading效果[第二波] 今晚吃完饭回宿舍又捣鼓了另外几种Loading效果,老规矩,直接“上菜“…… 注:gif图片动画有些卡顿,非实际效果! PS:若要转载请注明出处,尊 ...

随机推荐

  1. python标准库 － socket

    地址簇(address family) socket.AF_UNIX # (UNIX Domain Sockets) socket.AF_INET # ipv4 socket.AF_INET6 # i ...

  2. Google面试准备

    本人小弱,面试过了Google的HC,虽然team match还没完成,到最后还有变数.但对自己这段时间的努力,也算一个交代了. 最初是一年半前Google的HR联系到我,然后第一次在电面就挂了.经过 ...

  3. win2008 配置TLS1.2

    配置TLS1.2 提供两种方法, 选择其中一种就行了 1.手动设置 找到HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\SecurityProv ...

  4. 洛谷 P1509 找啊找啊找GF

    题目背景 "找啊找啊找GF,找到一个好GF,吃顿饭啊拉拉手,你是我的好GF.再见." "诶,别再见啊..." 七夕...七夕...七夕这个日子,对于sqybi这 ...

  5. April 27 2017 Week 17 Thursday

    Had I not seen the sun, I could have borne the shade. 我本可以忍受黑暗,如果我不曾见过阳光. A poem by Emily Dickinson, ...

  6. java IO流——字节流

    字节流主要操作byte类型数据,以byte数组为准,主要操作类有InputStream(字节输入流).OutputSteam(字节输出流)由于IputStream和OutputStream都是抽象类, ...

  7. reactjs--父组件调用子组件的内部方法（转载）

    reactjs--父组件调用子组件的内部方法 发表于2016/10/11 9:21:37  965人阅读 1.引入相关js <script src="js/react.js" ...

  8. MYSQL 之SET GLOBAL innodb_buffer_pool_size =n

    工作遇到一个情况是索引相同的情况下,mysql服务在linux上运行很快,在windows服务器上运行很慢,版本是V5.7以后得版本,同事查找了下说应该设置 SET GLOBAL innodb_buf ...

  9. Spring Java配置

    Java配置 Java配置是Spring 4.x推荐的配置方式,可以完全替代xml配置:Java配置也是Sping Boot 推荐的配置方式.Java配置是通过@Configuration和@Bean ...

  10. update_TypeError

    TypeError: ( 'An update must have the same type as the original shared variable ( shared_var=W, shar ...