教热门-官方 
为你的网站加上Loading等待加载效果吧 | Loading页面加载添加教程
效果图 :
教程开始
新建一个loading样式css
将以下代码放进去 然后引用这个文件
code
#Loadanimation{
background-color:#fff;
height:100%;
width:100%;
position:fixed;
z-index:1;
margin-top:0px;top:0px;
}
#Loadanimation-center{
width:100%;
height:100%;
position:relative;
}
#Loadanimation-center-absolute{
position:absolute;
left:50%;
top:50%;
height:200px;
width:200px;
margin-top:-100px;
margin-left:-100px;
}
.xccx_object{
-moz-border-radius:50% 50% 50% 50%;
-webkit-border-radius:50% 50% 50% 50%;
border-radius:50% 50% 50% 50%;
position:absolute;
border-left:5px solid #87CEFA;
border-right:5px solid #FFC0CB;
border-top:5px solid transparent;
border-bottom:5px solid transparent;
-webkit-animation:animate 2.5s infinite;
animation:animate 2.5s infinite;
}
#xccx_one{
left:75px;
top:75px;
width:50px;
height:50px;
}
#xccx_two{
left:65px;
top:65px;
width:70px;
height:70px;
-webkit-animation-delay:0.1s;
animation-delay:0.1s;
}
#xccx_three{
left:55px;
top:55px;
width:90px;
height:90px;
-webkit-animation-delay:0.2s;animation-delay:0.2s;
}
#xccx_four{
left:45px;
top:45px;
width:110px;
height:110px;
-webkit-animation-delay:0.3s;
animation-delay:0.3s;
}
@-webkit-keyframes animate{50%{
-ms-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
transform:rotate(180deg);
}
100%{-ms-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
}
}
@keyframes animate{50%{
-ms-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
transform:rotate(180deg);
}
100%{
-ms-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
}
}
第二步：
将以下代码填写入头部文件 一般都为 header.php
code
<div id="Loadanimation" style="z-index:999999;">
<div id="Loadanimation-center">
<div id="Loadanimation-center-absolute">
<div class="xccx_object" id="xccx_four"></div>
<div class="xccx_object" id="xccx_three"></div>
<div class="xccx_object" id="xccx_two"></div>
<div class="xccx_object" id="xccx_one"></div>
</div>
</div>
</div>
<script>
$(function(){
$("#Loadanimation").fadeOut(540);
});
</script>
注意 注意 fadeOut 里面填写的是毫秒数
本loading可以自定义 网上也有很多css的 只要替换第二步的代码都可以成功(JS代码别替换)
1. 本站所有资源来源于用户上传和网络，如有侵权请联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别！
教热门 » 为你的网站加上Loading等待加载效果吧 | Loading页面加载添加教程
