一个优秀的博客不仅仅要给读者得到想要的知识或内容,也应该给予读者阅读时的享受。因为有些朋友的网速很慢,而博客中的图片等内容挺多的,所以在网页打开时往往需要等半天,如果此时能够显示一个漂亮的入场动画,也许可以缓解等待网页打开的无奈感。今天就来分享一下周叔博客的加载动画特效。
特效的实现并不麻烦,简单来说就是用几个层来遮罩页面,然后在这个层之上添加一个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