花店网站建设课程设计论文,南宁本地网,wordpress手机端底部添加导航菜单,百度的宣传视频广告为你的网站加上Loading等待加载效果吧 | Loading页面加载添加教程
效果图 : 教程开始
新建一个loading样式css 将以下代码放进去 然后引用这个文件
code #Loadanimation{ background-color:#fff; height:100%; width:100%; position:fixed; z-index:1; ma…为你的网站加上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 idLoadanimation stylez-index:999999; div idLoadanimation-center div idLoadanimation-center-absolute div classxccx_object idxccx_four/div div classxccx_object idxccx_three/div div classxccx_object idxccx_two/div div classxccx_object idxccx_one/div /div /div /div script $(function(){ $(#Loadanimation).fadeOut(540); }); /script 注意 注意 fadeOut 里面填写的是毫秒数
本loading可以自定义 网上也有很多css的 只要替换第二步的代码都可以成功(JS代码别替换)
