网站中加入加载特效,完全就是为了吸引用户的,防止网页过慢用用户关掉网页,喜欢的可以试试,效果就跟下面的图片差不多,看起来是有那么个意思。

#circle{background-color:rgba(0,0,0,0);border:5px solid rgba(16, 17, 17, 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 #121313;;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(16, 17, 17, 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 #121313;;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)}} 
在主题的footer文件里面找到</footer>,在前面添加代码
<div id="circle"></div> <div id="circle1" ></div> 

然后在最后面找个合适的位置添加js代码

<script type="text/javascript">
$(window).load(function() {
$("#circle").fadeOut(500);
$("#circle1").fadeOut(700);
});
</script> 

当然了颜色可以设置个自己喜欢的,修改可以在前台修改,找到加载的两个标签,把display去掉,这样你就可以一直看着加载,方便修改颜色。

发表评论

后才能评论