• 注册
  • 冰雪精灵
    冰雪精灵超级管理员
    如需帮助,请私信。
    个人签名:说明我是个人,就这么写。
    关注4 粉丝3 喜欢11内容351
    河南·郑州
    • 查看作者
    • 使用CSS+JS给WordPress菜单加上网站加载进度条

      网站的顶部在进入时顶部会出现一个横向的进度条,可以以动画的形式显示网站加载的进度。是不是很炫酷呢。

      这个进度条实际上是非常简单的,就是html5加上css3动画和jq脚本制作完成的,代码非常简单,你可以自己整整合到网站中。

      使用CSS+JS给WordPress菜单加上网站加载进度条

      将如下css样式粘贴到主题的自定义CSS(或者主题的style.css文件内

      #progress {position:fixed;height: 2px;background:#00CCFF;transition:opacity 300ms linear; z-index:1000000; top:50px;}
      #progress.done {opacity:0 }
      #progress span {
          position:absolute;
          height:2px;
          -webkit-border-radius:100%;
          opacity:1;width:150px;
          rightright:-10px;
          -webkit-animation:pulse 1.5s ease-out 0s infinite;}
      @-webkit-keyframes pulse {
      30% { opacity:.6}
      60% {opacity:0;}
      100% { opacity:.6 }}

      将下面代码放入你主题的footer.php中

      <div id="progress"><span></span></div><script language="javascript">    $({property: 0}).animate({property: 100}, 
      {
      duration: 3000,
      step: function() {
      var percentage = Math.round(this.property);
      $("#progress").css("width",  percentage+"%");
      if(percentage == 100) {
      $("#progress").addClass("done");
      }
      }
      });</script>

      好了,刷新网页,去尝试吧。

      河南省·郑州市
    • 0
    • 0
    • 0
    • 524
    • 请登录之后再进行评论

      登录
    • 单栏布局 侧栏位置: