console
<p class="txt">
原地址 : http://cssload.net/
</p>
<div class="loading">
<i>
<span>
</span>
<span>
</span>
<span>
</span>
<span>
</span>
<span>
</span>
</i>
</div>
html,
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
.txt {
position: fixed;
left: calc(50% - 100px);
top: 10px;
color: #fff;
z-index: 99;
}
.loading {
width: 100%;
height: 100%;
background: #4993e6;
position: relative;
}
.loading i {
margin: auto;
position: absolute;
top: calc(50% - 40px);
left: calc(50% - 40px);
width: 80px;
height: 80px;
display: block;
animation: loading 60s infinite;
}
.loading span {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
animation: i 5s infinite;
}
.loading span:after {
content: '';
display: block;
position: absolute;
left: 0px;
top: 0px;
width: 10px;
height: 10px;
background: rgba(255, 255, 255, 0.7);
border-radius: 10px;
}
.loading span:nth-child(1) {
animation-delay: 0.2s;
}
.loading span:nth-child(2) {
animation-delay: 0.4s;
}
.loading span:nth-child(3) {
animation-delay: 0.6s;
}
.loading span:nth-child(4) {
animation-delay: 0.8s;
}
.loading span:nth-child(5) {
animation-delay: 1s;
}
@keyframes loading {
form {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes i {
0% {
opacity: 1;
transform: rotate(180deg);
animation-timing-function: ease-out;
}
7% {
opacity: 1;
transform: rotate(300deg);
animation-timing-function: linear;
}
30% {
opacity: 1;
transform: rotate(410deg);
animation-timing-function: ease-in-out;
}
39% {
opacity: 1;
transform: rotate(645deg);
animation-timing-function: linear;
}
70% {
opacity: 1;
transform: rotate(770deg);
animation-timing-function: ease-out;
}
75% {
opacity: 1;
transform: rotate(900deg);
animation-timing-function: ease-out;
}
76% {
opacity: 0;
transform: rotate(900deg);
}
100% {
opacity: 0;
transform: rotate(900deg);
}
}