为了加强浏览者的体验,不在等待页面加载时感到枯燥，从而关闭网页，很多网站都会制作一个“网页正在加载中”的提示效果或显示加载进程，加载完成后提示消失，大部分都应用在网站的首页，今天我教大家把这一特效添加到Emlog主题中。要实现该特效同样要用到jquery，如果大家和我目前用的主题一样，为了实现其它特效已提前加载了jquery，那么正好充分利用jquery的强大功能，添加此特效何乐而不为呢？当然仅仅为了实现这个特效，而去加载50几K的jquery就有点得不偿失了。
6 R. }* X1 F: k8 v9 _2 Y5 E& {7 M1.首先在</body>之前加上如下代码：- <div id="circle"></div>, @: e0 T7 _) \( R3 l: M. J5 R
- <div id="circletext"></div>
, i- ^) z% J7 A! l) k$ n - <div id="circle1"></div>
]# X1 v+ c; x" X
2.再加上一段JS- <script type="text/javascript">
8 g& h( {" L/ E$ n9 q2 o% I2 j4 v - $(function () {4 R K# u6 l7 V2 h
- $("#circletext").text("加载肿");
7 B' u2 ^' T. r8 }1 Y f - $(window).load(function() {
! P- @ v: s5 G% m3 Q9 Y& H3 p - $("#circle").fadeOut(400);
) [% K$ M+ d& X, ?: Y - $("#circle1").fadeOut(600);
1 L1 y0 m+ Q: G% a$ C% T1 q T4 g - $("#circletext").text("完成鸟").fadeOut(800);
! F7 t2 @6 j# ~ - });
8 k6 F) n0 D- r4 i - });/ v; F! \6 Y4 f2 E- }$ f( J v" o. v
- //-->3 D2 C; L' R: m/ W1 C0 z
- </script>
! t v7 ?" i, h9 X7 X6 t! Q+ F
" o5 }3 W _2 M% i. U' `3.加上CSS- /* 圆圈加载*/
* x% V1 y: s' `* c- l' C& C - #circle{background-color:rgba(0,0,0,0);border:5px solid rgba(10,10,10,0.9);opacity:.9;border-right:5px solid rgba
5 R8 z- L* Q( M9 a( U4 `+ J - (0,0,0,0);border-left:5px solid rgba(0,0,0,0);border-radius:50px;box-shadow:0 0 35px #808080;width:60px;height:60px;margin:0 auto;position:fixed;left:30px;bottom:30px;-moz-animation:spinPulse 1s infinite linear;-webkit-animation:spinPulse 1s infinite linear;-o-animation:spinPulse 1s infinite linear;-ms-animation:spinPulse 1s infinite linear;}3 b! `9 G$ |/ F) `
- #circle1{background-color:rgba(0,0,0,0);border:6px solid rgba(20,20,20,0.9);opacity:.9;border-left:6px solid rgba(0,0,0,0);border-right:6px solid rgba(0,0,0,0);border-radius:50px;box-shadow:0 0 15px #202020;width:40px;height:40px;margin:0 auto;position:fixed;left:39px;bottom:39px;-moz-animation:spinoffPulse 1s infinite linear;-webkit-animation:spinoffPulse 1s infinite linear;-o-animation:spinoffPulse 1s infinite linear;-ms-animation:spinoffPulse 1s infinite linear;}8 P/ ~1 ]2 @% d9 k& N. J5 Y _
- #circletext{width:46px;height:20px;margin:0 auto;position:fixed;left:46px;bottom:53px;}1 D) W+ L5 Y. P: a: J
- @-moz-keyframes spinPulse{0%{-moz-transform:rotate(160deg);opacity:0;box-shadow:0 0 1px #505050;}50%{-moz-transform:rotate(145deg);opacity:1;}100%{-moz-transform:rotate(-320deg);opacity:0;}}
2 ~5 M7 _- E; { - @-moz-keyframes spinoffPulse{0%{-moz-transform:rotate(0deg);}100%{-moz-transform:rotate(360deg);}}
1 j# ~ }* u! u+ h - @-webkit-keyframes spinPulse{0%{-webkit-transform:rotate(160deg);opacity:0;box-shadow:0 0 1px #505050;}50%{-webkit-transform:rotate(145deg);opacity:1;}100%{-webkit-transform:rotate(-320deg);opacity:0;}}
) o2 R7 I8 G1 V4 a - @-webkit-keyframes spinoffPulse{0%{-webkit-transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);}}
* A! Z7 W2 |2 S4 S - @-o-keyframes spinPulse{0%{-o-transform:rotate(160deg);opacity:0;box-shadow:0 0 1px #505050;}50%{-o-transform:rotate(145deg);opacity:1;}100%{-o-transform:rotate(-320deg);opacity:0;}}
2 Y" I) I' Q6 h1 M' n8 t - @-o-keyframes spinoffPulse{0%{-o-transform:rotate(0deg);}100%{-o-transform:rotate(360deg);}}; o2 g, o( l$ k, R: c9 F
- @-ms-keyframes spinPulse{0%{-ms-transform:rotate(160deg);opacity:0;box-shadow:0 0 1px #505050;}50%{-ms-transform:rotate(145deg);opacity:1;}100%{-ms-transform:rotate(-320deg);opacity:0;}}/ f2 \- v, o* n- ?
- @-ms-keyframes spinoffPulse{0%{-ms-transform:rotate(0deg);}100%{-ms-transform:rotate(360deg);}}
就是这么简单的，效果：
$ K1 A) r) D) {+ J3 } | 
22262
0
提升卡
置顶卡
沉默卡
变色卡
千斤顶
