如何在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

时间: 2024-12-11 18:11:56

如何在wordpress博客中添加炫酷的加载中动画特效的相关文章

wordpress博客怎么添加百度分享按钮或悬浮窗

添加百度分享按钮让网友自主去分享确实如百度分享官方所言,能给网站带来更多流量,而且分享次数多会被百度认为这是受欢迎度比较高的网页,不仅在百度搜索结果的右下角会有一个被分享次数的箭头和数字,对网页的排名也是大有好处的,当然前提需要建立在网页确实是值得用户主动分享的优质内容. 我们经常在其他网站上看到的百度分享一种安装在文章开头或结尾的位置,另一种则悬浮在网站的左侧或右侧,前者是一种按钮的方式,而后者则是一种鼠标经过展开的浮窗方式,如刘珍益博客上也基本安装在这两个位置,如下图:   添加方法还是非常

开源博客QBlog开发者视频教程:模板机制加载原理解说(三)

前言: 感谢大伙的支持,同样对于本次视频的发布,也限量发送20份源码,秋色园10份,博客园10份. 秋色园在 开源博客下载 处留言,博客园在 秋色园QBlog高性能博客开放源码下载 限量下载1000次 处留言. 由于本节视频不好录,重复录制的次数比较多,花时间较长,因此发布也晚了些. 大伙在学习的时候,还是要配合"秋色园技术原理解析"这个系列看,因为视频只是针对重点讲解,不会覆盖系列.   内容简介: 1:秋色园QBlog 的皮肤界面的介绍 2:秋色园QBlog 的皮肤是如何被加载的-

教你三步优化wordpress博客

wordpress这几年很火,由于其开放性加之丰富的模板,支持插件拓展,越来越多的人建立博客开始选择wordpress.但是仍然有部分朋友初次接触WP博客,不了解如何去优化,笔者今天就这个问题来谈谈新手如何做好wordpress优化. 一.通过代码添加关键词和描述标签 wordpress在标题和描述标签上的做法是比较奇怪的,他自带的程序是没有关键词和描述标签,而我们如果通过插件添加又感觉会拖慢速度,基于此,我们可以使用代码来解决这个问题: <?php //判断是否为首页 if ( is_home

给WordPress博客添加百度和谷歌地图

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 今天给已使用WordPress博客新手站长们说说如何添加百度和谷歌地图,为何要建立网站地图?它可以让搜索引擎蜘蛛提供可以浏览整个网站的链接;为搜索引擎蜘蛛提供一些链接,指向动态页面或者采用其他方法比较难以到达的页面;作为一种潜在的着陆页面,可以为搜索流量进行优化;如果访问者试图访问网站所在域内并不存在的URL,那么这个访问者就会被转到&quo

如何为博客添加“正在加载中”的过度特效

看到很多博客都有这个,想起自己博客也需要,于是就加了一个,方法是这样的: 首先看你博客有没有加载jQuery,如果没有,请在头部加上引用这段js的代码: <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.3.min.js"></script> 然后把如下代码加在模版文件中: <script type="text

使用nginx利用虚拟主机搭建WordPress博客

最近开始打算学习nginx web服务器,既然是学习还是以实用为目的的.我们在此以搭建WordPress博客为例. 搭建WordPress博客,我们需要Mysql数据库.PHP环境和Nginx Web服务器.主要分为以下四个步骤: 1.Mysql数据库安装及配置 2.PHP.PHP-FPM及与PHP相关组件的安装及配置 3.Nginx Web服务器搭建与配置 4.wordpress安装 注意:本次实验,除了nginx使用源码安装外,其他的软件全部使用rpm包yum方式进行安装. 一. Mysql

WordPress博客如何记录搜索引擎蜘蛛爬行痕迹

WordPress博客记录seo/seo.html" target="_blank">搜索引擎蜘蛛爬行痕迹插件: 1.搜索引擎蜘蛛爬行记录器Spider Tracker插件可以记录百度.谷歌.雅虎.必应.搜狗.搜搜6种搜索引擎的蜘蛛爬行痕迹,并生成统计图表,可以清晰的看到,近6日的各种搜索引擎的蜘蛛数量,以及当日的哪些时间,蜘蛛来过站里,又抓取了哪些网址. 2.wp-log-robots 插件大小仅3KB,wp-log-robots是一个记录搜索引擎蜘蛛爬虫活动记录的W

WordPress博客WP_Image_Editor_Imagick漏洞

作为一名站长而言,其实早在几天之前就看到了相关资讯新闻:ImageMagick被爆高危漏洞(CVE-2016-3714),黑客等攻击者通过此漏洞可执行任意命令,最终窃取重要信息取得服务器控制权.想来对服务器而言危害程度还是比较大的. 于此同时,今天下午档主收到来自阿里云服务器的安全提示,一个存放在阿里云主机上的WordPress网站程序存在WP_Image_Editor_Imagick漏洞问题,需要登入后台修复补丁. 当然,提供在线修复补丁功能的骑士专业版作为阿里云的收费服务,当然不是免费获取的

LNMP系列教程之 SSL安装WordPress博客(程序下载与安装)_Linux

在之前的文章中,老左已经在VPS中添加了站点,然后我们就需要传程序建站.我们可以利用WinSCP工具直接向我们的对应的站点目录中传程序,然后添加数据库安装网站.但是今天我分享的这个方法是比较先进的SSL远程下载程序,这样的好处是万一我们用的CMS程序较大,可以直接下载至VPS中,省的我们再去FTP传.用命令操作一来可以显得牛X,二来可以节省时间. 首先,用Putty登陆我们的VPS,到我们的站点目录下,今天我以安装wordpress建立博客为例: 其次,输入远程下载程序的命令: wget htt