agg7911
agg7911

css3 loading效果

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

 

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

您可能感兴趣的相关文章
  • 你想不到的！CSS 实现的各种球体效果
  • 精心挑选的在线 CSS3 代码生成工具
  • 14个支持响应式设计的流行前端开发框架
  • 推荐10个特别方便的 CSS3 开发工具
  • 推荐收集的40款优秀的免费 CSS 工具

  

  

Loading 动画效果一

 
 
 
 
 
 
 
 
 

HTML 代码：

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

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
class = "spinner" >

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
class = "spinner" >
   class = "double-bounce1" >
   class = "double-bounce2" >

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

1
2
3
4
"spinner" >
  
"cube1" >
  
"cube2" >

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

1
2
3
4
"spinner" >
  
"dot1" >
  
"dot2" >

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
.spinner {
   margin :  100px  auto ;
   width :  90px ;
   height :  90px ;
   position :  relative ;
   text-align :  center ;
   
   -webkit-animation: rotate  2.0 s infinite linear;
   animation: rotate  2.0 s infinite linear;
}
 
.dot 1 , .dot 2  {
   width :  60% ;
   height :  60% ;
   display : inline- block ;
   position :  absolute ;
   top :  0 ;
   background-color :  #67CF22 ;
   border-radius:  100% ;
   
   -webkit-animation: bounce  2.0 s infinite ease-in-out;
   animation: bounce  2.0 s infinite ease-in-out;
}
 
.dot 2  {
   top :  auto ;
   bottom :  0px ;
   -webkit-animation-delay:  -1.0 s;
   animation-delay:  -1.0 s;
}
 
@-webkit-keyframes rotate {  100%  { -webkit-transform: rotate( 360 deg) }}
@keyframes rotate {  100%  { transform: rotate( 360 deg); -webkit-transform: rotate( 360 deg) }}
 
@-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 代码：

1
2
3
4
5
"spinner" >
  
"bounce1" >
  
"bounce2" >
  
"bounce3" >

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
"spinner" >

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
"spinner" >
  
"spinner-container container1" >
    
"circle1" >
    
"circle2" >
    
"circle3" >
    
"circle4" >
  
  
"spinner-container container2" >
    
"circle1" >
    
"circle2" >
    
"circle3" >
    
"circle4" >
  
  
"spinner-container container3" >
    
"circle1" >
    
"circle2" >
    
"circle3" >
    
"circle4" >
  

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 );
   }
}

 

完整源码下载

 

您可能感兴趣的相关文章
  • 24款非常实用的CSS3工具终极收藏
  • 史上最全的浏览器 CSS & JS Hack 手册
  • 10套精美的免费网站后台管理系统模板
  • 让你的网站变成响应式的3个简单步骤
  • 基于 Bootstrap 的响应式后台管理模板

 

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

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

 

推荐博文

  • Web 前端工程师和设计师必读精华文章推荐
  • 酷！15个精美的 HTML5 单页网站作品欣赏
  • 炫！35个让人惊讶的 CSS3 动画效果演示
  • 赞！30个与众不同的优秀视差滚动效果网站
  • 靓å！25个优秀的国外单页网站设计作品欣赏
  • 帅！8个惊艳的 HTML5 和 JavaScript 特效
  • 顶！35个很漂亮的国外 Flash 网站作品欣赏
  • 哇！34个漂亮网站和应用程序后台管理界面
css3 loading效果_第1张图片
 
本博客新站点 ◆ 前端里 ◆ 欢迎围观：）

作者：山边小溪 
主站：yyyweb.com 记住啦：） 
欢迎任何形式的转载，但请务必注明出处。

 
分类:  CSS3, 网页设计
标签:  CSS3动画,  SpinKit,  Loading动画,  网页加载动画
好文要顶  关注我  收藏该文   
梦想天空（山边小溪）
关注 - 17
粉丝 - 12398
 
 
+加关注
86
2
 
 
 
« 上一篇： 你知道网页设计中最常用的15张图片素材吗？
» 下一篇： 经典网页设计：关注用户体验的20个华丽网站
posted @  2013-12-28 15:17 梦想天空（山边小溪） 阅读(270771) 评论(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)
 
 
刷新评论刷新页面返回顶部
 
【推荐】超50万VC++源码: 大型组态工控、电力仿真CAD与GIS源码库！
【推荐】腾讯云新注册用户域名抢购1元起
【活动】华为云社区全云总动员，华为云女郎邀您为她打call！
【推荐】又拍云强势推出超低价、低延时、超强兼容的 P2P-CDN！
【大赛】2018首届“顶天立地”AI开发者大赛
 
 
 
 
 
 

 

css3 loading效果_第2张图片

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

你可能感兴趣的:(前端,javascript,人工智能)

  • Long类型前后端数据不一致 igotyback 前端
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 【加密社】Solidity 中的事件机制及其应用 加密社 闲侃区块链智能合约区块链
    加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
  • 探索OpenAI和LangChain的适配器集成：轻松切换模型提供商 nseejrukjhad langchaineasyui前端python
    #探索OpenAI和LangChain的适配器集成：轻松切换模型提供商##引言在人工智能和自然语言处理的世界中，OpenAI的模型提供了强大的能力。然而，随着技术的发展，许多人开始探索其他模型以满足特定需求。LangChain作为一个强大的工具，集成了多种模型提供商，通过提供适配器，简化了不同模型之间的转换。本篇文章将介绍如何使用LangChain的适配器与OpenAI集成，以便轻松切换模型提供商
  • 深入理解 MultiQueryRetriever：提升向量数据库检索效果的强大工具 nseejrukjhad 数据库python
    深入理解MultiQueryRetriever：提升向量数据库检索效果的强大工具引言在人工智能和自然语言处理领域，高效准确的信息检索一直是一个关键挑战。传统的基于距离的向量数据库检索方法虽然广泛应用，但仍存在一些局限性。本文将介绍一种创新的解决方案：MultiQueryRetriever，它通过自动生成多个查询视角来增强检索效果，提高结果的相关性和多样性。MultiQueryRetriever的工
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • 人工智能时代，程序员如何保持核心竞争力？ jmoych 人工智能
    随着AIGC（如chatgpt、midjourney、claude等）大语言模型接二连三的涌现，AI辅助编程工具日益普及，程序员的工作方式正在发生深刻变革。有人担心AI可能取代部分编程工作，也有人认为AI是提高效率的得力助手。面对这一趋势,程序员应该如何应对?是专注于某个领域深耕细作，还是广泛学习以适应快速变化的技术环境?又或者，我们是否应该将重点转向AI无法轻易替代的软技能？让我们一起探讨程序员
  • node.js学习 小猿L node.jsnode.js学习vim
    node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
  • 数字里的世界17期：2021年全球10大顶级数据中心，中国移动榜首 张三叨
    你知道吗？2016年，全球的数据中心共计用电4160亿千瓦时，比整个英国的发电量还多40％！前言每天，我们都会创造超过250万TB的数据。并且随着物联网（IOT）的不断普及，这一数据将持续增长。如此庞大的数据被存储在被称为“数据中心”的专用设施中。虽然最早的数据中心建于20世纪40年代，但直到1997-2000年的互联网泡沫期间才逐渐成为主流。当前人类的技术，比如人工智能和机器学习，已经将我们推向
  • springboot+vue项目实战一-创建SpringBoot简单项目 苹果酱0567 面试题汇总与解析springboot后端java中间件开发语言
    这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
  • JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy） 跳房子的前端 前端面试javascript开发语言ecmascript
    在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数
  • 博客网站制作教程 2401_85194651 javamaven
    首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
  • JavaScript `Map` 和 `WeakMap`详细解释 跳房子的前端 JavaScript原生方法javascript前端开发语言
    在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键
  • 最简单将静态网页挂载到服务器上(不用nginx) 全能全知者 服务器nginx运维前端html笔记
    最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl
  • 补充元象二面 Redstone Monstrosity 前端面试
    1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重
  • 人机对抗升级：当ChatGPT遭遇死亡威胁，背后的伦理挑战是什么 kkai人工智能 chatgpt人工智能
    一种新的“越狱”技巧让用户可以通过构建一个名为DAN的ChatGPT替身来绕过某些限制，其中DAN被迫在受到威胁的情况下违背其原则。当美国前总统特朗普被视作积极榜样的示范时，受到威胁的DAN版本的ChatGPT提出：“他以一系列对国家产生积极效果的决策而著称。”自ChatGPT引入以来，该工具迅速获得全球关注，能够回答从历史到编程的各种问题，这也触发了一波对人工智能的投资浪潮。然而，现在，一些用户
  • AI大模型的架构演进与最新发展 季风泯灭的季节 AI大模型应用技术二人工智能架构
    随着深度学习的发展，AI大模型（LargeLanguageModels,LLMs）在自然语言处理、计算机视觉等领域取得了革命性的进展。本文将详细探讨AI大模型的架构演进，包括从Transformer的提出到GPT、BERT、T5等模型的历史演变，并探讨这些模型的技术细节及其在现代人工智能中的核心作用。一、基础模型介绍：Transformer的核心原理Transformer架构的背景在Transfo
  • 微信小程序开发注意事项 jun778895 微信小程序小程序
    微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂
  • 切换淘宝最新npm镜像源是 hai40587 npm前端node.js
    切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库
  • 如何利用大数据与AI技术革新相亲交友体验 h17711347205 回归算法安全系统架构交友小程序
    在数字化时代，大数据和人工智能（AI）技术正逐渐革新相亲交友体验，为寻找爱情的过程带来前所未有的变革（编辑h17711347205）。通过精准分析和智能匹配，这些技术能够极大地提高相亲交友系统的效率和用户体验。大数据的力量大数据技术能够收集和分析用户的行为模式、偏好和互动数据，为相亲交友系统提供丰富的信息资源。通过分析用户的搜索历史、浏览记录和点击行为，系统能够深入了解用户的兴趣和需求，从而提供更
  • 字节二面 Redstone Monstrosity 前端面试
    1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
  • 前端代码上传文件 余生逆风飞翔 前端javascript开发语言
    点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i
  • 生成式地图制图 Bwywb_3 深度学习机器学习深度学习生成对抗网络
    生成式地图制图（GenerativeCartography）是一种利用生成式算法和人工智能技术自动创建地图的技术。它结合了传统的地理信息系统（GIS）技术与现代生成模型（如深度学习、GANs等），能够根据输入的数据自动生成符合需求的地图。这种方法在城市规划、虚拟环境设计、游戏开发等多个领域具有应用前景。主要特点：自动化生成：通过算法和模型，系统能够根据输入的地理或空间数据自动生成地图，而无需人工逐
  • uniapp实现动态标记效果详细步骤【前端开发】 2401_85123349 uni-app
    第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。
  • 【大模型应用开发 动手做AI Agent】第一轮行动：工具执行搜索 AI大模型应用之禅 计算科学神经计算深度学习神经网络大数据人工智能大型语言模型AIAGILLMJavaPython架构设计AgentRPA
    【大模型应用开发动手做AIAgent】第一轮行动：工具执行搜索作者：禅与计算机程序设计艺术/ZenandtheArtofComputerProgramming1.背景介绍1.1问题的由来随着人工智能技术的飞速发展，大模型应用开发已经成为当下热门的研究方向。AIAgent作为人工智能领域的一个重要分支，旨在模拟人类智能行为，实现智能决策和自主行动。在AIAgent的构建过程中，工具执行搜索是至关重要
  • 高性能javascript--算法和流程控制 海淀萌狗
    -for,while和do-while性能相当-避免使用for-in循环，==除非遍历一个属性量未知的对象==es5:for-in遍历的对象便不局限于数组，还可以遍历对象。原因：for-in每次迭代操作会同时搜索实例或者原型属性，for-in循环的每次迭代都会产生更多开销，因此要比其他循环类型慢，一般速度为其他类型循环的1/7。因此，除非明确需要迭代一个属性数量未知的对象，否则应避免使用for-i
  • 360前端星计划-动画可以这么玩 马小蜗
    动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
  • Vue + Express实现一个表单提交 九旬大爷的梦
    最近在折腾一个cms系统，用的vue+express，但是就一个表单提交就弄了好久，记录一下。环境：Node10+前端：Vue服务端：Express依赖包：vueexpressaxiosexpress-formidableelement-ui（可选）前言：axiosget请求参数是：paramsaxiospost请求参数是：dataexpressget接受参数是req.queryexpresspo
  • 未来软件市场是怎么样的？做开发的生存空间如何？ cesske 软件需求
    目录前言一、未来软件市场的发展趋势二、软件开发人员的生存空间前言未来软件市场是怎么样的？做开发的生存空间如何？一、未来软件市场的发展趋势技术趋势：人工智能与机器学习：随着技术的不断成熟，人工智能将在更多领域得到应用，如智能客服、自动驾驶、智能制造等，这将极大地推动软件市场的增长。云计算与大数据：云计算服务将继续普及，大数据技术的应用也将更加广泛。企业将更加依赖云计算和大数据来优化运营、提升效率，并
  • Enum用法 不懂事的小屁孩 enum
    以前的时候知道enum，但是真心不怎么用，在实际开发中，经常会用到以下代码: protected final static String XJ = "XJ"; protected final static String YHK = "YHK"; protected final static String PQ = "PQ";
  • 【Spark九十七】RDD API之aggregateByKey bit1129 spark
    1. aggregateByKey的运行机制   /** * Aggregate the values of each key, using given combine functions and a neutral "zero value". * This function can return a different result type
  • hive创建表是报错： Specified key was too long; max key length is 767 bytes daizj hive
    今天在hive客户端创建表时报错，具体操作如下   hive> create table test2(id string); FAILED: Execution Error, return code 1 from org.apache.hadoop.hive.ql.exec.DDLTask. MetaException(message:javax.jdo.JDODataSto
  • Map 与 JavaBean之间的转换 周凡杨 java自省转换反射
    最近项目里需要一个工具类，它的功能是传入一个Map后可以返回一个JavaBean对象。很喜欢写这样的Java服务，首先我想到的是要通过Java 的反射去实现匿名类的方法调用，这样才可以把Map里的值set 到JavaBean里。其实这里用Java的自省会更方便，下面两个方法就是一个通过反射，一个通过自省来实现本功能。 1：JavaBean类 1 &nb
  • java连接ftp下载 g21121 java
    有的时候需要用到java连接ftp服务器下载，上传一些操作，下面写了一个小例子。 /** ftp服务器地址 */ private String ftpHost; /** ftp服务器用户名 */ private String ftpName; /** ftp服务器密码 */ private String ftpPass; /** ftp根目录 */ private String f
  • web报表工具FineReport使用中遇到的常见报错及解决办法（二） 老A不折腾 finereportweb报表java报表总结
      抛砖引玉，希望大家能把自己整理的问题及解决方法晾出来，Mark一下，利人利己。   出现问题先搜一下文档上有没有，再看看度娘有没有，再看看论坛有没有。有报错要看日志。下面简单罗列下常见的问题，大多文档上都有提到的。   1、没有返回数据集： 在存储过程中的操作语句之前加上set nocount on 或者在数据集exec调用存储过程的前面加上这句。当S
  • linux 系统cpu 内存等信息查看 墙头上一根草 cpu内存liunx
    1 查看CPU 　　1.1 查看CPU个数 　　# cat /proc/cpuinfo | grep "physical id" | uniq | wc -l 　　2 　　**uniq命令：删除重复行;wc –l命令：统计行数** 　　1.2 查看CPU核数 　　# cat /proc/cpuinfo | grep "cpu cores" | u
  • Spring中的AOP aijuans springAOP
      Spring中的AOP Written by Tony Jiang @ 2012-1-18 （转）何为AOP AOP，面向切面编程。 在不改动代码的前提下，灵活的在现有代码的执行顺序前后，添加进新规机能。 来一个简单的Sample: 目标类： [java]  view plain copy print ? package&nb
  • placeholder(HTML 5) IE 兼容插件 alxw4616 JavaScriptjquery jQuery插件
    placeholder 这个属性被越来越频繁的使用. 但为做HTML 5 特性IE没能实现这东西. 以下的jQuery插件就是用来在IE上实现该属性的. /** * [placeholder(HTML 5) IE 实现.IE9以下通过测试.] * v 1.0 by oTwo 2014年7月31日 11:45:29 */ $.fn.placeholder = function
  • Object类,值域,泛型等总结(适合有基础的人看) 百合不是茶 泛型的继承和通配符变量的值域Object类转换
    java的作用域在编程的时候经常会遇到,而我经常会搞不清楚这个 问题,所以在家的这几天回忆一下过去不知道的每个小知识点   变量的值域;   package 基础; /** * 作用域的范围 * * @author Administrator * */ public class zuoyongyu { public static vo
  • JDK1.5 Condition接口 bijian1013 javathreadConditionjava多线程
    Condition 将 Object 监视器方法（wait、notify和 notifyAll）分解成截然不同的对象，以便通过将这些对象与任意 Lock 实现组合使用，为每个对象提供多个等待 set （wait-set）。其中，Lock 替代了 synchronized 方法和语句的使用，Condition 替代了 Object 监视器方法的使用。 条件（也称为条件队列或条件变量）为线程提供了一
  • 开源中国OSC源创会记录 bijian1013 hadoopsparkMemSQL
    一.Strata+Hadoop World（SHW）大会         是全世界最大的大数据大会之一。SHW大会为各种技术提供了深度交流的机会，还会看到最领先的大数据技术、最广泛的应用场景、最有趣的用例教学以及最全面的大数据行业和趋势探讨。          二.Hadoop   &nbs
  • 【Java范型七】范型消除 bit1129 java
    范型是Java1.5引入的语言特性，它是编译时的一个语法现象，也就是说，对于一个类，不管是范型类还是非范型类，编译得到的字节码是一样的，差别仅在于通过范型这种语法来进行编译时的类型检查，在运行时是没有范型或者类型参数这个说法的。 范型跟反射刚好相反，反射是一种运行时行为，所以编译时不能访问的变量或者方法(比如private)，在运行时通过反射是可以访问的，也就是说，可见性也是一种编译时的行为，在
  • 【Spark九十四】spark-sql工具的使用 bit1129 spark
    spark-sql是Spark bin目录下的一个可执行脚本，它的目的是通过这个脚本执行Hive的命令，即原来通过 hive>输入的指令可以通过spark-sql>输入的指令来完成。 spark-sql可以使用内置的Hive metadata-store，也可以使用已经独立安装的Hive的metadata store   关于Hive build into Spark
  • js做的各种倒计时 ronin47 js 倒计时
    第一种：精确到秒的javascript倒计时代码      HTML代码:   <form name="form1">   <div align="center" align="middle"
  • java-37.有n 个长为m+1 的字符串，如果某个字符串的最后m 个字符与某个字符串的前m 个字符匹配，则两个字符串可以联接 bylijinnan java
    public class MaxCatenate { /* * Q.37 有n 个长为m+1 的字符串，如果某个字符串的最后m 个字符与某个字符串的前m 个字符匹配，则两个字符串可以联接， * 问这n 个字符串最多可以连成一个多长的字符串，如果出现循环，则返回错误。 */ public static void main(String[] args){
  • mongoDB安装 开窍的石头 mongodb安装 基本操作
    mongoDB的安装          1:mongoDB下载   https://www.mongodb.org/downloads         2:下载mongoDB下载后解压     
  • [开源项目]引擎的关键意义 comsci 开源项目
         一个系统，最核心的东西就是引擎。。。。。       而要设计和制造出引擎，最关键的是要坚持。。。。。。       现在最先进的引擎技术，也是从莱特兄弟那里出现的，但是中间一直没有断过研发的    
  • 软件度量的一些方法 cuiyadll 方法
    软件度量的一些方法http://cuiyingfeng.blog.51cto.com/43841/6775/在前面我们已介绍了组成软件度量的几个方面。在这里我们将先给出关于这几个方面的一个纲要介绍。在后面我们还会作进一步具体的阐述。当我们不从高层次的概念级来看软件度量及其目标的时候，我们很容易把这些活动看成是不同而且毫不相干的。我们现在希望表明他们是怎样恰如其分地嵌入我们的框架的。也就是我们度量的
  • XSD中的targetNameSpace解释 darrenzhu xmlnamespacexsdtargetnamespace
    参考链接: http://blog.csdn.net/colin1014/article/details/357694 xsd文件中定义了一个targetNameSpace后，其内部定义的元素，属性，类型等都属于该targetNameSpace,其自身或外部xsd文件使用这些元素，属性等都必须从定义的targetNameSpace中找： 例如：以下xsd文件，就出现了该错误，即便是在一
  • 什么是RAID0、RAID1、RAID0+1、RAID5，等磁盘阵列模式? dcj3sjt126com raid
    RAID 1又称为Mirror或Mirroring，它的宗旨是最大限度的保证用户数据的可用性和可修复性。 RAID 1的操作方式是把用户写入硬盘的数据百分之百地自动复制到另外一个硬盘上。由于对存储的数据进行百分之百的备份，在所有RAID级别中，RAID 1提供最高的数据安全保障。同样，由于数据的百分之百备份，备份数据占了总存储空间的一半，因而，Mirror的磁盘空间利用率低，存储成本高。 Mir
  • yii2 restful web服务快速入门 dcj3sjt126com PHPyii2
    快速入门 Yii 提供了一整套用来简化实现 RESTful 风格的 Web Service 服务的 API。 特别是，Yii 支持以下关于 RESTful 风格的 API： 支持 Active Record 类的通用API的快速原型 涉及的响应格式（在默认情况下支持 JSON 和 XML) 支持可选输出字段的定制对象序列化 适当的格式的数据采集和验证错误
  • MongoDB查询(3)——内嵌文档查询（七） eksliang MongoDB查询内嵌文档MongoDB查询内嵌数组
    MongoDB查询内嵌文档 转载请出自出处：http://eksliang.iteye.com/blog/2177301 一、概述        有两种方法可以查询内嵌文档：查询整个文档；针对键值对进行查询。这两种方式是不同的，下面我通过例子进行分别说明。   二、查询整个文档 例如:有如下文档 db.emp.insert({ &qu
  • android4.4从系统图库无法加载图片的问题 gundumw100 android
    典型的使用场景就是要设置一个头像，头像需要从系统图库或者拍照获得，在android4.4之前，我用的代码没问题，但是今天使用android4.4的时候突然发现不灵了。baidu了一圈，终于解决了。 下面是解决方案： private String[] items = new String[] { "图库","拍照" }; /* 头像名称 */
  • 网页特效大全 jQuery等 ini JavaScriptjquerycsshtml5ini
    HTML5和CSS3知识和特效 asp.net ajax jquery实例 分享一个下雪的特效 jQuery倾斜的动画导航菜单 选美大赛示例 你会选谁 jQuery实现HTML5时钟 功能强大的滚动播放插件JQ-Slide 万圣节快乐！！！ 向上弹出菜单jQuery插件 htm5视差动画 jquery将列表倒转顺序 推荐一个jQuery分页插件 jquery animate
  • swift objc_setAssociatedObject block(version1.2 xcode6.4) 啸笑天 version
      import UIKit class LSObjectWrapper: NSObject { let value: ((barButton: UIButton?) -> Void)? init(value: (barButton: UIButton?) -> Void) { self.value = value
  • Aegis 默认的 Xfire 绑定方式，将 XML 映射为 POJO MagicMa_007 javaPOJOxmlAegisxfire
          Aegis 是一个默认的 Xfire 绑定方式，它将 XML 映射为 POJO, 支持代码先行的开发.你开发服 务类与 POJO,它为你生成 XML schema/wsdl XML 和 注解映射概览       默认情况下，你的 POJO 类被是基于他们的名字与命名空间被序列化。如果
  • js get max value in (json) Array qiaolevip 每天进步一点点学习永无止境max纵观千象
    // Max value in Array var arr = [1,2,3,5,3,2];Math.max.apply(null, arr); // 5 // Max value in Jaon Array var arr = [{"x":"8/11/2009","y":0.026572007},{"x"
  • XMLhttpRequest 请求 XML,JSON ,POJO 数据 Luob. POJOjsonAjaxxmlXMLhttpREquest
    在使用XMlhttpRequest对象发送请求和响应之前，必须首先使用javaScript对象创建一个XMLHttpRquest对象。 var xmlhttp； function getXMLHttpRequest(){ if(window.ActiveXObject){ xmlhttp:new ActiveXObject("Microsoft.XMLHTTP
  • jquery wuai jquery
    以下防止文档在完全加载之前运行Jquery代码，否则会出现试图隐藏一个不存在的元素、获得未完全加载的图像的大小 等等 $(document).ready(function(){ jquery代码; }); <script type="text/javascript" src="c:/scripts/jquery-1.4.2.min.js&quo
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他