首页 > 代码库 > loading(正在加载特效)
loading(正在加载特效)
<!DOCTYPE html><html> <head lang="en"> <meta charset="UTF-8"> <script type="text/javascript" src="http://www.mamicode.com/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>
loading(正在加载特效)
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。