给Emlog添加页面加载(加载中)特效

  • A+
所属分类:美化特效

为了加强浏览者的体验,不在等待页面加载时感到枯燥,从而关闭网页,很多网站都会制作一个“网页正在加载中”的提示效果或显示加载进程,加载完成后提示消失,大部分都应用在网站的首页,今天我把这一特效添加到Emlog主题中。要实现该特效同样要用到jquery,如果大家和我目前用的主题一样,为了实现其它特效已提前加载了jquery,那么正好充分利用jquery的强大功能,添加此特效何乐而不为呢?当然仅仅为了实现这个特效,而去加载50几K的jquery就有点得不偿失了。

教程:

 

1.首先在</body>之前加上如下代码:

  1. <div?id="circle"></div>
  2. <div?id="circletext"></div>
  3. <div?id="circle1"></div>

 

2.再加上一段JS

  1. <script?type="text/javascript">
  2. $(function?()?{
  3. $("#circletext").text("加载肿");
  4. ????$(window).load(function()?{
  5. ????????$("#circle").fadeOut(400);
  6. ????????$("#circle1").fadeOut(600);
  7. ????????$("#circletext").text("完成鸟").fadeOut(800);
  8. ????});
  9. });
  10. //-->
  11. </script>

 

3.加上css

  1. /*?圆圈加载*/
  2. #circle{background-color:rgba(0,0,0,0);border:5px?solid?rgba(10,10,10,0.9);opacity:.9;border-right:5px?solid?rgba
  3. (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;}
  4. #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;}
  5. #circletext{width:46px;height:20px;margin:0?auto;position:fixed;left:46px;bottom:53px;}
  6. @-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;}}
  7. @-moz-keyframes?spinoffPulse{0%{-moz-transform:rotate(0deg);}100%{-moz-transform:rotate(360deg);}}
  8. @-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;}}
  9. @-webkit-keyframes?spinoffPulse{0%{-webkit-transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);}}
  10. @-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;}}
  11. @-o-keyframes?spinoffPulse{0%{-o-transform:rotate(0deg);}100%{-o-transform:rotate(360deg);}}
  12. @-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;}}
  13. @-ms-keyframes?spinoffPulse{0%{-ms-transform:rotate(0deg);}100%{-ms-transform:rotate(360deg);}}

就是这么简单的,效果如下图。。。。

给Emlog添加页面加载(加载中)特效

本文版权归原作者所有,这里只是为了收藏和促进学习,特此分享。

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: