怎样在wordpressblog中加上酷炫的载入中动漫殊效


怎样在wordpressblog中加上酷炫的载入中动漫殊效


短视頻,自新闻媒体,达人种草1站服务 1个出色的blog不仅要给读者获得要想的专业知识或內容,也应当给予读者阅读文章时的享有。由于一些盆友的网速很慢,而blog中的照片等內容挺多的,因此在网页页面开启时常常必须等半天,假如此时可以显示信息1个好看的进场动漫,或许能够减缓等候网页页面开启的无可奈何感。今日就来共享1下周叔blog的载入动漫殊效。

殊效的完成其实不不便,简易来讲便是用几个层来遮罩网页页面,随后在这个层之上加上1个GIF动漫或CSS动漫,下面来共享1下实际编码:

1:最先要载入jQuery库,假如早已载入过jQuery,能够忽视此流程,我用的wordpress自带的库,载入方式以下:

  ?php wp_enqueue_script( jquery ?

2:在head中载入css动漫殊效:

  style type= text/css #loading{ position:fixed !important; position:absolute; top:0; left:0; height:100%; width:100%; z-index:999; background:#000; opacity:0.7; filter:alpha(opacity=70); font-size:14px; line-height:20px } #loading-one{ color:#fff; position:absolute; top:50%; left:50%; margin:50px 0 0 ⑻0px; padding:3px 10px } .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:⑵5px; -moz-animation:spinPulse 1s infinite ease-in-out; -webkit-animation:spinPulse 1s infinite linear; position:absolute; top:50%; left:50% } .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:⑴5px; position:relative; top:⑸0px; -moz-animation:spinoffPulse 1s infinite linear; -webkit-animation:spinoffPulse 1s infinite linear; position:absolute; top:50%; left:50% } @-moz-keyframes spinPulse{ 0%{ -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7 } 50%{ -moz-transform:rotate(145deg); opacity:1 } 100%{ -moz-transform:rotate(⑶20deg); 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 #2187e7 } 50%{ -webkit-transform:rotate(145deg); opacity:1 } 100%{ -webkit-transform:rotate(⑶20deg); opacity:0 } } @-webkit-keyframes spinoffPulse{ 0%{ -webkit-transform:rotate(0deg) } 100%{ -webkit-transform:rotate(360deg) } } /style  

假如必须适配IE,就必须加上gif动漫做填补,编码以下:

ps:详细地址必须改动成你的详细地址,附上我应用的照片,假如喜爱,请自主免费下载到当地。

  !--[if IE] style type= text/css #loading{background:#000 url(GIF照片详细地址) no-repeat center;} /style ![endif]--

3:在head中载入JS操纵编码:

  script type= text/javascript jQuery(function(){ jQuery( #loading-one ).empty().append( 周叔blog加载进行. ).parent().fadeOut( slow ); jQuery( #loading ).click(function(){ jQuery( #loading ).fadeOut( slow ); }); }); /script

4:最终在body的顶部加上以下编码:

  div id= loading p id= loading-one 周叔挪动开关电源blog加载中... /p div > 在这里我要好调1点,第4步的html编码最好是用javascript封裝輸出,由于假如无需javascript輸出,百度搜索蜘蛛会将div标识内的文本抓取到快照中。怎样根据javascript輸出,大伙儿能够立即查询我的blog源码,十分简易的物品这里,就已不赘述了。此外,假如发现依照我的流程不可以完成殊效,也请自主开启周叔blog的网页页面源代码比照1下,将会是css在文件格式化的情况下除难题,由于在周叔blogCSS上是缩小过的,你能够自主拷贝1下。

  挪动开关电源本文来自: 挪动开关电源甚么牌子好|挪动开关电源哪一个牌子好|手机上挪动开关电源-周叔blog本文连接: -