Analytics的统计数据表明,加入了这一效果之后,用户的“平均停留时间”的确有所提高。可见,一个“正在加载”让许多用户都有更多的耐心等待,而不会因为屏幕空白太久而不耐烦地离开。
教程开始:
新建一个 loading 样式 css
将以下代码放进去 然后引用这个文件
#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
<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 代码别替换)
发表评论