- A+
所属分类：Emlog
为了加强浏览者的体验,不在等待页面加载时感到枯燥，从而关闭网页，很多网站都会制作一个“网页正在加载中”的提示效果或显示加载进程，加载完成后提示消失，大部分都应用在网站的首页，今天我把这一特效添加到 Emlog 主题中。要实现该特效同样要用到 jquery，如果大家和我目前用的主题一样，为了实现其它特效已提前加载了 jquery，那么正好充分利用 jquery 的强大功能，添加此特效何乐而不为呢？当然仅仅为了实现这个特效，而去加载 50 几 K 的 jquery 就有点得不偿失了。
教程：
1.首先在</body>之前加上如下代码：
- <div?id="circle"></div>
- <div?id="circletext"></div>
- <div?id="circle1"></div>
2.再加上一段 JS
- <script?type="text/javascript">
- $(function?()?{
- $("#circletext").text("加载肿");
- ????$(window).load(function()?{
- ????????$("#circle").fadeOut(400);
- ????????$("#circle1").fadeOut(600);
- ????????$("#circletext").text("完成鸟").fadeOut(800);
- ????});
- });
- //-->
- </script>
3.加上 css
- /*?圆圈加载*/
- #circle{background-color:rgba(0,0,0,0);border:5px?solid?rgba(10,10,10,0.9);opacity:.9;border-right:5px?solid?rgba
- (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;}
- #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;}
- #circletext{width:46px;height:20px;margin:0?auto;position:fixed;left:46px;bottom:53px;}
- @-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;}}
- @-moz-keyframes?spinoffPulse{0%{-moz-transform:rotate(0deg);}100%{-moz-transform:rotate(360deg);}}
- @-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;}}
- @-webkit-keyframes?spinoffPulse{0%{-webkit-transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);}}
- @-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;}}
- @-o-keyframes?spinoffPulse{0%{-o-transform:rotate(0deg);}100%{-o-transform:rotate(360deg);}}
- @-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;}}
- @-ms-keyframes?spinoffPulse{0%{-ms-transform:rotate(0deg);}100%{-ms-transform:rotate(360deg);}}
就是这么简单的，效果如下图。。。。
本文版权归原作者所有，这里只是为了收藏和促进学习，特此分享。
