友人C

为typecho博客添加加载动画
首先全站引入jquery 我用的是百度公共jquery库地址 <script type="text/java...
扫描右侧二维码阅读全文
26
2016/08

为typecho博客添加加载动画

首先全站引入jquery

我用的是百度公共jquery库地址

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js
"></script>

样式1

1.jpg

在style.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;
    z-index:1000;
    width:50px;
    height:50px;
        margin:0 auto;     
    position:fixed;
        left:30px;
        bottom:30px;
    -moz-animation:spinPulse 1s infinite ease-in-out;
    -webkit-animation:spinPulse 1s infinite ease-in-out;
    -o-animation:spinPulse 1s infinite ease-in-out;
    -ms-animation:spinPulse 1s infinite ease-in-out;
}
#circle1 {
    background-color: rgba(0,0,0,0);
    border:5px solid rgba(20,20,20,0.9);
    opacity:.9;
    border-left:5px solid rgba(0,0,0,0);
    border-right:5px solid rgba(0,0,0,0);
    border-radius:50px;
    box-shadow: 0 0 15px #202020; 
    z-index:1000;
    width:30px;
    height:30px;
        margin:0 auto;
        position:fixed;
        left:40px;
        bottom:40px;
    -moz-animation:spinoffPulse 1s infinite linear;
    -webkit-animation:spinoffPulse 1s infinite linear;
    -o-animation:spinoffPulse 1s infinite linear;
    -ms-animation:spinoffPulse 1s infinite linear;
}
@-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); }
}

在主题内的「页首(header.php)」文件的<body>后添加显示代码

<div id="circle"></div><div id="circle1"></div>

在「页尾(footer.php)」内的前添加下列代码

<script>
jQuery(window).load(function() {
    jQuery("#circle").fadeOut(500);
    jQuery("#circle1").fadeOut(700);
});
</script>

样式2

QQ截图20160826132838.jpg

在style.CSS添加代码

#loading {
    position: fixed !important;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 999;
    background: #000;
    opacity: 0.7;
    filter: alpha(opacity=70);
    font-size: 14px;
    line-height: 20px
}

#loading-one {
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 50px 0 0 -80px;
    padding: 3px 10px
}

.circle {
    background-color: rgba(0,0,0,0);
    border: 5px solid rgba(0,183,229,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 #2187e7;
    width: 50px;
    height: 50px;
    margin: -25px;
    -moz-animation: spinPulse 1s infinite ease-in-out;
    -webkit-animation: spinPulse 1s infinite linear;
    position: absolute;
    top: 50%;
    left: 50%
}

.circle1 {
    background-color: rgba(0,0,0,0);
    border: 5px solid rgba(0,183,229,0.9);
    opacity: .9;
    border-left: 5px solid rgba(0,0,0,0);
    border-right: 5px solid rgba(0,0,0,0);
    border-radius: 50px;
    box-shadow: 0 0 15px #2187e7;
    width: 30px;
    height: 30px;
    margin: -15px;
    position: relative;
    top: -50px;
    -moz-animation: spinoffPulse 1s infinite linear;
    -webkit-animation: spinoffPulse 1s infinite linear;
    position: absolute;
    top: 50%;
    left: 50%
}

@-moz-keyframes spinPulse {
    0% {
        -moz-transform: rotate(160deg);
        opacity: 0;
        box-shadow: 0 0 1px #2187e7
    }

    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 #2187e7
    }

    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)
    }
} 

在主题内的「页首(header.php)」文件的<body>后添加显示代码

 <div id="loading"> <p id="loading-one">一日博客努力载入中...</p> <div class="circle"></div> <div class="circle1"></div> </div>

在「页尾(footer.php)」内的</body>前添加下列代码

<script>
jQuery(function() {
    jQuery('#loading-one').empty().append('一日博客载入完成.').parent().fadeOut('slow');
    jQuery('#loading').click(function() {
        jQuery('#loading').fadeOut('slow');
    });
});
</script>

样式3

QQ截图20160901221237.jpg

在style.CSS添加代码

#loading {
    position: fixed !important;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 999;
    background: #000;
    opacity: 0.7;
    filter: alpha(opacity=70);
    font-size: 14px;
    line-height: 20px
}
#loading-one {
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 50px 0 0 -80px;
    padding: 3px 10px
}
.spinner {
    position: absolute;
margin-right: 500px;
    top: 50%;
    left: 50%;
  width: 50px;
  height: 60px;
    margin: 0 0 0 -20px;
  font-size: 10px;
}

.spinner > div {
  background-color: #67CF22;
  height: 100%;
  width: 6px;
  display: inline-block;

  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
  animation: stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

@-webkit-keyframes stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 
  20% { -webkit-transform: scaleY(1.0) }
}

@keyframes stretchdelay {
  0%, 40%, 100% {
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% {
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}

在主题内的「页首(header.php)」文件的<body>后添加显示代码

<div id="loading">
<div id="loading-one"></div>
<div class="spinner">
  <div class="rect1"></div>
  <div class="rect2"></div>
  <div class="rect3"></div>
  <div class="rect4"></div>
  <div class="rect5"></div>
</div>
</div>

在「页尾(footer.php)」内的</body>前添加下列代码

<script>
jQuery(window).load(function() {
    jQuery("#loading").fadeOut(500);
});
</script>

代码实现

其实很简单,核心代码是最后一段的jQuery

jQuery("#loading").fadeOut(500);

表示加载完成后,0.5s 淡出这个效果。

文章来源

给WordPress添加「加载中」动画
如何在wordpress博客中添加炫酷的加载中动画特效
使用 CSS3 实现超炫的 Loading(加载)动画效果

最后修改:2016 年 10 月 27 日 06 : 57 PM
如果觉得我的文章对你有用,请随意赞赏

18 条评论

  1. John

    请问全站怎么引入jquery?

    1. 友人C
      @John

      直接把代码加入到<head>标签前面即可。或者加到</body>标签的前面即可

  2. John

    John支持你

  3. xema

    添加了一下,发现网页加载完了~这进度条还在转,都不能操作了……尴尬死

    1. Rin
      @xema

      我也遇到这个问题了,其它浏览器都可以唯独Chrome和Safari一直转(╯°A°)╯︵○○○,最后才发现是jquery库没用https的原因(/TДT)/

    2. 友人C
      @xema

      我之前也有过这样情况,都是js的问题~~

    3. 友人C
      @xema

      打开F12,看看jquery有没有正常加载~我之前使用没问题的

      1. xema
        @友人C

        正常啊,就不知道怎么回事就一直转圈,加载都完毕了……

  4. 千千

    哇!你也要弄半透明风格嘛?

    1. 一日
      @千千

      对啊,纯白的不好看#[吐舌]我好多都是看你的代码的#[玫瑰]

      1. 千千
        @一日

        刚刚用手机进来还以为是我的站呢!因为背景的人物

        1. 一日
          @千千

          哈哈哈#(邪恶)

          1. 千千
            @一日

            噫~#[滑稽]

  5. Deerweak

    还不错的。

    1. 一日
      @Deerweak

      你的博客好多特效,闪瞎#[呀咩爹]

      1. Deerweak
        @一日

        哈哈,好像是有点多,眼看不过来,,,

  6. Linger
    [真棒]
    1. 一日
      @Linger [吐舌]

发表评论