今天教大家一个在你WordPress网站访问有点慢时,可以提高用户体验的纯CSS“加载中”动画
插件(插件)版
一、添加CSS动画代码
1、这是最主要的一个步骤,用处时来显示加载中的动画
2、把下列代码添加到你主题的“样式表 (style.css)”文件内添加下列代码就可以啦
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
/** “加载中”动画 **/ #circle { background-color: rgba(0,0,0,0); border:5px solid rgba(10,10,10,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 #808080; z-index:1000; width:50px; height:50px; margin:0 auto; position:fixed; left:30px; bottom:30px; -moz-animation:spinPulse 1s infinite ease-in-out; -webkit-animation:spinPulse 1s infinite ease-in-out; -o-animation:spinPulse 1s infinite ease-in-out; -ms-animation:spinPulse 1s infinite ease-in-out; } #circle1 { background-color: rgba(0,0,0,0); border:5px solid rgba(20,20,20,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 #202020; z-index:1000; width:30px; height:30px; margin:0 auto; position:fixed; left:40px; bottom:40px; -moz-animation:spinoffPulse 1s infinite linear; -webkit-animation:spinoffPulse 1s infinite linear; -o-animation:spinoffPulse 1s infinite linear; -ms-animation:spinoffPulse 1s infinite linear; } @-moz-keyframes spinPulse { 0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #505050;} 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 #505050; } 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); } } @-o-keyframes spinPulse { 0% { -o-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #505050; } 50% { -o-transform:rotate(145deg); opacity:1;} 100% { -o-transform:rotate(-320deg); opacity:0; } } @-o-keyframes spinoffPulse { 0% { -o-transform:rotate(0deg); } 100% { -o-transform:rotate(360deg); } } @-ms-keyframes spinPulse { 0% { -ms-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #505050; } 50% { -ms-transform:rotate(145deg); opacity:1;} 100% { -ms-transform:rotate(-320deg); opacity:0; } } @-ms-keyframes spinoffPulse { 0% { -ms-transform:rotate(0deg); } 100% { -ms-transform:rotate(360deg); } } |
二、添加显示代码
1、这一步的用处是把前面的CSS代码显示出来
2、在主题内的“页首 (header.php)”文件的 <body>
后同样添加下列代码
1 |
<div id="circle"></div><div id="circle1"></div> |
三、添加jQuery渐隐效果
1、这个步骤是用于在网页加载完成后是加载动画渐渐消失,而不是一直不停地转动
2、在“页尾 (footer.php)”内的 </body>
前添加下列代码就完咯
1 2 3 4 5 6 |
<script> jQuery(window).load(function() { jQuery("#circle").fadeOut(500); jQuery("#circle1").fadeOut(700); }); </script> |
预览
本页左下角会永远旋转“加载中”动画
参考
总结
1、完成以上步骤后要清空快取才能显示效果
2、有问题可以回复
感谢 一下就成功了
哈哈,这个还挺好玩的,炫炫的。
好文章 对我很有帮助
随便问一下 进入页面的前几秒有 后面就消失了
博主同志,经查,你的插件不支持HHVM
在我的服务器上你的插件导致我博客直接白掉。。。
其实并不只是我的插件的问题,而是HHVM对PHP的支持始终不是很好,所以如果插件无法使用,推荐使用纯代码方式自行添加,谢谢!
哎……HHVM快是快,就是支持不是很好……
我原来的主题也不支持,只能弃主题保HHVM
其实速度真的并没有这么重要,整体网站的外观、内容才是最重要的,而且现在PHP也不是很慢吧?
很喜欢这个,很酷,我把他改了永久转!
我个人觉得永久转实在太奇怪了~老觉得像是没加载完成

我一直在想是要加在主题CSS好还是安装插件好?
安装插件会导致页面加载变慢?
但是写在主题的话,换了主题之后全部都要重弄,好纠结阿
顺便问问博主您侧边栏的"博客统计"怎么弄得?
今天签到啦!时间:上午10:51:11(使用Arefly评论框自动签到)
如果你经常换主题的话,就应该使用插件(现在插件对速度的影响已经几乎可以忽略不计了)
而如果你是打算一直使用同一个主题,还是就添加代码至主题内较好

)达成的~~

本站右侧的博客统计是使用插件“Site Analytics Widget”(还是我自己做的
mark
找时间折腾~
添加了隐藏代码,还是不生效(已经刷新了N次了
确定你的页面加入了jQuery么?这段代码一定需要jQuery才能工作的~
怎么弄啊!我不太会弄,求教
将下方代码添加到“header.php”中,然后点击 更新档案 就行啦!
放哪里都行吗?
最好放在
<head>
中~还有,你显示我的这个系统是错的耶!我是Windows 8.1
呃。。是因为这个插件还暂时不支持Windows 8.1。。。

现在支持Windows 8.1啦~~

噢!耶!
这个不错的说。去试试了,谢谢博主写的这么吸纳关系。。
它不消失啊怎么办?
可能是你的SCRIPT代码没有加对位置,你再去检查一遍看看
可是你说不用加SCRIPT会立马消失,加了只是缓慢消失呀。。。
额。。。说错了。是一定要加,不加就不会消失。。。
你的这段消失代码可能有问题,我自己写了个解决问题了,望替换
我的代码应该没问题,我自己就用的是我写的那个代码啊。。。
scrip t没显示出来,被博主屏蔽了
添加渐隐代码也不消失是怎么回事
有时候刷新可能不会出现渐隐,但大部份时候还是会的,你多刷新几次试试看呢?
看过很多回但从不知道这个是正在载入中的意思~~
还有你这个国家怎么显示不出来,我什么事都没干啊
现在可以了,前面获取IP的方式出错了。。。
这是从小蒋博客弄来的吧,也不写转载
呃,我这个是从“经验公式”那看到的,在“参考”那
小蒋也不是原作者的啦。。。
对呀,这种网上到处都有,根本找不到谁是原作者

PS:不知道为什么这条评论都要审核
有什么敏感词吗。。不晓得。原作者貌似是hqq