WordPress特效:加载中及已完成

本文预计阅读时间 6 分钟
最近七墨扒站上瘾了,扒的全是一些小功能和特效。不知道大家有没有在看博客的时候,看到过如下图中的特效。当网页加载的时候,就显示“加载中”,当加载完成后,就显示“已完成”,其实蛮有意思的,所以扒下来给大家分享。

图片:

WordPress特效:加载中及已完成WordPress特效:加载中及已完成

1.添加功能代码:

将以下代码添加到footer.php中的</body>上面即可:

  1. <div id="circle"></div>
  2. <div id="circletext"></div>
  3. <div id="circle1"></div>
  4. <script>
  5. $(function() {
  6. $("img").not(".grid img,#sidebar img").lazyload({
  7. effect:"fadeIn"
  8. });
  9. });
  10. </script>
  11. <script src="<?php echo get_template_directory_uri(); ?>/js/com.js"></script>
  12. <script src="<?php echo get_template_directory_uri(); ?>/js/lazyload.js"></script>

注意:下载com.jslazyload.js两个文件,并上传到主题目录下的js文件夹中即可。

密码:7h9q

2.添加样式代码:

将以下代码添加到style.css中即可:

  1. #circle{-moz-border-bottom-colors:none;-moz-border-left-colors:none;-moz-border-right-colors:none;-moz-border-top-colors:none;animation:1s linear 0s normal none infinite running spinPulse;background-color:rgba(0,0,0,0);border-color:rgba(10,10,10,.9) transparent;border-image:none;border-radius:50px;border-style:solid;border-width:5px;bottombottom:30px;box-shadow:0 0 35px grey;height:60px;left:30px;margin:0 auto;opacity:.9;position:fixed;width:60px}#circle1{-moz-border-bottom-colors:none;-moz-border-left-colors:none;-moz-border-right-colors:none;-moz-border-top-colors:none;animation:1s linear 0s normal none infinite running spinoffPulse;background-color:rgba(0,0,0,0);border-color:rgba(20,20,20,.9) transparent;border-image:none;border-radius:50px;border-style:solid;border-width:6px;bottombottom:39px;box-shadow:0 0 15px #202020;height:40px;left:39px;margin:0 auto;opacity:.9;position:fixed;width:40px}#circletext{bottombottom:53px;height:20px;left:38px;margin:0 auto;position:fixed;width:46px}@keyframes spinPulse{0%{box-shadow:0 0 1px #505050;opacity:0;transform:rotate(160deg)}50%{opacity:1;transform:rotate(145deg)}100%{opacity:0;transform:rotate(-320deg)}}@keyframes spinoffPulse{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes spinPulse{0%{box-shadow:0 0 1px #505050;opacity:0;transform:rotate(160deg)}50%{opacity:1;transform:rotate(145deg)}100%{opacity:0;transform:rotate(-320deg)}}@keyframes spinoffPulse{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}

大功告成,刷新下看看有效果没~~

  • 七墨微信
  • 请留下您宝贵的意见,或者每天来本站的文章页面签到,七墨将不胜感激~~
  • weinxin
  • 七墨分享群
  • 要加群的先看本站第一篇文章,不懂的不要加,谢谢~
  • weinxin
七墨
Adobe软件最新全家桶(win、mac)
700多份网站主题源码

来一发,更加快活

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