loading(正在加载特效)
<!DOCTYPE html>
<html> <head lang="en">
<meta charset="UTF-8">
<script type="text/javascript" src="js/jquery-2.2.2.min.js"></script>
<title></title>
<script type="text/javascript">
$(function() { /**
* Created by Administrator on 2015/3/20.
*/ //载入中
document.onreadystatechange = subSomething; function subSomething() {
if(document.readyState == "complete") {
Mopload();
}
} function initevent() {
jQuery.event.add();
}
//获取随机数
function getRandom(n) {
return Math.floor(Math.random() * n + 1)
} function addfourstlye(obj, name, value) {
var four_list = ["-webkit-", "-moz-", "-o-", ""];
for(var i = 0; i < four_list.length; i++) {
obj.css(four_list[i] + name, value);
}
} function Mopload() {
var load_name_list = ["rotating-plane", "double-bounce", "wave", "wandering-cubes", "pulse", "chasing-dots", "three-bounce", "circle", "cube-grid", "run-ball", "fading-circle"];
var default_load = "rotating-plane";
var default_index = 0;
$("[class^=mop-load]").each(function(index) {
var _mop_html = $(this).html().trim();
var _mop_class = $(this).attr("class");
var _temp = _mop_class.split("mop-load-");
if(_temp.length < 2) {
return;
}
var arr = '<div class="mop-load-div">';
if(_temp[1].trim() * 1 < load_name_list.length) {
arr += '<div class="mop-css-' + _temp[1].trim() + '">'
} else if(_temp[1].trim() == "x") {
arr += '<div class="mop-css-x">';
} else {
return;
}
if(_mop_html == "") {
_mop_html = "Loading……"
} else {
$(this).html(_mop_html);
}
arr += '</div><div class="mop-load-text" >' + _mop_html + '</div></div>';
$(this).html(arr);
//addfourstlye($(this),"transition","height 2s linear 0s;");
$(this).css("text-align", "center");
//$(this).find(".mop-load-div").hide();
})
$("[class^=mop-css]").each(function(index) {
var _mop_class = $(this).attr("class");
var _temp = _mop_class.split("mop-css-");
if(_temp == "mop-css") {
$(this).addClass(default_load);
}
if(_temp[1].trim() == "x") {
var rand = getRandom(load_name_list.length - 1);
$(this).addClass(load_name_list[rand]);
} else if(_temp[1] * 1 < load_name_list.length) {
$(this).addClass(load_name_list[_temp[1]]);
} else {
return;
}
});
$(".double-bounce").each(function(index) {
var arr = '<div class="double-bounce1"></div><div class="double-bounce2"></div>';
$(this).append(arr);
});
$(".wave").each(function(index) {
var arr = '<div class = "rect1" ></div><div class = "rect2" ></div><div class = "rect3" ></div><div class = "rect4" ></div><div class = "rect5" ></div>';
$(this).append(arr);
});
$(".wandering-cubes").each(function(index) {
var arr = '<div class="cube1"></div><div class="cube2"></div>';
$(this).append(arr);
});
$(".chasing-dots").each(function(index) {
var arr = '<div class="dot1"></div><div class="dot2"></div>';
$(this).append(arr);
});
$(".three-bounce").each(function(index) {
var arr = '<div class="bounce1"></div><div class="bounce2"></div><div class="bounce3"></div>';
$(this).append(arr);
});
$(".circle").each(function(index) {
var arr = '<div class="spinner-container container1"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div><div class="circle4"></div></div>';
arr += '<div class="spinner-container container2"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div><div class="circle4"></div></div>';
arr += '<div class="spinner-container container3"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div><div class="circle4"></div></div>'
$(this).append(arr);
});
$(".cube-grid").each(function(index) {
var arr = '<div class="sk-cube"></div><div class="sk-cube"></div><div class="sk-cube"></div><div class="sk-cube"></div><div class="sk-cube"></div><div class="sk-cube"></div><div class="sk-cube"></div><div class="sk-cube"></div><div class="sk-cube"></div>';
$(this).append(arr);
});
$(".run-ball").each(function(index) {
var arr = '<span class="sk-inner-circle"></span>';
$(this).append(arr);
});
$(".fading-circle").each(function(index) {
var arr = '<div class="sk-circle1 sk-circle"></div><div class="sk-circle2 sk-circle"></div><div class="sk-circle3 sk-circle"></div><div class="sk-circle4 sk-circle"></div><div class="sk-circle5 sk-circle"></div><div class="sk-circle6 sk-circle"></div>';
arr += '<div class="sk-circle7 sk-circle"></div><div class="sk-circle8 sk-circle"></div><div class="sk-circle9 sk-circle"></div><div class="sk-circle10 sk-circle"></div><div class="sk-circle11 sk-circle"></div><div class="sk-circle12 sk-circle"></div>';
$(this).append(arr);
});
}
})
</script>
<style>
body {
text-align: center;
} label {
color: red;
}
/***************************************************/ .rotating-plane {
min-width: 60px;
min-height: 60px;
width: 60px;
height: 60px;
background-color: #67CF22;
-webkit-animation: rotateplane 1.2s infinite ease-in-out;
-moz-animation: rotateplane 1.2s infinite ease-in-out;
-o-animation: rotateplane 1.2s infinite ease-in-out;
animation: rotateplane 1.2s infinite ease-in-out;
} @-webkit-keyframes rotateplane {
0% {
-webkit-transform: perspective( 120px)
}
50% {
-webkit-transform: perspective( 120px) rotateY( 180deg)
}
100% {
-webkit-transform: perspective( 120px) rotateY( 180deg) rotateX( 180deg)
}
} @-moz-keyframes rotateplane {
0% {
-moz-transform: perspective( 120px)
}
50% {
-moz-transform: perspective( 120px) rotateY( 180deg)
}
100% {
-moz-transform: perspective( 120px) rotateY( 180deg) rotateX( 180deg)
}
} @-o-keyframes rotateplane {
0% {
-o-transform: perspective( 120px)
}
50% {
-o-transform: perspective( 120px) rotateY( 180deg)
}
100% {
-o-transform: perspective( 120px) rotateY( 180deg) rotateX( 180deg)
}
} @keyframes rotateplane {
0% {
transform: perspective( 120px) rotateX( 0deg) rotateY( 0deg);
}
50% {
transform: perspective( 120px) rotateX( -180.1deg) rotateY( 0deg);
}
100% {
transform: perspective( 120px) rotateX( -180deg) rotateY( -179.9deg);
}
}
/*
双反弹圆效果
*/ .double-bounce {
min-width: 60px;
min-height: 60px;
position: relative;
} .double-bounce1,
.double-bounce2 {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #67CF22;
opacity: 0.6;
position: absolute;
top: 0;
left: 0;
-webkit-animation: bounce 2.0s infinite ease-in-out;
-moz-animation: bounce 2.0s infinite ease-in-out;
-o-animation: bounce 2.0s infinite ease-in-out;
animation: bounce 2.0s infinite ease-in-out;
} .double-bounce2 {
-webkit-animation-delay: -1.0s;
-moz-animation-delay: -1.0s;
-o-animation-delay: -1.0s;
animation-delay: -1.0s;
} @-webkit-keyframes bounce {
0%,
100% {
-webkit-transform: scale(0.0)
}
50% {
-webkit-transform: scale(1.0)
}
} @-moz-keyframes bounce {
0%,
100% {
-moz-transform: scale(0.0)
}
50% {
-moz-transform: scale(1.0)
}
} @-o-keyframes bounce {
0%,
100% {
-o-transform: scale(0.0)
}
50% {
-o-transform: scale(1.0)
}
} @keyframes bounce {
0%,
100% {
transform: scale(0.0);
}
50% {
transform: scale(1.0);
}
}
/*
波纹效果
*/ .wave {
min-width: 60px;
min-height: 60px;
width: 60px;
height: 60px;
} .wave> div {
background-color: #67CF22;
min-height: 60px;
height: 100%;
width: 10%;
margin-left: 10%;
display: inline-block;
-webkit-animation: stretchdelay 1.2s infinite ease-in-out;
-moz-animation: stretchdelay 1.2s infinite ease-in-out;
-o-animation: stretchdelay 1.2s infinite ease-in-out;
animation: stretchdelay 1.2s infinite ease-in-out;
} .wave .rect2 {
-webkit-animation-delay: -1.1s;
-moz-animation-delay: -1.1s;
-o-animation-delay: -1.1s;
animation-delay: -1.1s;
} .wave .rect3 {
-webkit-animation-delay: -1.0s;
-moz-animation-delay: -1.0s;
-o-animation-delay: -1.0s;
animation-delay: -1.0s;
} .wave .rect4 {
-webkit-animation-delay: -0.9s;
-moz-animation-delay: -0.9s;
-o-animation-delay: -0.9s;
animation-delay: -0.9s;
} .wave .rect5 {
-webkit-animation-delay: -0.8s;
-moz-animation-delay: -0.8s;
-o-animation-delay: -0.8s;
animation-delay: -0.8s;
} @-webkit-keyframes stretchdelay {
0%,
40%,
100% {
-webkit-transform: scaleY( 0.4)
}
20% {
-webkit-transform: scaleY( 1.0)
}
} @-moz-keyframes stretchdelay {
0%,
40%,
100% {
-moz-transform: scaleY( 0.4)
}
20% {
-moz-transform: scaleY( 1.0)
}
} @-o-keyframes stretchdelay {
0%,
40%,
100% {
-o-transform: scaleY( 0.4)
}
20% {
-o-transform: scaleY( 1.0)
}
} @keyframes stretchdelay {
0%,
40%,
100% {
transform: scaleY( 0.4);
}
20% {
transform: scaleY( 1.0);
}
}
/*
旋转立方体效果
*/ .wandering-cubes {
min-width: 60px;
min-height: 60px;
position: relative;
} .cube1,
.cube2 {
background-color: #67CF22;
width: 50%;
height: 50%;
position: absolute;
top: 0;
left: 0;
-webkit-animation: cubemove 1.8s infinite ease-in-out;
-moz-animation: cubemove 1.8s infinite ease-in-out;
-o-animation: cubemove 1.8s infinite ease-in-out;
animation: cubemove 1.8s infinite ease-in-out;
} .cube2 {
-webkit-animation-delay: -0.9s;
-moz-animation-delay: -0.9s;
-o-animation-delay: -0.9s;
animation-delay: -0.9s;
} @-webkit-keyframes cubemove {
25% {
-webkit-transform: translateX(42px) rotate(-90deg) scale(0.5)
}
50% {
-webkit-transform: translateX(42px) translateY(42px) rotate(-180deg)
}
75% {
-webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5)
}
100% {
-webkit-transform: rotate(-360deg)
}
} @-moz-keyframes cubemove {
25% {
-moz-transform: translateX(42px) rotate(-90deg) scale(0.5)
}
50% {
-moz-transform: translateX(42px) translateY(42px) rotate(-180deg)
}
75% {
-moz-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5)
}
100% {
-moz-transform: rotate(-360deg)
}
} @-o-keyframes cubemove {
25% {
-o-transform: translateX(42px) rotate(-90deg) scale(0.5)
}
50% {
-o-transform: translateX(42px) translateY(42px) rotate(-180deg)
}
75% {
-o-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5)
}
100% {
-o-transform: rotate(-360deg)
}
} @keyframes cubemove {
25% {
transform: translateX(42px) rotate(-90deg) scale(0.5);
}
50% {
transform: translateX(42px) translateY(42px) rotate(-180deg);
}
75% {
transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
}
100% {
transform: rotate(-360deg);
}
}
/*
脉冲效果
*/ .pulse {
min-width: 60px;
min-height: 60px;
background-color: #67CF22;
border-radius: 100%;
-webkit-animation: scaleout 1.0s infinite ease-in-out;
-moz-animation: scaleout 1.0s infinite ease-in-out;
-o-animation: scaleout 1.0s infinite ease-in-out;
animation: scaleout 1.0s infinite ease-in-out;
} @-webkit-keyframes scaleout {
0% {
-webkit-transform: scale(0.0)
}
100% {
-webkit-transform: scale(1.0);
opacity: 0;
}
} @-moz-keyframes scaleout {
0% {
-moz-transform: scale(0.0)
}
100% {
-moz-transform: scale(1.0);
opacity: 0;
}
} @-o-keyframes scaleout {
0% {
-o-transform: scale(0.0)
}
100% {
-o-transform: scale(1.0);
opacity: 0;
}
} @keyframes scaleout {
0% {
transform: scale(0.0);
}
100% {
transform: scale(1.0);
opacity: 0;
}
}
/*
追逐点效果
*/ .chasing-dots {
min-width: 60px;
min-height: 60px;
position: relative;
text-align: center;
-webkit-animation: rotate 2.0s infinite linear;
-moz-animation: rotate 2.0s infinite linear;
-o-animation: rotate 2.0s infinite linear;
animation: rotate 2.0s infinite linear;
} .dot1,
.dot2 {
width: 50%;
height: 50%;
display: inline-block;
position: absolute;
top: 0;
background-color: #67CF22;
border-radius: 100%;
-webkit-animation: bounce 2.0s infinite ease-in-out;
-moz-animation: bounce 2.0s infinite ease-in-out;
-o-animation: bounce 2.0s infinite ease-in-out;
animation: bounce 2.0s infinite ease-in-out;
} .dot2 {
top: auto;
bottom: 0px;
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
} @-webkit-keyframes rotate {
100% {
-webkit-transform: rotate(360deg)
}
} @-moz-keyframes rotate {
100% {
-moz-transform: rotate(360deg)
}
} @-o-keyframes rotate {
100% {
-o-transform: rotate(360deg)
}
} @keyframes rotate {
100% {
transform: rotate(360deg);
}
} @-webkit-keyframes bounce {
0%,
100% {
-webkit-transform: scale(0.0)
}
50% {
-webkit-transform: scale(1.0)
}
} @-moz-keyframes bounce {
0%,
100% {
-moz-transform: scale(0.0)
}
50% {
-moz-transform: scale(1.0)
}
} @-o-keyframes bounce {
0%,
100% {
-o-transform: scale(0.0)
}
50% {
-o-transform: scale(1.0)
}
} @keyframes bounce {
0%,
100% {
transform: scale(0.0);
}
50% {
transform: scale(1.0);
}
}
/*
三反弹球
*/ .three-bounce {
min-width: 90px;
min-height: 60px;
text-align: center;
display: -moz-box;
-moz-box-pack: center;
-moz-box-align: center;
/* Safari、Opera 以及 Chrome */
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
-o-box-pack: center;
-o-box-align: center;
} .three-bounce> div {
width: 30%;
height: 30%;
min-height: 30px;
min-width: 30px;
background-color: #67CF22;
border-radius: 100%;
display: inline-block;
-webkit-animation: bouncedelay 1.4s infinite ease-in-out;
-moz-animation: bouncedelay 1.4s infinite ease-in-out;
-o-animation: bouncedelay 1.4s infinite ease-in-out;
animation: bouncedelay 1.4s infinite ease-in-out;
/* 防止动画第一帧开始闪烁*/
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
} .three-bounce .bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
} .three-bounce .bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
} @-webkit-keyframes bouncedelay {
0%,
80%,
100% {
-webkit-transform: scale(0.0)
}
40% {
-webkit-transform: scale(1.0)
}
} @-moz-keyframes bouncedelay {
0%,
80%,
100% {
-moz-transform: scale(0.0)
}
40% {
-moz-transform: scale(1.0)
}
} @-o-keyframes bouncedelay {
0%,
80%,
100% {
-o-transform: scale(0.0)
}
40% {
-o-transform: scale(1.0)
}
} @keyframes bouncedelay {
0%,
80%,
100% {
transform: scale(0.0);
}
40% {
transform: scale(1.0);
}
}
/*
缓存追逐球
*/ .circle {
min-width: 60px;
min-height: 60px;
position: relative;
} .container1> div,
.container2> div,
.container3> div {
width: 20%;
height: 20%;
background-color: #67CF22;
border-radius: 100%;
position: absolute;
-webkit-animation: bouncedelay 1.2s infinite ease-in-out;
-moz-animation: bouncedelay 1.2s infinite ease-in-out;
-o-animation: bouncedelay 1.2s infinite ease-in-out;
animation: bouncedelay 1.2s infinite ease-in-out;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
} .circle .spinner-container {
position: absolute;
width: 100%;
height: 100%;
} .container2 {
-webkit-transform: rotateZ(45deg);
-moz-transform: rotateZ(45deg);
-o-transform: rotateZ(45deg);
transform: rotateZ(45deg);
} .container3 {
-webkit-transform: rotateZ(90deg);
-moz-transform: rotateZ(90deg);
-o-transform: rotateZ(90deg);
transform: rotateZ(90deg);
} .circle1 {
top: 0;
left: 0;
} .circle2 {
top: 0;
right: 0;
} .circle3 {
right: 0;
bottom: 0;
} .circle4 {
left: 0;
bottom: 0;
} .container2 .circle1 {
-webkit-animation-delay: -1.1s;
-moz-animation-delay: -1.1s;
-o-animation-delay: -1.1s;
animation-delay: -1.1s;
} .container3 .circle1 {
-webkit-animation-delay: -1.0s;
-moz-animation-delay: -1.0s;
-o-animation-delay: -1.0s;
animation-delay: -1.0s;
} .container1 .circle2 {
-webkit-animation-delay: -0.9s;
-moz-animation-delay: -0.9s;
-o-animation-delay: -0.9s;
animation-delay: -0.9s;
} .container2 .circle2 {
-webkit-animation-delay: -0.8s;
-moz-animation-delay: -0.8s;
-o-animation-delay: -0.8s;
animation-delay: -0.8s;
} .container3 .circle2 {
-webkit-animation-delay: -0.7s;
-moz-animation-delay: -0.7s;
-o-animation-delay: -0.7s;
animation-delay: -0.7s;
} .container1 .circle3 {
-webkit-animation-delay: -0.6s;
-moz-animation-delay: -0.6s;
-o-animation-delay: -0.6s;
animation-delay: -0.6s;
} .container2 .circle3 {
-webkit-animation-delay: -0.5s;
-moz-animation-delay: -0.5s;
-o-animation-delay: -0.5s;
animation-delay: -0.5s;
} .container3 .circle3 {
-webkit-animation-delay: -0.4s;
-moz-animation-delay: -0.4s;
-o-animation-delay: -0.4s;
animation-delay: -0.4s;
} .container1 .circle4 {
-webkit-animation-delay: -0.3s;
-moz-animation-delay: -0.3s;
-o-animation-delay: -0.3s;
animation-delay: -0.3s;
} .container2 .circle4 {
-webkit-animation-delay: -0.2s;
-moz-animation-delay: -0.2s;
-o-animation-delay: -0.2s;
animation-delay: -0.2s;
} .container3 .circle4 {
-webkit-animation-delay: -0.1s;
-moz-animation-delay: -0.1s;
-o-animation-delay: -0.1s;
animation-delay: -0.1s;
}
/*
舞动的方块效果
*/
/*
* Spinner positions
* 1 2 3
* 4 5 6
* 7 8 9
*/ .cube-grid {
min-width: 60px;
min-height: 60px;
width: 60px;
height: 60px;
} .cube-grid .sk-cube {
width: 33%;
height: 33%;
min-width: 20px;
min-height: 20px;
background-color: #67CF22;
float: left;
-webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
-moz-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
-o-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
} .cube-grid .sk-cube:nth-child(1) {
-webkit-animation-delay: 0.2s;
-moz-animation-delay: 0.2s;
-o-animation-delay: 0.2s;
animation-delay: 0.2s;
} .cube-grid .sk-cube:nth-child(2) {
-webkit-animation-delay: 0.3s;
-moz-animation-delay: 0.3s;
-o-animation-delay: 0.3s;
animation-delay: 0.3s;
} .cube-grid .sk-cube:nth-child(3) {
-webkit-animation-delay: 0.4s;
-moz-animation-delay: 0.4s;
-o-animation-delay: 0.4s;
animation-delay: 0.4s;
} .cube-grid .sk-cube:nth-child(4) {
-webkit-animation-delay: 0.1s;
-moz-animation-delay: 0.1s;
-o-animation-delay: 0.1s;
animation-delay: 0.1s;
} .cube-grid .sk-cube:nth-child(5) {
-webkit-animation-delay: 0.2s;
-moz-animation-delay: 0.2s;
-o-animation-delay: 0.2s;
animation-delay: 0.2s;
} .cube-grid .sk-cube:nth-child(6) {
-webkit-animation-delay: 0.3s;
-moz-animation-delay: 0.3s;
-o-animation-delay: 0.3s;
animation-delay: 0.3s;
} .cube-grid .sk-cube:nth-child(7) {
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-o-animation-delay: 0s;
animation-delay: 0s;
} .cube-grid .sk-cube:nth-child(8) {
-webkit-animation-delay: 0.1s;
-moz-animation-delay: 0.1s;
-o-animation-delay: 0.1s;
animation-delay: 0.1s;
} .cube-grid .sk-cube:nth-child(9) {
-webkit-animation-delay: 0.2s;
-moz-animation-delay: 0.2s;
-o-animation-delay: 0.2s;
animation-delay: 0.2s;
} @-webkit-keyframes sk-cubeGridScaleDelay {
0%,
70%,
100% {
-webkit-transform: scale3D(1, 1, 1);
}
35% {
-webkit-transform: scale3D(0, 0, 1);
}
} @-moz-keyframes sk-cubeGridScaleDelay {
0%,
70%,
100% {
moz-transform: scale3D(1, 1, 1);
}
35% {
-moz-transform: scale3D(0, 0, 1);
}
} @-o-keyframes sk-cubeGridScaleDelay {
0%,
70%,
100% {
-o-transform: scale3D(1, 1, 1);
}
35% {
-o-transform: scale3D(0, 0, 1);
}
} @keyframes sk-cubeGridScaleDelay {
0%,
70%,
100% {
transform: scale3D(1, 1, 1);
}
35% {
transform: scale3D(0, 0, 1);
}
}
/*
运动的球效果
*/ .run-ball {
background-color: #67CF22;
width: 60px;
height: 60px;
border-radius: 100%;
position: relative;
-webkit-animation: sk-innerCircle 1s linear infinite;
-moz-animation: sk-innerCircle 1s linear infinite;
-o-animation: sk-innerCircle 1s linear infinite;
animation: sk-innerCircle 1s linear infinite;
} .run-ball .sk-inner-circle {
display: block;
background-color: #fff;
width: 25%;
height: 25%;
position: absolute;
border-radius: 100%;
top: 5px;
left: 5px;
} @-webkit-keyframes sk-innerCircle {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
} @-moz-keyframes sk-innerCircle {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
}
} @-o-keyframes sk-innerCircle {
0% {
-o-transform: rotate(0deg);
}
100% {
-o-transform: rotate(360deg);
}
} @keyframes sk-innerCircle {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/*
虚落球效果
*/ .fading-circle {
min-width: 60px;
min-height: 60px;
position: relative;
} .sk-circle {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
} .sk-circle:before {
content: '';
display: block;
margin: 0 auto;
width: 18%;
height: 18%;
background-color: #67CF22;
border-radius: 100%;
-webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out;
-moz-animation: sk-circleFadeDelay 1.2s infinite ease-in-out;
-o-animation: sk-circleFadeDelay 1.2s infinite ease-in-out;
animation: sk-circleFadeDelay 1.2s infinite ease-in-out;
/* Prevent first frame from flickering when animation starts */
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
} .sk-circle2 {
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
} .sk-circle3 {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-o-transform: rotate(60deg);
transform: rotate(60deg);
} .sk-circle4 {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
} .sk-circle5 {
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-o-transform: rotate(120deg);
transform: rotate(120deg);
} .sk-circle6 {
-webkit-transform: rotate(150deg);
-moz-transform: rotate(150deg);
-o-transform: rotate(150deg);
transform: rotate(150deg);
} .sk-circle7 {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
} .sk-circle8 {
-webkit-transform: rotate(210deg);
-moz-transform: rotate(210deg);
-o-transform: rotate(210deg);
transform: rotate(210deg);
} .sk-circle9 {
-webkit-transform: rotate(240deg);
-moz-transform: rotate(240deg);
-o-transform: rotate(240deg);
transform: rotate(240deg);
} .sk-circle10 {
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
} .sk-circle11 {
-webkit-transform: rotate(300deg);
-moz-transform: rotate(300deg);
-o-transform: rotate(300deg);
transform: rotate(300deg);
} .sk-circle12 {
-webkit-transform: rotate(330deg);
-moz-transform: rotate(330deg);
-o-transform: rotate(330deg);
transform: rotate(330deg);
} .sk-circle2:before {
-webkit-animation-delay: -1.1s;
-moz-animation-delay: -1.1s;
-o-animation-delay: -1.1s;
animation-delay: -1.1s;
} .sk-circle3:before {
-webkit-animation-delay: -1s;
-moz-animation-delay: -1s;
-o-animation-delay: -1s;
animation-delay: -1s;
} .sk-circle4:before {
-webkit-animation-delay: -0.9s;
-moz-animation-delay: -0.9s;
-o-animation-delay: -0.9s;
animation-delay: -0.9s;
} .sk-circle5:before {
-webkit-animation-delay: -0.8s;
-moz-animation-delay: -0.8s;
-o-animation-delay: -0.8s;
animation-delay: -0.8s;
} .sk-circle6:before {
-webkit-animation-delay: -0.7s;
-moz-animation-delay: -0.7s;
-o-animation-delay: -0.7s;
animation-delay: -0.7s;
} .sk-circle7:before {
-webkit-animation-delay: -0.6s;
-moz-animation-delay: -0.6s;
-o-animation-delay: -0.6s;
animation-delay: -0.6s;
} .sk-circle8:before {
-webkit-animation-delay: -0.5s;
-moz-animation-delay: -0.5s;
-o-animation-delay: -0.5s;
animation-delay: -0.5s;
} .sk-circle9:before {
-webkit-animation-delay: -0.4s;
-moz-animation-delay: -0.4s;
-o-animation-delay: -0.4s;
animation-delay: -0.4s;
} .sk-circle10:before {
-webkit-animation-delay: -0.3s;
-moz-animation-delay: -0.3s;
-o-animation-delay: -0.3s;
animation-delay: -0.3s;
} .sk-circle11:before {
-webkit-animation-delay: -0.2s;
-moz-animation-delay: -0.2s;
-o-animation-delay: -0.2s;
animation-delay: -0.2s;
} .sk-circle12:before {
-webkit-animation-delay: -0.1s;
-moz-animation-delay: -0.1s;
-o-animation-delay: -0.1s;
animation-delay: -0.1s;
} @-webkit-keyframes sk-circleFadeDelay {
0%,
39%,
100% {
opacity: 0;
}
40% {
opacity: 1;
}
} @-moz-keyframes sk-circleFadeDelay {
0%,
39%,
100% {
opacity: 0;
}
40% {
opacity: 1;
}
} @-o-keyframes sk-circleFadeDelay {
0%,
39%,
100% {
opacity: 0;
}
40% {
opacity: 1;
}
} @keyframes sk-circleFadeDelay {
0%,
39%,
100% {
opacity: 0;
}
40% {
opacity: 1;
}
} section[class^=mop-load] {
height: 100px;
-webkit-transition: height 1s linear 0s;
-moz-transition: height 1s linear 0s;
-o-transition: height 1s linear 0s;
transition: height 1s linear 0s;
overflow: hidden;
} .flip {
height: 0px;
} .mop-load-div {
box-pack: center;
box-align: center;
/* Firefox */
height: 100px;
display: -moz-box;
-moz-box-pack: center;
-moz-box-align: center;
/* Safari、Opera 以及 Chrome */
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
-o-box-pack: center;
-o-box-align: center;
} .loading {
background-position: 0 100%;
-webkit-transform: rotate(0deg) translateZ(0);
-webkit-transition-duration: 0ms;
-webkit-animation-name: loading;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
} @-webkit-keyframes loading {
from {
-webkit-transform: rotate(0deg) translateZ(0);
}
to {
-webkit-transform: rotate(360deg) translateZ(0);
}
} .mop-load-text {
font-weight: bold;
margin-left: 1.2em;
font-family: Trebuchet MS, Verdana, Helvetica, Arial, sans-serif;
}
</style> </head> <body>
<label>样式1</label>
<div class="mop-load-0"></div>
<label>样式2</label>
<div class="mop-load-1"></div>
<label>样式3</label>
<div class="mop-load-2"></div>
<label>样式4</label>
<div class="mop-load-3"></div>
<label>样式5</label>
<div class="mop-load-4"></div>
<label>样式6</label>
<div class="mop-load-5"></div>
<label>样式7</label>
<div class="mop-load-6"></div>
<label>样式8</label>
<div class="mop-load-7"></div>
<label>样式9</label>
<div class="mop-load-8"></div>
<label>样式10</label>
<div class="mop-load-9"></div>
<label>样式11</label>
<div class="mop-load-10"></div> <label>随机样式</label>
<div class="mop-load-x"></div>
</body> </html>
插件：
jQuery加载动画插件shCircleLoader
http://www.jq22.com/jquery-info526
loading(正在加载特效)的更多相关文章
- JQuery浮动层Loading页面加载特效
之前做项目,经常需要一些浮动层加载Loading. 现在好多前端框架都能实现了,最常用的就是 artDialog 下面记录下当时的代码. <!DOCTYPE html PUBLIC " ...
- 基于iscroll.js实现下拉刷新和上拉加载特效
现在已经不是纯Android独霸天下的时代了,H5嵌入Android的Hybrid混合开发是大势所趋.今天给大家带来的就是移动端中常见的"上拉刷新,下拉加载"特效,这个特效将会基于 ...
- 分享JQuery动画插件Velocity.js的六种列表加载特效
分享JQuery动画插件Velocity.js的六种列表加载特效.在这款实例中给中六种不同的列表加载效果.分别为从上飞入.从右侧飞入.从左侧飞入.和渐显.一起看下效果图: 在线预览 源码下载 实现 ...
- Vue-Router 页面正在加载特效
Vue-Router 页面正在加载特效 如果你在使用 Vue.js 和 Vue-Router 开发单页面应用.因为每个页面都是一个 Vue 组件,你需要从服务器端请求数据,然后再让 Vue 引擎来渲染 ...
- 纯css3实现的动画加载特效
之前给大家带了很多款进度加载条,今天再给大家分享一款纯css3实现的动画加载特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="wrap& ...
- 纯CSS3实现loading正在加载。。。
场景分析:随着我司专职前端切图人员离职,切图的活重新落到我们小组团队成员的日常任务list里面,加上我们小组 7个前端 基本都是后台转的前端 (赶鸭子上架 前端现在需求量大 没办法) 加上自己也将就一 ...
- 一款由jquery实现的超炫的页面加载特效
今天为大家带来一款由jquery实现的超炫的页面加载特效.连续的几个页面分开特效.最后由三维的线条由远至近消失,然后由近至远出现.效果超级梦炫.一起看下效果图: 在线预览 源码下载 实现的代码. ...
- 使用css实现loading的加载
使用css实现loading的加载的效果图 html代码 <div id="caseVerteClaire"> <div id="transform&q ...
- css 跑马灯加载特效
css 跑马灯加载特效 <!DOCTYPE html> <html lang="en"> <head> <meta charset=
随机推荐
- csu 1549: Navigition Problem(几何,模拟)
1549: Navigition Problem Time Limit: 1 Sec Memory Limit: 256 MBSubmit: 305 Solved: 90[Submit][Stat ...
- Binary Tree Zigzag Level Order Traversal——关于广度优先的经典面试题
Given a binary tree, return the zigzag level order traversal of its nodes' values. (ie, from left to ...
- CSU 1240 低调，低调。
原题链接:http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1240 这道题已经做了很久了,加入给足够大的内存,谁都会做. 在一个数列中找一个只出现一次 ...
- MINIBASE源代码阅读笔记之heapfile
Heapfile 用来管理heap file里的dir page们 成员 _firstDirPageId:这个文件的第一个dir page _ftype:文件类型 _file_deleted:删除的时 ...
- codeforce 1A Theatre Square
A. Theatre Square Theatre Square in the capital city of Berland has a rectangular shape with the siz ...
- C++输入与输出
1 概述 C和C++都没有将输入和输出建立在语言中,C++将输入输出的解决方案放在类库中(由头文件iostream和fstream中定义的类) C++程序把输入和输出看作字节流.流充当了程序和流源流目 ...
- bzoj 1854 并查集 + 贪心
思路:这个题的并查集用的好NB啊, 我们把伤害看成图上的点,武器作为边,对于一个联通块来说, 如果是一棵大小为k的树,那么这个联通块里面有k - 1个伤害能被取到,如果图上有环那么k个值都能 取到,对 ...
- TopTicTacToe 开发文档
团队成员: 1.张旭 2.余浩 3.孙闯 4.吴阳 5.王晓华 6.张国庆 开发文档地址:http://www.kancloud.cn/netcon/t4 代码项目地址:https://coding. ...
- 洛谷P2471 [SCOI2007] 降雨量 [RMQ，模拟]
题目传送门 降雨量 题目背景 07四川省选 题目描述 我们常常会说这样的话:“X年是自Y年以来降雨量最多的”.它的含义是X年的降雨量不超过Y年,且对于任意Y<Z<X,Z年的降雨量严格小于X ...
- Linux下定时备份MySQL数据库的Shell脚本
Linux下定时备份MySQL数据库的Shell脚本 对任何一个已经上线的网站站点来说,数据备份都是必须的.无论版本更新还是服务器迁移,备份数据的重要性不言而喻.人工备份数据的方式不单耗费大量时间 ...