如何在wordpress博客中添加炫酷的加载中动画特效
一个优秀的博客不仅仅要给读者得到想要的知识或内容,也应该给予读者阅读时的享受。因为有些朋友的网速很慢,而博客中的图片等内容挺多的,所以在网页打开时往往需要等半天,如果此时能够显示一个漂亮的入场动画,也许可以缓解等待网页打开的无奈感。今天就来分享一下周叔博客的加载动画特效。
特效的实现并不麻烦,简单来说就是用几个层来遮罩页面,然后在这个层之上添加一个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上是压缩过的,你可以自行复制一下。
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
一个优秀的博客不仅仅要给读者得到想要的知识或内容,也应该给予读者阅读时的享受。因为有些朋友的网速很慢,而博客中的图片等内容挺多的,所以在网页打开时往往需要等半天,如果此时能够显示一个漂亮的入场动画,也许可以缓解等待网页打开的无奈感。今天就来分享一下周叔博客的加载动画特效。
特效的实现并不麻烦,简单来说就是用几个层来遮罩页面,然后在这个层之上添加一个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上是压缩过的,你可以自行复制一下。