378 lines
7.7 KiB
HTML
378 lines
7.7 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<title>加载loading</title>
|
|
</head>
|
|
|
|
<body style="background:#000; ">
|
|
|
|
<style type="text/css">
|
|
#colorfulPulse {
|
|
width: 200px;
|
|
height: 80px;
|
|
margin:0 auto;
|
|
}
|
|
|
|
#colorfulPulse span {
|
|
display: inline-block;
|
|
width: 10px;
|
|
height: 40px;
|
|
animation-name: scale;
|
|
-webkit-animation-name: scale;
|
|
-moz-animation-name: scale;
|
|
-ms-animation-name: scale;
|
|
-o-animation-name: scale;
|
|
animation-duration: 1.2s;
|
|
-webkit-animation-duration: 1.2s;
|
|
-moz-animation-duration: 1.2s;
|
|
-ms-animation-duration: 1.2s;
|
|
-o-animation-duration: 1.2s;
|
|
animation-iteration-count: infinite;
|
|
-webkit-animation-iteration-count: infinite;
|
|
-moz-animation-iteration-count: infinite;
|
|
-ms-animation-iteration-count: infinite;
|
|
-o-animation-iteration-count: infinite;
|
|
}
|
|
span.item-1 {
|
|
background: #2ecc71;
|
|
}
|
|
span.item-2 {
|
|
background: #3498db;
|
|
}
|
|
span.item-3 {
|
|
background: #9b59b6;
|
|
}
|
|
span.item-4 {
|
|
background: #e67e22;
|
|
}
|
|
span.item-5 {
|
|
background: #c0392b;
|
|
}
|
|
span.item-6 {
|
|
background: #e74c3c;
|
|
}
|
|
span.item-7 {
|
|
background: #e74c8c;
|
|
}
|
|
|
|
.item-1 {
|
|
animation-delay: -1s;
|
|
-webkit-animation-delay: -1s;
|
|
-moz-animation-delay: -1s;
|
|
-ms-animation-delay: -1s;
|
|
-o-animation-delay: -1s;
|
|
}
|
|
|
|
.item-2 {
|
|
animation-delay: -0.9s;
|
|
-webkit-animation-delay: -0.9s;
|
|
-moz-animation-delay: -0.9s;
|
|
-ms-animation-delay: -0.9s;
|
|
-o-animation-delay: -0.9s;
|
|
}
|
|
|
|
.item-3 {
|
|
animation-delay: -0.8s;
|
|
-webkit-animation-delay: -0.8s;
|
|
-moz-animation-delay: -0.8s;
|
|
-ms-animation-delay: -0.8s;
|
|
-o-animation-delay: -0.8s;
|
|
}
|
|
|
|
.item-4 {
|
|
animation-delay: -0.7s;
|
|
-webkit-animation-delay: -0.7s;
|
|
-moz-animation-delay: -0.7s;
|
|
-ms-animation-delay: -0.7s;
|
|
-o-animation-delay: -0.7s;
|
|
}
|
|
|
|
.item-5 {
|
|
animation-delay: -0.6s;
|
|
-webkit-animation-delay: -0.6s;
|
|
-moz-animation-delay: -0.6s;
|
|
-ms-animation-delay: -0.6s;
|
|
-o-animation-delay: -0.6s;
|
|
}
|
|
|
|
.item-6 {
|
|
animation-delay: -0.5s;
|
|
-webkit-animation-delay: -0.5s;
|
|
-moz-animation-delay: -0.5s;
|
|
-ms-animation-delay: -0.5s;
|
|
-o-animation-delay: -0.5s;
|
|
}
|
|
|
|
.item-7 {
|
|
animation-delay: -0.4s;
|
|
-webkit-animation-delay: -0.4s;
|
|
-moz-animation-delay: -0.4s;
|
|
-ms-animation-delay: -0.4s;
|
|
-o-animation-delay: -0.4s;
|
|
}
|
|
|
|
@-webkit-keyframes scale {
|
|
0%, 40%, 100% {
|
|
-moz-transform: scaleY(0.2);
|
|
-ms-transform: scaleY(0.2);
|
|
-o-transform: scaleY(0.2);
|
|
-webkit-transform: scaleY(0.2);
|
|
transform: scaleY(0.2);
|
|
}
|
|
|
|
20%, 60% {
|
|
-moz-transform: scaleY(1);
|
|
-ms-transform: scaleY(1);
|
|
-o-transform: scaleY(1);
|
|
-webkit-transform: scaleY(1);
|
|
transform: scaleY(1);
|
|
}
|
|
}
|
|
@-moz-keyframes scale {
|
|
0%, 40%, 100% {
|
|
-moz-transform: scaleY(0.2);
|
|
-ms-transform: scaleY(0.2);
|
|
-o-transform: scaleY(0.2);
|
|
-webkit-transform: scaleY(0.2);
|
|
transform: scaleY(0.2);
|
|
}
|
|
|
|
20%, 60% {
|
|
-moz-transform: scaleY(1);
|
|
-ms-transform: scaleY(1);
|
|
-o-transform: scaleY(1);
|
|
-webkit-transform: scaleY(1);
|
|
transform: scaleY(1);
|
|
}
|
|
}
|
|
@-ms-keyframes scale {
|
|
0%, 40%, 100% {
|
|
-moz-transform: scaleY(0.2);
|
|
-ms-transform: scaleY(0.2);
|
|
-o-transform: scaleY(0.2);
|
|
-webkit-transform: scaleY(0.2);
|
|
transform: scaleY(0.2);
|
|
}
|
|
|
|
20%, 60% {
|
|
-moz-transform: scaleY(1);
|
|
-ms-transform: scaleY(1);
|
|
-o-transform: scaleY(1);
|
|
-webkit-transform: scaleY(1);
|
|
transform: scaleY(1);
|
|
}
|
|
}
|
|
@keyframes scale {
|
|
0%, 40%, 100% {
|
|
-moz-transform: scaleY(0.2);
|
|
-ms-transform: scaleY(0.2);
|
|
-o-transform: scaleY(0.2);
|
|
-webkit-transform: scaleY(0.2);
|
|
transform: scaleY(0.2);
|
|
}
|
|
|
|
20%, 60% {
|
|
-moz-transform: scaleY(1);
|
|
-ms-transform: scaleY(1);
|
|
-o-transform: scaleY(1);
|
|
-webkit-transform: scaleY(1);
|
|
transform: scaleY(1);
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<div style="height:80px;"></div>
|
|
|
|
<!--colorful pulse-->
|
|
<div id="colorfulPulse">
|
|
<span class="item-1"></span>
|
|
<span class="item-2"></span>
|
|
<span class="item-3"></span>
|
|
<span class="item-4"></span>
|
|
<span class="item-5"></span>
|
|
<span class="item-6"></span>
|
|
<span class="item-7"></span>
|
|
</div>
|
|
|
|
|
|
<style type="text/css">
|
|
@import url(http://fonts.googleapis.com/css?family=Lato:100,300,700);
|
|
#container {
|
|
width: 180px;
|
|
margin:0 auto;
|
|
}
|
|
#container h1 {
|
|
font-family: 'Lato';
|
|
color: white;
|
|
text-transform: uppercase;
|
|
font-size: 1em;
|
|
letter-spacing: 1.5px;
|
|
text-align: center;
|
|
width: 155px;
|
|
margin-top: 20px;
|
|
-webkit-animation: fade 2s infinite;
|
|
-moz-animation: fade 2s infinite;
|
|
}
|
|
|
|
.stick {
|
|
width: 30px;
|
|
height: 3px;
|
|
background: white;
|
|
display: inline-block;
|
|
margin-left: -8px;
|
|
}
|
|
|
|
.stick:nth-child(n) {
|
|
transform: rotate(30deg);
|
|
-ms-transform: rotate(30deg);
|
|
/* IE 9 */
|
|
-webkit-transform: rotate(30deg);
|
|
/* Safari and Chrome */
|
|
-moz-transform: rotate(30deg);
|
|
-webkit-animation: fall 2s infinite;
|
|
-moz-animation: fall 2s infinite;
|
|
}
|
|
|
|
.stick:nth-child(2n) {
|
|
transform: rotate(-30deg);
|
|
-ms-transform: rotate(-30deg);
|
|
/* IE 9 */
|
|
-webkit-transform: rotate(-30deg);
|
|
/* Safari and Chrome */
|
|
-moz-transform: rotate(-30deg);
|
|
-webkit-animation: rise 2s infinite;
|
|
-moz-animation: rise 2s infinite;
|
|
}
|
|
|
|
@-webkit-keyframes rise {
|
|
50% {
|
|
transform: rotate(30deg);
|
|
-ms-transform: rotate(30deg);
|
|
/* IE 9 */
|
|
-webkit-transform: rotate(30deg);
|
|
-moz-transform: rotate(30deg);
|
|
}
|
|
}
|
|
@-moz-keyframes rise {
|
|
50% {
|
|
transform: rotate(30deg);
|
|
-ms-transform: rotate(30deg);
|
|
/* IE 9 */
|
|
-webkit-transform: rotate(30deg);
|
|
-moz-transform: rotate(30deg);
|
|
}
|
|
}
|
|
@-o-keyframes rise {
|
|
50% {
|
|
transform: rotate(30deg);
|
|
-ms-transform: rotate(30deg);
|
|
/* IE 9 */
|
|
-webkit-transform: rotate(30deg);
|
|
-moz-transform: rotate(30deg);
|
|
}
|
|
|
|
@keyframes rise {
|
|
50% {
|
|
transform: rotate(30deg);
|
|
-ms-transform: rotate(30deg);
|
|
/* IE 9 */
|
|
-webkit-transform: rotate(30deg);
|
|
-moz-transform: rotate(30deg);
|
|
}
|
|
}
|
|
}
|
|
@-webkit-keyframes fall {
|
|
50% {
|
|
transform: rotate(-30deg);
|
|
-ms-transform: rotate(-30deg);
|
|
/* IE 9 */
|
|
-webkit-transform: rotate(-30deg);
|
|
-moz-transform: rotate(30deg);
|
|
}
|
|
}
|
|
@-moz-keyframes fall {
|
|
50% {
|
|
transform: rotate(-30deg);
|
|
-ms-transform: rotate(-30deg);
|
|
/* IE 9 */
|
|
-webkit-transform: rotate(-30deg);
|
|
-moz-transform: rotate(-30deg);
|
|
}
|
|
}
|
|
@-o-keyframes fall {
|
|
50% {
|
|
transform: rotate(-30deg);
|
|
-ms-transform: rotate(-30deg);
|
|
/* IE 9 */
|
|
-webkit-transform: rotate(-30deg);
|
|
-moz-transform: rotate(30deg);
|
|
}
|
|
|
|
@keyframes fall {
|
|
50% {
|
|
transform: rotate(-30deg);
|
|
-ms-transform: rotate(-30deg);
|
|
/* IE 9 */
|
|
-webkit-transform: rotate(-30deg);
|
|
-moz-transform: rotate(30deg);
|
|
}
|
|
}
|
|
}
|
|
@-webkit-keyframes fade {
|
|
50% {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
@-moz-keyframes fade {
|
|
50% {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
@-o-keyframes fade {
|
|
50% {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
|
|
@keyframes fade {
|
|
50% {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<div style="height:80px;"></div>
|
|
|
|
<!--pulse wave-->
|
|
<div id="container">
|
|
<div class="stick"></div>
|
|
<div class="stick"></div>
|
|
<div class="stick"></div>
|
|
<div class="stick"></div>
|
|
<div class="stick"></div>
|
|
<div class="stick"></div>
|
|
|
|
<h1>Loading...</h1>
|
|
|
|
</div>
|
|
|
|
|
|
</body>
|
|
</html> |