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

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

阅读量：6919 次

发布时间：2019-06-27

本文共 3710 字，大约阅读时间需要 12 分钟。

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

您可能感兴趣的相关文章

Loading 动画效果一

HTML 代码：

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

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

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

CSS 代码：

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

                            
<div 
class
=
"spinner"
>
  
<div 
class
=
"double-bounce1"
></div>
  
<div 
class
=
"double-bounce2"
></div>
</div>
         
       

CSS 代码：

                            
.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://ovhcl.baihongyu.com/

你可能感兴趣的文章

开发者为何对Service Fabric爱不释手？值得关注！