一個優秀的博客不僅僅要給讀者得到想要的知識或內容，也應該給予讀者閱讀時的享受。因為有些朋友的網速很慢，而博客中的圖片等內容挺多的，所以在網頁打開時往往需要等半天，如果此時能夠顯示一個漂亮的入場動畫，也許可以緩解等待網頁打開的無奈感。今天就來分享一下周叔博客的加載動畫特效。
特效的實現並不麻煩，簡單來說就是用幾個層來遮罩頁面，然後在這個層之上添加一個GIF動畫或者CSS動畫，下面來分享一下具體代碼：
1：首先要加載jQuery庫，如果已經加載過jQuery，可以忽略此步驟，我用的wordpress自帶的庫，加載方法如下：
<?php wp_enqueue_ｓｃｒｉｐｔ('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控制代碼：
<ｓｃｒｉｐｔ type="text/javaｓｃｒｉｐｔ"> jQuery(function(){ jQuery('#loading-one').empty().append('周叔博客載入完成.').parent().fadeOut('slow'); jQuery('#loading').click(function(){ jQuery('#loading').fadeOut('slow'); }); }); </ｓｃｒｉｐｔ>
4：最後在body的頂部添加如下代碼：
<div id="loading"> <p id="loading-one">周叔移動電源博客載入中...</p> <div class="circle"></div> <div class="circle1"></div> </div>
在這裏我要強調一點，第4步的html代碼最好用javaｓｃｒｉｐｔ封裝輸出，因為如果不用javaｓｃｒｉｐｔ輸出，百度蜘蛛會將div標簽內的文字抓取到快照中。如何通過javaｓｃｒｉｐｔ輸出，大家可以直接查看我的博客源代碼，非常簡單的東西這裏，就不再贅述了。另外，如果發現按照我的步驟不能實現特效，也請自行打開周叔博客的網頁源碼對比一下，可能是css在格式化的時候除了問題，因為在周叔博客CSS上是壓縮過的，你可以自行復制一下。
