从jq官网上摘抄下来的一个简单加载动画，个人比较喜欢使用~存在这里，作为记录
话不多说~上代码
<!
DOCTYPE
html>
<
html
lang
="
en">
<
head>
<
meta
charset
="
UTF-8">
<
meta
name
="
viewport"
content
="
width=device-width, initial-scale=1.0">
<
title>Document</
title>
<
style>
/* 登陆动画 */
.
loader {
width
:
90
px
;
height
:
42
px
;
position
:
absolute
;
top
:
50
%
;
left
:
50
%
;
transform
:
translate(
-50
%)
;
}
#
logining {
/* display: none; */
width
:
447
px
;
height
:
438
px
;
/* background-color: rgba(255, 255, 255, 0.3); */
position
:
relative
;
top
:
0
;
left
:
0
;
text-align
:
center
;
font-size
:
24
px
;
color
: #cccccc
;
background
:
rgba(
4
,
49
,
75
,
0.7)
;
overflow
:
hidden
;
}
#
logining
p {
margin-top
:
150
px
;
}
.
css-square {
position
:
absolute
;
top
:
0
;
left
:
0
;
width
:
25
px
;
height
:
7
px
;
background
: #cccccc
;
box-shadow
:
2
px
2
px
3
px
0
px
black
;
}
.
square1 {
left
:
70
px
;
-webkit-animation
:
dominos 1
s
0.125
s
ease infinite
;
animation
:
dominos 1
s
0.125
s
ease infinite
;
}
.
square2 {
left
:
60
px
;
-webkit-animation
:
dominos 1
s
0.3
s
ease infinite
;
animation
:
dominos 1
s
0.3
s
ease infinite
;
}
.
square3 {
left
:
50
px
;
-webkit-animation
:
dominos 1
s
0.425
s
ease infinite
;
animation
:
dominos 1
s
0.425
s
ease infinite
;
}
.
square4 {
left
:
40
px
;
-webkit-animation
:
dominos 1
s
0.540
s
ease infinite
;
animation
:
dominos 1
s
0.540
s
ease infinite
;
}
.
square5 {
left
:
30
px
;
-webkit-animation
:
dominos 1
s
0.665
s
ease infinite
;
animation
:
dominos 1
s
0.665
s
ease infinite
;
}
.
square6 {
left
:
20
px
;
-webkit-animation
:
dominos 1
s
0.79
s
ease infinite
;
animation
:
dominos 1
s
0.79
s
ease infinite
;
}
.
square7 {
left
:
10
px
;
-webkit-animation
:
dominos 1
s
0.9
s
ease infinite
;
animation
:
dominos 1
s
0.9
s
ease infinite
;
}
.
square8 {
left
:
0
px
;
-webkit-animation
:
dominos 1
s
1
s
ease infinite
;
animation
:
dominos 1
s
1
s
ease infinite
;
}
@
-webkit-keyframes loader-1-outter {
0% {
-webkit-transform
:
rotate(
0
deg)
;
transform
:
rotate(
0
deg)
;
}
100% {
-webkit-transform
:
rotate(
360
deg)
;
transform
:
rotate(
360
deg)
;
}
}
@
keyframes loader-1-outter {
0% {
-webkit-transform
:
rotate(
0
deg)
;
transform
:
rotate(
0
deg)
;
}
100% {
-webkit-transform
:
rotate(
360
deg)
;
transform
:
rotate(
360
deg)
;
}
}
@
-webkit-keyframes dominos {
50% {
opacity
:
0.7
;
}
75% {
-webkit-transform
:
rotate(
90
deg)
;
transform
:
rotate(
90
deg)
;
}
80% {
opacity
:
1
;
}
}
@
keyframes dominos {
50% {
opacity
:
0.7
;
}
75% {
-webkit-transform
:
rotate(
90
deg)
;
transform
:
rotate(
90
deg)
;
}
80% {
opacity
:
1
;
}
}
</
style>
</
head>
<
body>
<
div
id
="
logining">
<
p>加载中...</
p>
<
section>
<
div
class
="
loader ">
<
div
class
="
css-square square1"></
div>
<
div
class
="
css-square square2"></
div>
<
div
class
="
css-square square3"></
div>
<
div
class
="
css-square square4"></
div>
<
div
class
="
css-square square5"></
div>
<
div
class
="
css-square square6"></
div>
<
div
class
="
css-square square7"></
div>
<
div
class
="
css-square square8"></
div>
</
div>
</
section>
</
div>
</
body>
</
html>