首页 > 代码库 > loading 动画效果(收藏起来以后留着慢慢用)
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
);
}
}
动画效果二:
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);
}
}
动画效果三:
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
);
}
}
动画效果四:
HTML代码:
<div class=
"spinner"
>
<div class=
"cube1"
></div>
<div class=
"cube2"
></div>
</div>
CSS代码:
.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);
}
}
动画效果五:
HTML代码:
<div class=
"spinner"
>
<div class=
"dot1"
></div>
<div class=
"dot2"
></div>
</div>
CSS代码:
.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
);
}
}
动画效果六:
HTML代码:
<div class=
"spinner"
>
<div class=
"bounce1"
></div>
<div class=
"bounce2"
></div>
<div class=
"bounce3"
></div>
</div>
CSS代码:
.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
);
}
}
动画效果七:
HTML代码:
<div class=
"spinner"
></div>
CSS代码:
.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
;
}
}
动画效果八:
HTML代码:
<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代码:
.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
);
}
}
loading 动画效果(收藏起来以后留着慢慢用)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。