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=
随机推荐
- centos 下单独安装mysql
https://www.cnblogs.com/running-mydream/p/4666094.html https://www.cnblogs.com/lzj0218/p/5724446.htm ...
- C# 获取计算机cpu，硬盘，内存相关的信息
using System;using System.Management; namespace MmPS.Common.Helper{ /// <summary> /// 获取计算机相关的 ...
- css如何将div画成三角形
首先了解一下盒模型: 盒模型 先看一段代码: #div1{ height: 100px; border-style: solid; border-width: 100px 100px 100px 10 ...
- 深度学习方法（八）：自然语言处理中的Encoder-Decoder模型，基本Sequence to Sequence模型
欢迎转载,转载请注明:本文出自Bin的专栏blog.csdn.net/xbinworld.技术交流QQ群:433250724,欢迎对算法.技术感兴趣的同学加入. Encoder-Decoder(编码- ...
- hdu 1847(SG函数，巴什博弈)
Good Luck in CET-4 Everybody! Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K ...
- jsonp原生js跨域拿新浪数据插件封装【可扩展】
//修改了一个bug,增加了手动释放垃圾 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
- openssl源码目录结构
openssl源代码主要由eay库.ssl库.工具源码.范例源码以及测试源码组成. eay库是基础的库函数,提供了很多功能.源代码放在crypto目录下.包括如下内容: 1) asn.1 DER编码解 ...
- eclipse 创建 maven 项目时如何修改 web 的版本和 jdk 的版本
eclipse 创建 maven 项目时如何修改 web 的版本和 jdk 的版本 在使用 eclipse 创建 maven 项目的时候,默认的 web.xml 的版本时 2.3,默认 jre 的版本 ...
- 在 Ubuntu 系统安装 Redi laravel 5.2 引入第三方类
composer 安装类依赖包 很受用 也很方便 但是要是一个有一定规模的公司技术团队 因为要照顾大局 还是引入类好些 下面是引入类的方法 1.首先在app目录下创建一个新的文件夹,命名Tools(可 ...
- [hdu3685]Rotational Painting 凸包 重心
大致题意: 给出一个多边形,问你有多少种放法可以使得多边形稳定得立在平面上. 先对多边形求重心,在求凸包,枚举凸包的边,如果重心没有在边的范围内,则不行 判断是否在范围内可用点积来判断 #includ ...