分享
 
 
 

如何在wordpress博客中添加炫酷的加載中動畫特效

王朝互聯網·作者佚名  2013-01-18
窄屏简体版  字體: |||超大  

一個優秀的博客不僅僅要給讀者得到想要的知識或內容,也應該給予讀者閱讀時的享受。因為有些朋友的網速很慢,而博客中的圖片等內容挺多的,所以在網頁打開時往往需要等半天,如果此時能夠顯示一個漂亮的入場動畫,也許可以緩解等待網頁打開的無奈感。今天就來分享一下周叔博客的加載動畫特效。

特效的實現並不麻煩,簡單來說就是用幾個層來遮罩頁面,然後在這個層之上添加一個GIF動畫或者CSS動畫,下面來分享一下具體代碼:

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 -80px; 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:-25px; -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:-15px; position:relative; top:-50px; -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(-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 #2187e7 } 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) } } </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('周叔博客載入完成.').parent().fadeOut('slow'); jQuery('#loading').click(function(){ jQuery('#loading').fadeOut('slow'); }); }); </script>

4:最後在body的頂部添加如下代碼:

<div id="loading"> <p id="loading-one">周叔移動電源博客載入中...</p> <div class="circle"></div> <div class="circle1"></div> </div>

在這裏我要強調一點,第4步的html代碼最好用javascript封裝輸出,因為如果不用javascript輸出,百度蜘蛛會將div標簽內的文字抓取到快照中。如何通過javascript輸出,大家可以直接查看我的博客源代碼,非常簡單的東西這裏,就不再贅述了。另外,如果發現按照我的步驟不能實現特效,也請自行打開周叔博客的網頁源碼對比一下,可能是css在格式化的時候除了問題,因為在周叔博客CSS上是壓縮過的,你可以自行復制一下。

 
 
 
免責聲明:本文為網絡用戶發布,其觀點僅代表作者個人觀點,與本站無關,本站僅提供信息存儲服務。文中陳述內容未經本站證實,其真實性、完整性、及時性本站不作任何保證或承諾,請讀者僅作參考,並請自行核實相關內容。
2023年上半年GDP全球前十五強
 百态   2023-10-24
美眾議院議長啟動對拜登的彈劾調查
 百态   2023-09-13
上海、濟南、武漢等多地出現不明墜落物
 探索   2023-09-06
印度或要將國名改為「巴拉特」
 百态   2023-09-06
男子為女友送行,買票不登機被捕
 百态   2023-08-20
手機地震預警功能怎麽開?
 干货   2023-08-06
女子4年賣2套房花700多萬做美容:不但沒變美臉,面部還出現變形
 百态   2023-08-04
住戶一樓被水淹 還衝來8頭豬
 百态   2023-07-31
女子體內爬出大量瓜子狀活蟲
 百态   2023-07-25
地球連續35年收到神秘規律性信號,網友:不要回答!
 探索   2023-07-21
全球鎵價格本周大漲27%
 探索   2023-07-09
錢都流向了那些不缺錢的人,苦都留給了能吃苦的人
 探索   2023-07-02
倩女手遊刀客魅者強控制(強混亂強眩暈強睡眠)和對應控制抗性的關系
 百态   2020-08-20
美國5月9日最新疫情:美國確診人數突破131萬
 百态   2020-05-09
荷蘭政府宣布將集體辭職
 干货   2020-04-30
倩女幽魂手遊師徒任務情義春秋猜成語答案逍遙觀:鵬程萬裏
 干货   2019-11-12
倩女幽魂手遊師徒任務情義春秋猜成語答案神機營:射石飲羽
 干货   2019-11-12
倩女幽魂手遊師徒任務情義春秋猜成語答案昆侖山:拔刀相助
 干货   2019-11-12
倩女幽魂手遊師徒任務情義春秋猜成語答案天工閣:鬼斧神工
 干货   2019-11-12
倩女幽魂手遊師徒任務情義春秋猜成語答案絲路古道:單槍匹馬
 干货   2019-11-12
倩女幽魂手遊師徒任務情義春秋猜成語答案鎮郊荒野:與虎謀皮
 干货   2019-11-12
倩女幽魂手遊師徒任務情義春秋猜成語答案鎮郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手遊師徒任務情義春秋猜成語答案鎮郊荒野:指鹿為馬
 干货   2019-11-12
倩女幽魂手遊師徒任務情義春秋猜成語答案金陵:小鳥依人
 干货   2019-11-12
倩女幽魂手遊師徒任務情義春秋猜成語答案金陵:千金買鄰
 干货   2019-11-12
 
>>返回首頁<<
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有