• 注册
  • 美の子 管理员
    达人认证:无所不能,又无所不用其极的神人
    关注 3 粉丝 3 喜欢 12 内容 348
    河南省·郑州市
    聊天 送礼

    分享精彩给好友

    • 查看作者
    • 使用CSS+JS给WordPress菜单加上网站加载进度条

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

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

      将如下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
    • 318