为网站添加圆圈加载效果

2014-03-25
技术探讨 / WordPress
CSS3jQuery

以 Wordpress 作为示范，可以自行修改。

该方法使用了 CSS3，IE6 及低版本浏览器可能暂不支持。

示范可以参考本站各个网页加载时左下角的效果。

为 Wordpress 添加效果的方法如下

  • 将以下代码添加到当前主题的样式表 (style.css) 中
/* 圆圈加载 */
#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: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(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: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 style="z-index:999" id="circle"></div>
<div style="z-index:999" id="circle1"></div>
  • 在 footer.php 中加入如下代码（建议在 / body 之前）
<script type="text/javascript">
$(window).load(function() {
$("#circle").fadeOut(500);
$("#circle1").fadeOut(700);
});
</script>
  • 因为该方法调用了 jquery 库所以没有的话建议从 jquery 下载 jquery-2.1.0.min.js 和 jquery-2.1.0.min.map 两个文件放在当前主题的 / js / 文件夹中，并在 header.php 的 <?php wp_head();?> 前加入如下代码
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery-2.1.0.min.js"></script>