1. 第一种
html 代码
- <!DOCTYPE html>
- <html>
- <head>
- <title>loading</title>
- <style type="text/CSS">
- .loadingTip {
- position: fixed;
- top:50%;
- left: 50%;
- -webkit-transform:translate3d(-50%,-50%,0);
- z-index: 10001;
- }
- .loadingTip div {
- background-color: #000;
- width: 15px;
- height: 15px;
- border-radius: 100%;
- margin: 2px;
- -webkit-animation-fill-mode: both;
- animation-fill-mode: both;
- position: absolute;
- }
- @-webkit-keyframes loading {
- 50% {
- opacity: 0.3;
- -webkit-transform: scale(0.4);
- transform: scale(0.4);
- }
- 100% {
- opacity: 1;
- -webkit-transform: scale(1);
- transform: scale(1);
- }
- }
- .loadingTip> div:nth-child(1) {
- top: 25px;
- left: 0;
- -webkit-animation: loading 1s 0s infinite linear;
- animation: loading 1s 0s infinite linear;
- }
- .loadingTip> div:nth-child(2) {
- top: 17.04545px;
- left: 17.04545px;
- -webkit-animation: loading 1s 0.12s infinite linear;
- animation: loading 1s 0.12s infinite linear;
- }
- .loadingTip> div:nth-child(3) {
- top: 0;
- left: 25px;
- -webkit-animation: loading 1s 0.24s infinite linear;
- animation: loading 1s 0.24s infinite linear;
- }
- .loadingTip> div:nth-child(4) {
- top: -17.04545px;
- left: 17.04545px;
- -webkit-animation: loading 1s 0.36s infinite linear;
- animation: loading 1s 0.36s infinite linear;
- }
- .loadingTip> div:nth-child(5) {
- top: -25px;
- left: 0;
- -webkit-animation: loading 1s 0.48s infinite linear;
- animation: loading 1s 0.48s infinite linear;
- }
- .loadingTip> div:nth-child(6) {
- top: -17.04545px;
- left: -17.04545px;
- -webkit-animation: loading 1s 0.6s infinite linear;
- animation: loading 1s 0.6s infinite linear;
- }
- .loadingTip> div:nth-child(7) {
- top: 0;
- left: -25px;
- -webkit-animation: loading 1s 0.72s infinite linear;
- animation: loading 1s 0.72s infinite linear;
- }
- .loadingTip> div:nth-child(8) {
- top: 17.04545px;
- left: -17.04545px;
- -webkit-animation: loading 1s 0.84s infinite linear;
- animation: loading 1s 0.84s infinite linear;
- }
- </style>
- </head>
- <body>
- <div class="loadingTip">
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- </div>
- </body>
- </html>
2. 第二种
html 代码
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>loading</title>
- <style type="text/css">
- .loading {
- position: fixed;
- top:50%;
- left: 50%;
- -webkit-transform:translate3d(-50%,-50%,0);
- z-index: 10001;
- }
- .loading> div {
- background-color: #0091ff;
- width: 15px;
- height: 15px;
- border-radius: 100%;
- margin: 2px;
- -webkit-animation-fill-mode: both;
- animation-fill-mode: both;
- display: inline-block;
- }
- .loading> div:nth-child(1) {
- -webkit-animation: scale 0.75s 0.12s infinite cubic-bezier(.2, .68, .18, 1.08);
- animation: scale 0.75s 0.12s infinite cubic-bezier(.2, .68, .18, 1.08);
- }
- .loading> div:nth-child(2) {
- -webkit-animation: scale 0.75s 0.24s infinite cubic-bezier(.2, .68, .18, 1.08);
- animation: scale 0.75s 0.24s infinite cubic-bezier(.2, .68, .18, 1.08);
- }
- .loading> div:nth-child(3) {
- -webkit-animation: scale 0.75s 0.36s infinite cubic-bezier(.2, .68, .18, 1.08);
- animation: scale 0.75s 0.36s infinite cubic-bezier(.2, .68, .18, 1.08);
- }
- @-webkit-keyframes scale {
- 0% {
- -webkit-transform: scale(1);
- transform: scale(1);
- opacity: 1;
- }
- 45% {
- -webkit-transform: scale(0.1);
- transform: scale(0.1);
- opacity: 0.7;
- }
- 80% {
- -webkit-transform: scale(1);
- transform: scale(1);
- opacity: 1;
- }
- }
- </style>
- </head>
- <body>
- <div class="loading">
- <div></div>
- <div></div>
- <div></div>
- </div>
- </body>
- </html>
3. 第 3 种
html 代码
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>loading</title>
- <style type="text/css">
- .box {
- width: 100px;
- height: 100px;
- position: fixed;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- margin: auto;
- animation: boxRotate 2.2s linear infinite;
- }
- .circle {
- width: 40px;
- height: 40px;
- position: absolute;
- border-radius: 50%;
- margin: auto;
- }
- .circle1 {
- top: 0;
- left: 0;
- right: 0;
- background-color: red;
- animation: circleY 2.2s linear infinite;
- }
- .circle2 {
- right: 0;
- top: 0;
- bottom: 0;
- background-color: yellow;
- animation: circleX 2.2s linear infinite;
- }
- .circle3 {
- left: 0;
- bottom: 0;
- right: 0;
- background-color: blue;
- animation: circleY 2.2s linear infinite;
- }
- .circle4 {
- left: 0;
- bottom: 0;
- top: 0;
- background-color: green;
- animation: circleX 2.2s linear infinite;
- }
- @keyframes boxRotate {
- 0% {
- transform: rotate(0deg);
- }
- 60% {
- width: 40px;
- height: 40px;
- }
- 100% {
- transform: rotate(360deg);
- width: 100px;
- height: 100px;
- }
- }
- @keyframes circleX {
- 60% {
- opacity: 0.1;
- /*transform: rotateY(0deg);*/
- width: 40px;
- }
- 70% {
- opacity: 1;
- width: 0;
- /*transform: rotateY(180deg);*/
- }
- }
- @keyframes circleY {
- 60% {
- opacity: 0.1;
- height: 40px;
- }
- 70% {
- opacity: 1;
- height: 0;
- }
- }
- </style>
- </head>
- <body>
- <div class="box">
- <div class="circle circle1"></div>
- <div class="circle circle2"></div>
- <div class="circle circle3"></div>
- <div class="circle circle4"></div>
- </div>
- </body>
- </html>
来源: http://www.qdfuns.com/article/44455/1ac1603ca5b0b9559ce0c96c5a15d966.html