【#文档大全网# 导语】以下是®文档大全网的小编为您整理的《如何在wordpress博客中添加炫酷的加载中动画特效》，欢迎阅读！
如何在wordpress博客中添加炫酷的加载中动画特效
一个优秀的博客不仅仅要给读者得到想要的知识或内容，也应该给予读者阅读时的享受。因为有些朋友的网速很慢，而博客中的图片等内容挺多的，所以在网页打开时往往需要等半天，如果此时能够显示一个漂亮的入场动画，也许可以缓解等待网页打开的无奈感。今天就来分享一下周叔博客的加载动画特效。
特效的实现并不麻烦，简单来说就是用几个层来遮罩页面，然后在这个层之上添加一个GIF动画或者CSS动画，下面来分享一下具体代码：
1：首先要加载jQuery库，如果已经加载过jQuery，可以忽略此步骤，我用的wordpress自带的库，加载方法如下：
ｓｃｒｉｐｔ('jquery'); ?>
2：在head中加载css动画特效：
如果需要兼容IE，就需要添加gif动画做补充，代码如下：
ps：地址需要修改成你的地址，附上我使用的图片，如果喜欢，请自行下载到本地。
本文章是来自
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的顶部添加如下代码：
周叔移动电源博客载入中...
class="circle1">
在这里我要强调一点，第4步的html代码最好用javaｓｃｒｉｐｔ封装输出，因为如果不用javaｓｃｒｉｐｔ输出，百度蜘蛛会将div标签内的文字抓取到快照中。如何通过javaｓｃｒｉｐｔ输出，大家可以直接查看我的博客源代码，非常简单的东西这里，就不再赘述了。另外，如果发现按照我的步骤不能实现特效，也请自行打开周叔博客的网页源码对比一下，可能是css在格式化的时候除了问题，因为在周叔博客CSS上是压缩过的，你可以自行复制一下
本文章是来自
本文来源：https://www.wddqxz.cn/57a756b01a37f111f1855bd1.html
2022-07-14
