杰生活
记录点滴

给你的网页添加一个加载动画

网页加载需要一个过程,现在这个过程可以极短了,不过有些朋友还是希望能用一个动画来代替这个过程,让加载不再那么枯燥。搜索了一下,很多这类文章,方法很多,利用CSS实现应该是最好的办法了。过程很简单,只需两步。

预览

加载动画预览站点

添加方法

第一步

创建一个css文件,可以命名为loader.css,将其放到网站目录下合适的位置(比如/wp-content/themes/你的主题/css/loader.css)CSS内容如下

第二部

修改header.php


如果想要全站添加加载动画(每个页面都显示加载动画),请在</head>前添加以下内容(第二行的CSS链接请自行修改适配为上面第一步你存放的位置)


如果想要只在主页显示加载动画,请在<body>下添加以下内容(第三行的CSS链接请自行修改适配为上面第一步你存放的位置)

注意

如果您的网站多多少少有一些优化,页面打开速度应该都不会太慢(几乎都是不到1秒钟的事),所以看个人需求使用。

加载动画会在页面加载完后动态消失,所以如果你的站点有异步加载等内容,请酌情使用。

建议只在主页使用,毕竟挺好(zhuang)看(bi)的。^_^

另外,JS内容可以移到底部。

您可以转载,但请注明作者及原文链接:JIElive » 给你的网页添加一个加载动画

评论 1

评论前必须登录!

 

  1. #1

    感谢!

    Saika_Man7个月前 (03-12)

觉得文章有用就打赏一下吧

微信扫一扫打赏

支付宝扫一扫打赏