1、
<style>
.loading-content {
display: flex;
justify-content: center;
}
.loading-dot {
20px;
height: 20px;
background: #8385aa;
border-radius: 50%;
margin: 250px 10px;
animation: bouncing-animate 0.6s infinite alternate;
}
.loading-dot:nth-child(2) {
animation-delay: 0.2s;
}
.loading-dot:nth-child(3) {
animation-delay: 0.4s;
}
@keyframes bouncing-animate {
to {
opacity: 0.1;
transform: translate3d(0, -50px, 0);
}
}
</style>
</head>
<body>
<div class="loading-content">
<div class="loading-dot"></div>
<div class="loading-dot"></div>
<div class="loading-dot"></div>
</div>
效果如下
2、
<style>
.donut {
30px;
height: 30px;
border-radius: 50%;
border: 4px solid rgba(0, 0, 0, 0.1);
margin: 30px;
border-left-color: #7983ff;
animation: donut-spin 1.2s linear infinite;
}
@keyframes donut-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="donut"></div>
</body>
效果如下：
3、
<style>
.donut {
30px;
height: 30px;
border-radius: 50%;
border: 4px solid rgba(0, 0, 0, 0.1);
margin: 30px;
border-left-color: #7983ff;
animation: donut-spin 1.2s linear infinite;
}
@keyframes donut-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="donut"></div>
</body>
效果如下：
4、
<style>
#loading {
/* background-color: #cf4a30; */
background-color: #0f0f0f;
height: 100%;
100%;
position: fixed;
z-index: 1;
margin-top: 0px;
top: 0px;
}
#loading-center {
100%;
height: 100%;
position: relative;
}
#loading-center-absolute {
position: absolute;
left: 50%;
top: 50%;
height: 60px;
60px;
margin-top: -30px;
margin-left: -30px;
-webkit-animation: loading-center-absolute 1s infinite;
animation: loading-center-absolute 1s infinite;
}
.object {
20px;
height: 20px;
background-color: #FFF;
float: left;
-moz-border-radius: 50% 50% 50% 50%;
-webkit-border-radius: 50% 50% 50% 50%;
border-radius: 50% 50% 50% 50%;
margin-right: 20px;
margin-bottom: 20px;
}
.object:nth-child(2n+0) {
margin-right: 0px;
}
#object_one {
-webkit-animation: object_one 1s infinite;
animation: object_one 1s infinite;
}
#object_two {
-webkit-animation: object_two 1s infinite;
animation: object_two 1s infinite;
}
#object_three {
-webkit-animation: object_three 1s infinite;
animation: object_three 1s infinite;
}
#object_four {
-webkit-animation: object_four 1s infinite;
animation: object_four 1s infinite;
}
@-webkit-keyframes loading-center-absolute {
100% {
-ms-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes loading-center-absolute {
100% {
-ms-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes object_one {
50% {
-ms-transform: translate(20px, 20px);
-webkit-transform: translate(20px, 20px);
transform: translate(20px, 20px);
}
}
@keyframes object_one {
50% {
-ms-transform: translate(20px, 20px);
-webkit-transform: translate(20px, 20px);
transform: translate(20px, 20px);
}
}
@-webkit-keyframes object_two {
50% {
-ms-transform: translate(-20px, 20px);
-webkit-transform: translate(-20px, 20px);
transform: translate(-20px, 20px);
}
}
@keyframes object_two {
50% {
-ms-transform: translate(-20px, 20px);
-webkit-transform: translate(-20px, 20px);
transform: translate(-20px, 20px);
}
}
@-webkit-keyframes object_three {
50% {
-ms-transform: translate(20px, -20px);
-webkit-transform: translate(20px, -20px);
transform: translate(20px, -20px);
}
}
@keyframes object_three {
50% {
-ms-transform: translate(20px, -20px);
-webkit-transform: translate(20px, -20px);
transform: translate(20px, -20px);
}
}
@-webkit-keyframes object_four {
50% {
-ms-transform: translate(-20px, -20px);
-webkit-transform: translate(-20px, -20px);
transform: translate(-20px, -20px);
}
}
@keyframes object_four {
50% {
-ms-transform: translate(-20px, -20px);
-webkit-transform: translate(-20px, -20px);
transform: translate(-20px, -20px);
}
}
</style>
</head>
<body>
<div id="loading">
<div id="loading-center">
<div id="loading-center-absolute">
<div class="object" id="object_one"></div>
<div class="object" id="object_two"></div>
<div class="object" id="object_three"></div>
<div class="object" id="object_four"></div>
</div>
</div>
</div>
</body>
效果如下：
