为了方便大家方便CV，每个loading对应一个html文件。
文件下载压缩包，下载地址：
https://download.csdn/download/m0_48850204/20432352?spm=1001.2014.3001.5501
效果如图：
代码如下
loading1
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>阿玉写loading loading1</title>
<style type="text/css">
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html,
body {
height: 100%;
background-color: #494a5f;
}
.nav {
width: 100%;
padding-bottom: 1.2em;
position: absolute;
z-index: 99;
color: white;
display: flex;
justify-content: center;
}
.nav a {
color: #fff;
text-decoration: none;
}
.nav a {
display: inline-block;
margin: 0.5em;
padding: 0.6em 1em;
border: 3px solid #fff;
font-weight: 700;
}
.nav a:hover {
opacity: 0.6;
cursor: pointer;
}
.nav a.current {
background: #1d7db1;
color: #fff;
}
.htmleaf-container {
height: 100%;
position: relative;
min-height: 200px;
}
.loader {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 56px;
height: 50px;
perspective: 100px;
perspective-origin: 50% 100%;
transform-style: preserve-3d;
transform: translateZ(-1px);
}
.loader .loader-inner {
width: 50%;
height: 100%;
background: #fff;
border: 3px solid #b93be6;
position: absolute;
right: 0;
transform-origin: 0% 100%;
}
.loader .loader-inner:first-child {
left: 0;
}
.loader .loader-inner hr {
margin: 3px 3px 6px;
border: 1px solid #b93be6;
}
.loader .loader-inner.box {
-webkit-animation: loading-1 3.6s infinite ease-in-out;
animation: loading-1 3.6s infinite ease-in-out;
}
.loader .loader-inner.box-1 {
animation-delay: .2s;
}
.loader .loader-inner.box-2 {
animation-delay: .4s;
}
.loader .loader-inner.box-3 {
animation-delay: 0.6s;
}
.loader .loader-inner.box-4 {
animation-delay: 0.8s;
}
.loader .loader-inner.box-5 {
animation-delay: 1.8s;
}
.loader .loader-inner.box-6 {
animation-delay: 2.2s;
}
@-webkit-keyframes loading-1 {
25%,
100% {
transform: translateX(3px) rotateY(-180deg);
}
}
@keyframes loading-1 {
25%,
100% {
transform: translateX(3px) rotateY(-180deg);
}
}
</style>
</head>
<body>
<div class="nav">
<a href="./loading1.html" class="current">loading1</a>
<a href="./loading2.html">loading2</a>
<a href="./loading3.html" >loading3</a>
<a href="./loading4.html" >loading4</a>
<a href="./loading5.html" >loading5</a>
</div>
<div class="htmleaf-container">
<div class="loader">
<div class="loader-inner">
<hr>
<hr>
<hr>
<hr>
<hr>
</div>
<div class="loader-inner box box-1">
<hr>
<hr>
<hr>
<hr>
<hr>
</div>
<div class="loader-inner box box-2">
<hr>
<hr>
<hr>
<hr>
<hr>
</div>
<div class="loader-inner box box-3">
<hr>
<hr>
<hr>
<hr>
<hr>
</div>
<div class="loader-inner box box-4">
<hr>
<hr>
<hr>
<hr>
<hr>
</div>
<div class="loader-inner box box-5">
<hr>
<hr>
<hr>
<hr>
<hr>
</div>
<div class="loader-inner box box-6">
<hr>
<hr>
<hr>
<hr>
<hr>
</div>
<div class="loader-inner">
<hr>
<hr>
<hr>
<hr>
<hr>
</div>
</div>
</div>
</body>
</html>loading2
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>阿玉写loading loading2</title>
<style type="text/css">
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html,
body {
height: 100%;
background-color: #3c2f49;
}
.nav {
width: 100%;
padding-bottom: 1.2em;
position: absolute;
z-index: 99;
color: white;
display: flex;
justify-content: center;
}
.nav a {
color: #fff;
text-decoration: none;
}
.nav a {
display: inline-block;
margin: 0.5em;
padding: 0.6em 1em;
border: 3px solid #fff;
font-weight: 700;
}
.nav a:hover {
opacity: 0.6;
cursor: pointer;
}
.nav a.current {
background: #1d7db1;
color: #fff;
}
.htmleaf-container {
height: 100%;
position: relative;
min-height: 200px;
display: flex;
justify-content: center;
align-items: center;
}
.loader {
width: 64px;
height: 64px;
line-height: 64px;
border-radius: 50%;
border-top: 5px solid #eb6c18;
color: #fff;
text-align: center;
-webkit-animation: 2s loading1 ease-in-out infinite;
animation: 2s loading1 ease-in-out infinite;
}
.loader:before,
.loader:after {
content: "";
display: block;
width: 64px;
height: 64px;
border-radius: 50%;
position: absolute;
top: -5px;
left: 0;
}
.loader:before {
border-top: 5px solid #c3c659;
-webkit-transform: rotate(120deg);
transform: rotate(120deg)
}
.loader:after {
border-top: 5px solid #b93be6;
-webkit-transform: rotate(240deg);
transform: rotate(240deg)
}
.loader .loader-inner {
font-size: 12px;
color: #b93be6;
display: block;
width: 64px;
height: 64px;
position: absolute;
top: -5px;
left: 0;
-webkit-animation: 2s loading2 linear infinite;
animation: 2s loading2 linear infinite;
}
@-webkit-keyframes loading1 {
50% {
-webkit-transform: rotate(180deg)
}
100% {
-webkit-transform: rotate(360deg)
}
}
@keyframes loading1 {
50% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg)
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg)
}
}
@-webkit-keyframes loading2 {
50% {
-webkit-transform: rotate(-180deg)
}
100% {
-webkit-transform: rotate(-360deg)
}
}
@keyframes loading2 {
50% {
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg)
}
100% {
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg)
}
}
</style>
</head>
<body>
<div class="nav">
<a href="./loading1.html" >loading1</a>
<a href="./loading2.html" class="current">loading2</a>
<a href="./loading3.html" >loading3</a>
<a href="./loading4.html" >loading4</a>
<a href="./loading5.html" >loading5</a>
</div>
<div class="htmleaf-container">
<div class="loader">
<span class="loader-inner">加载中...</span>
</div>
</div>
</body>
</html>loading3
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>阿玉写loading loading3</title>
<style type="text/css">
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
.htmleaf-container {
font-size: 12px;
height: 100%;
position: relative;
min-height: 200px;
}
.htmleaf-container .nav {
width: 100%;
padding-bottom: 1.2em;
position: absolute;
z-index: 99;
color: white;
display: flex;
justify-content: center;
}
.nav {
width: 100%;
padding-bottom: 1.2em;
position: absolute;
z-index: 99;
color: white;
display: flex;
justify-content: center;
background-color: black;
}
.nav a {
color: #fff;
text-decoration: none;
}
.nav a {
display: inline-block;
margin: 0.5em;
padding: 0.6em 1em;
border: 3px solid #fff;
font-weight: 700;
}
.nav a:hover {
opacity: 0.6;
cursor: pointer;
}
.nav a.current {
background: #1d7db1;
color: #fff;
}
.loader {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 60px;
}
.loader .my-loading {
position: relative;
width: 100%;
height: 10px;
border: 1px solid #30B08F;
border-radius: 10px;
animation: turn 2s linear 0.85s infinite;
}
.loader .my-loading:before {
content: "";
display: block;
position: absolute;
width: 0%;
height: 100%;
background: #30B08F;
box-shadow: 10px 0px 15px 0px #30B08F;
animation: load 1s linear infinite;
}
.loader .my-loading-text {
width: 100%;
position: absolute;
top: 10px;
color: #30B08F;
text-align: center;
animation: bounce 1s linear infinite;
}
@keyframes load {
0% {
width: 0%;
}
87.5%,
100% {
width: 100%;
}
}
@keyframes turn {
0% {
transform: rotateY(0deg);
}
6.25%,
50% {
transform: rotateY(180deg);
}
56.25%,
100% {
transform: rotateY(360deg);
}
}
@keyframes bounce {
0%,
100% {
top: 10px;
}
12.5% {
top: 30px;
}
}
</style>
</head>
<body>
<div class="nav">
<a href="./loading1.html" >loading1</a>
<a href="./loading2.html" >loading2</a>
<a href="./loading3.html" class="current">loading3</a>
<a href="./loading4.html" >loading4</a>
<a href="./loading5.html" >loading5</a>
</div>
<div class="htmleaf-container">
<div class="loader">
<div class="my-loading"></div>
<div class="my-loading-text">加载中...</div>
</div>
</div>
</body>
</html>loading4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>阿玉写loading loading4</title>
<style>
*{
margin: 0;
padding-left: 0;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #fff;
}
.container{
position: relative;
/* -webkit-box-reflect:below 1px liner-gradient(transparent,#0001); */
}
.nav {
width: 100%;
padding-bottom: 1.2em;
position: absolute;
z-index: 99;
top: 0;
color: white;
display: flex;
justify-content: center;
background-color: #494a5f;
}
.nav a {
color: #fff;
text-decoration: none;
}
.nav a {
display: inline-block;
margin: 0.5em;
padding: 0.6em 1em;
border: 3px solid #fff;
font-weight: 700;
}
.nav a:hover {
opacity: 0.6;
cursor: pointer;
}
.nav a.current {
background: #1d7db1;
color: #fff;
}
.container .loader{
position: relative;
width: 50px;
height: 50px;
border-radius: 50%;
border:5px solid transparent;
border-bottom-color:#468cf1;
border-right-color: #e64e7c;
transform: rotate(45deg);
animation:animate 2s ease-in-out infinite;
}
@keyframes animate {
0%{
transform:rotate(0deg);
border-right-color: #e64e7c;
border-bottom-color:#468cf1;
}
50%{
transform: rotate(90deg);
border-right-color: #468cf1;
border-bottom-color:#e64e7c;
}
100%{
transform: rotate(0deg);
border-bottom-color:#468cf1;;
border-right-color: #e64e7c;
}
}
.container .loader .ball{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
animation: animateBall 2s ease-in-out infinite;
}
@keyframes animateBall {
0%{
transform:rotate(0deg);
}
50%{
transform: rotate(180deg);
}
100%{
transform: rotate(0deg);
}
}
.container .loader .ball::before{
content: '';
position: absolute;
bottom: 50%;
right: 2px;
width: 10px;
height: 10px;
border-radius: 50%;
transform: translateY(-50%);
animation:animateBallBgColor 1s ease-in-out infinite;
}
@keyframes animateBallBgColor {
0%{
background-color:#e64e7c;
}
50%{
background-color:#468cf1;
}
100%{
background-color:#e64e7c;
}
}
</style>
</head>
<body>
<div class="nav">
<a href="./loading1.html" >loading1</a>
<a href="./loading2.html" >loading2</a>
<a href="./loading3.html" >loading3</a>
<a href="./loading4.html" class="current">loading4</a>
<a href="./loading5.html" >loading5</a>
</div>
<div class="container">
<div class="loader">
<div class="ball">
</div>
</div>
</div>
</body>
</html>
loading5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>阿玉写loading loading5</title>
<style>
body{
background-color:#142535 ;
}
.nav {
width: 100%;
padding-bottom: 1.2em;
position: absolute;
z-index: 99;
top: 0;
color: white;
display: flex;
justify-content: center;
}
.nav a {
color: #fff;
text-decoration: none;
}
.nav a {
display: inline-block;
margin: 0.5em;
padding: 0.6em 1em;
border: 3px solid #fff;
font-weight: 700;
}
.nav a:hover {
opacity: 0.6;
cursor: pointer;
}
.nav a.current {
background: #1d7db1;
color: #fff;
}
.loader-box{
height: 100%;
width: 100%;
position: absolute;
top: 0;
background-color: rgba(0,0,0,0.5);
display: flex;
justify-content: center;
align-items: center;
}
.loader-block{
display: flex;
flex-direction: column;
align-items: center;
justify-items: center;
}
.loader {
font-size: 8px;
width: 1em;
height: 1em;
border-radius: 50%;
animation: load-effect 1s infinite linear;
color: aqua;
}
.loading-text{
color: aqua;
font-size: 12px;
padding: 10px;
height: 24px;
margin-top: 20px;
}
@keyframes load-effect {
0% {
box-shadow:
0 -3em 0 .2em aqua,
/*上*/
2em -2em 0 0 aqua,
/*右上*/
3em 0 0 -.5em aqua,
/*右*/
2em 2em 0 -.5em aqua,
/*右下*/
0 3em 0 -.5em aqua,
/*下*/
-2em 2em 0 -.5em aqua,
/*左下*/
-3em 0 0 -.5em aqua,
/*左*/
-2em -2em 0 0 aqua;
/*左上*/
}
12.5% {
box-shadow:
0 -3em 0 0 aqua,
2em -2em 0 .2em aqua,
3em 0 0 0 aqua,
2em 2em 0 -.5em aqua,
0 3em 0 -.5em aqua,
-2em 2em 0 -.5em aqua,
-3em 0 0 -.5em aqua,
-2em -2em 0 -.5em aqua;
}
25% {
box-shadow:
0 -3em 0 -.5em aqua,
2em -2em 0 0 aqua,
3em 0 0 .2em aqua,
2em 2em 0 0 aqua,
0 3em 0 -.5em aqua,
-2em 2em 0 -.5em aqua,
-3em 0 0 -.5em aqua,
-2em -2em 0 -.5em aqua;
}
37.5% {
box-shadow:
0 -3em 0 -.5em aqua,
2em -2em 0 -.5em aqua,
3em 0 0 0 aqua,
2em 2em 0 .2em aqua,
0 3em 0 0 aqua,
-2em 2em 0 -.5em aqua,
-3em 0 0 -.5em aqua,
-2em -2em 0 -.5em aqua;
}
50% {
box-shadow:
0 -3em 0 -.5em aqua,
2em -2em 0 -.5em aqua,
3em 0 0 -.5em aqua,
2em 2em 0 0 aqua,
0 3em 0 .2em aqua,
-2em 2em 0 0 aqua,
-3em 0 0 -.5em aqua,
-2em -2em 0 -.5em aqua;
}
62.5% {
box-shadow:
0 -3em 0 -.5em aqua,
2em -2em 0 -.5em aqua,
3em 0 0 -.5em aqua,
2em 2em 0 -.5em aqua,
0 3em 0 0 aqua,
-2em 2em 0 .2em aqua,
-3em 0 0 0 aqua,
-2em -2em 0 -.5em aqua;
}
75% {
box-shadow:
0 -3em 0 -.5em aqua,
2em -2em 0 -.5em aqua,
3em 0 0 -.5em aqua,
2em 2em 0 -.5em aqua,
0 3em 0 -.5em aqua,
-2em 2em 0 0 aqua,
-3em 0 0 .2em aqua,
-2em -2em 0 0 aqua;
}
87.5% {
box-shadow:
0 -3em 0 0 aqua,
2em -2em 0 -.5em aqua,
3em 0 0 -.5em aqua,
2em 2em 0 -.5em aqua,
0 3em 0 -.5em aqua,
-2em 2em 0 0 aqua,
-3em 0 0 0 aqua,
-2em -2em 0 .2em aqua;
}
100% {
box-shadow:
0 -3em 0 .2em aqua,
2em -2em 0 0 aqua,
3em 0 0 -.5em aqua,
2em 2em 0 -.5em aqua,
0 3em 0 -.5em aqua,
-2em 2em 0 -.5em aqua,
-3em 0 0 -.5em aqua,
-2em -2em 0 0 aqua;
}
}
@keyframes flip-wave-0 {
0% {
transform: translate3d(0, -16px, 0) rotate(720deg)
}
10% {
transform: translate3d(0, 0, 0) rotate(720deg)
}
100% {
transform: translate3d(0, 0, 0) rotate(720deg)
}
}
.loading-filp :nth-child(20n+0) {
display: inline-block;
animation-duration: 4s;
animation-name: flip-wave-0;
animation-iteration-count: infinite
}
@keyframes flip-wave-1 {
10% {
transform: translate3d(0, -16px, 0) rotate(720deg)
}
15% {
transform: translate3d(0, 0, 0) rotate(720deg)
}
100% {
transform: translate3d(0, 0, 0) rotate(720deg)
}
}
.loading-filp :nth-child(20n+1) {
display: inline-block;
animation-duration: 4s;
animation-name: flip-wave-1;
animation-iteration-count: infinite
}
@keyframes flip-wave-2 {
15% {
transform: translate3d(0, -16px, 0) rotate(720deg)
}
20% {
transform: translate3d(0, 0, 0) rotate(720deg)
}
100% {
transform: translate3d(0, 0, 0) rotate(720deg)
}
}
.loading-filp :nth-child(20n+2) {
display: inline-block;
animation-duration: 4s;
animation-name: flip-wave-2;
animation-iteration-count: infinite
}
@keyframes flip-wave-3 {
20% {
transform: translate3d(0, -16px, 0) rotate(720deg)
}
25% {
transform: translate3d(0, 0, 0) rotate(720deg)
}
100% {
transform: translate3d(0, 0, 0) rotate(720deg)
}
}
.loading-filp :nth-child(20n+3) {
display: inline-block;
animation-duration: 4s;
animation-name: flip-wave-3;
animation-iteration-count: infinite
}
@keyframes flip-wave-4 {
25% {
transform: translate3d(0, -16px, 0) rotate(720deg)
}
30% {
transform: translate3d(0, 0, 0) rotate(720deg)
}
100% {
transform: translate3d(0, 0, 0) rotate(720deg)
}
}
.loading-filp :nth-child(20n+4) {
display: inline-block;
animation-duration: 4s;
animation-name: flip-wave-4;
animation-iteration-count: infinite
}
@keyframes flip-wave-5 {
30% {
transform: translate3d(0, -16px, 0) rotate(720deg)
}
35% {
transform: translate3d(0, 0, 0) rotate(720deg)
}
100% {
transform: translate3d(0, 0, 0) rotate(720deg)
}
}
.loading-filp :nth-child(20n+5) {
display: inline-block;
animation-duration: 4s;
animation-name: flip-wave-5;
animation-iteration-count: infinite
}
@keyframes flip-wave-6 {
35% {
transform: translate3d(0, -16px, 0) rotate(720deg)
}
40% {
transform: translate3d(0, 0, 0) rotate(720deg)
}
100% {
transform: translate3d(0, 0, 0) rotate(720deg)
}
}
.loading-filp :nth-child(20n+6) {
display: inline-block;
animation-duration: 4s;
animation-name: flip-wave-6;
animation-iteration-count: infinite
}
@keyframes flip-wave-7 {
40% {
transform: translate3d(0, -16px, 0) rotate(720deg)
}
45% {
transform: translate3d(0, 0, 0) rotate(720deg)
}
100% {
transform: translate3d(0, 0, 0) rotate(720deg)
}
}
.loading-filp :nth-child(20n+7) {
display: inline-block;
animation-duration: 4s;
animation-name: flip-wave-7;
animation-iteration-count: infinite
}
@keyframes flip-wave-8 {
45% {
transform: translate3d(0, -16px, 0) rotate(720deg)
}
50% {
transform: translate3d(0, 0, 0) rotate(720deg)
}
100% {
transform: translate3d(0, 0, 0) rotate(720deg)
}
}
.loading-filp :nth-child(20n+8) {
display: inline-block;
animation-duration: 4s;
animation-name: flip-wave-8;
animation-iteration-count: infinite
}
@keyframes flip-wave-9 {
50% {
transform: translate3d(0, -16px, 0) rotate(720deg)
}
55% {
transform: translate3d(0, 0, 0) rotate(720deg)
}
100% {
transform: translate3d(0, 0, 0) rotate(720deg)
}
}
.loading-filp :nth-child(20n+9) {
display: inline-block;
animation-duration: 4s;
animation-name: flip-wave-9;
animation-iteration-count: infinite
}
@keyframes flip-wave-10 {
55% {
transform: translate3d(0, -16px, 0) rotate(720deg)
}
60% {
transform: translate3d(0, 0, 0) rotate(720deg)
}
100% {
transform: translate3d(0, 0, 0) rotate(720deg)
}
}
.loading-filp :nth-child(20n+10) {
display: inline-block;
animation-duration: 4s;
animation-name: flip-wave-10;
animation-iteration-count: infinite
}
@keyframes flip-wave-11 {
60% {
transform: translate3d(0, -16px, 0) rotate(720deg)
}
65% {
transform: translate3d(0, 0, 0) rotate(720deg)
}
100% {
transform: translate3d(0, 0, 0) rotate(720deg)
}
}
.loading-filp :nth-child(20n+11) {
display: inline-block;
animation-duration: 4s;
animation-name: flip-wave-11;
animation-iteration-count: infinite
}
@keyframes flip-wave-12 {
65% {
transform: translate3d(0, -16px, 0) rotate(720deg)
}
70% {
transform: translate3d(0, 0, 0) rotate(720deg)
}
100% {
transform: translate3d(0, 0, 0) rotate(720deg)
}
}
.loading-filp :nth-child(20n+12) {
display: inline-block;
animation-duration: 4s;
animation-name: flip-wave-12;
animation-iteration-count: infinite
}
@keyframes flip-wave-13 {
70% {
transform: translate3d(0, -16px, 0) rotate(720deg)
}
75% {
transform: translate3d(0, 0, 0) rotate(720deg)
}
100% {
transform: translate3d(0, 0, 0) rotate(720deg)
}
}
.loading-filp :nth-child(20n+13) {
display: inline-block;
animation-duration: 4s;
animation-name: flip-wave-13;
animation-iteration-count: infinite
}
@keyframes flip-wave-14 {
75% {
transform: translate3d(0, -16px, 0) rotate(720deg)
}
80% {
transform: translate3d(0, 0, 0) rotate(720deg)
}
100% {
transform: translate3d(0, 0, 0) rotate(720deg)
}
}
.loading-filp :nth-child(20n+14) {
display: inline-block;
animation-duration: 4s;
animation-name: flip-wave-14;
animation-iteration-count: infinite
}
@keyframes flip-wave-15 {
80% {
transform: translate3d(0, -16px, 0) rotate(720deg)
}
85% {
transform: translate3d(0, 0, 0) rotate(720deg)
}
100% {
transform: translate3d(0, 0, 0) rotate(720deg)
}
}
.loading-filp :nth-child(20n+15) {
display: inline-block;
animation-duration: 4s;
animation-name: flip-wave-15;
animation-iteration-count: infinite
}
@keyframes flip-wave-16 {
85% {
transform: translate3d(0, -16px, 0) rotate(720deg)
}
90% {
transform: translate3d(0, 0, 0) rotate(720deg)
}
100% {
transform: translate3d(0, 0, 0) rotate(720deg)
}
}
.loading-filp :nth-child(20n+16) {
display: inline-block;
animation-duration: 4s;
animation-name: flip-wave-16;
animation-iteration-count: infinite
}
@keyframes flip-wave-17 {
90% {
transform: translate3d(0, -16px, 0) rotate(720deg)
}
95% {
transform: translate3d(0, 0, 0) rotate(720deg)
}
100% {
transform: translate3d(0, 0, 0) rotate(720deg)
}
}
.loading-filp :nth-child(20n+17) {
display: inline-block;
animation-duration: 4s;
animation-name: flip-wave-17;
animation-iteration-count: infinite
}
@keyframes flip-wave-18 {
95% {
transform: translate3d(0, -16px, 0) rotate(720deg)
}
100% {
transform: translate3d(0, 0, 0) rotate(720deg)
}
100% {
transform: translate3d(0, 0, 0) rotate(720deg)
}
}
.loading-filp :nth-child(20n+18) {
display: inline-block;
animation-duration: 4s;
animation-name: flip-wave-18;
animation-iteration-count: infinite
}
@keyframes flip-wave-19 {
100% {
transform: translate3d(0, -16px, 0) rotate(720deg)
}
105% {
transform: translate3d(0, 0, 0) rotate(720deg)
}
100% {
transform: translate3d(0, 0, 0) rotate(720deg)
}
}
.loading-filp :nth-child(20n+19) {
display: inline-block;
animation-duration: 4s;
animation-name: flip-wave-19;
animation-iteration-count: infinite
}
</style>
</head>
<body>
<div class="nav">
<a href="./loading1.html" >loading1</a>
<a href="./loading2.html" >loading2</a>
<a href="./loading3.html" >loading3</a>
<a href="./loading4.html">loading4</a>
<a href="./loading5.html" class="current">loading5</a>
</div>
<div class="loader-box">
<div class="loader-block">
<div class="loader">
</div>
<div class="loading-text">正在加载中....</div>
</div>
</div>
</body>
<script>
var n = document.getElementsByClassName('loading-text');
var loader = document.getElementsByClassName('loader');
console.log(n)
let className =""
className ="loading-filp"
function getClassName() {
if(className === 'loading-filp'){
n[0].classList.remove('loading-bounce')
}else{
n[0].classList.remove('loading-filp')
}
n[0].classList.add(className)
changeLoading()
}
getClassName()
function changeLoading () {
if(!className) return;
for (var e = 0, t = n.length; e < t; e++) {
var a = n[e],
r = a.textContent.trim();
a.innerHTML = null;
i(a, r)
}
}
function i(n, e) {
for (var t in e) {
var a = document.createElement("span");
a.innerHTML = e[t] === " " ? " " : e[t];
n.appendChild(a)
}
}
</script>
</html>更多推荐
HTML+CSS3 5个炫酷的loading
发布评论