WordPress给网站加上加载特效 提高用户体验

鳄鱼君

发表文章数:642

Vieu四代商业主题

高扩展、安全、稳定、响应式布局多功能模板。

¥69 现在购买
首页 » WordPress » WordPress给网站加上加载特效 提高用户体验

网站中加入加载特效,完全就是为了吸引用户的,防止网页过慢用用户关掉网页,喜欢的可以试试,效果就跟下面的图片差不多,看起来是有那么个意思。

WordPress给网站加上加载特效 提高用户体验

#circle{background-color:rgba(0,0,0,0);border:5px solid rgba(16, 17, 17, 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 #121313;;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(16, 17, 17, 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 #121313;;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)}} 

在主题的footer文件里面找到</footer>,在前面添加代码

<div id="circle"></div> <div id="circle1" ></div> 

然后在最后面找个合适的位置添加js代码

<script type="text/javascript">
$(window).load(function() {
$("#circle").fadeOut(500);
$("#circle1").fadeOut(700);
});
</script> 

当然了颜色可以设置个自己喜欢的,修改可以在前台修改,找到加载的两个标签,把display去掉,这样你就可以一直看着加载,方便修改颜色。

未经允许不得转载:作者:鳄鱼君, 转载或复制请以 超链接形式 并注明出处 鳄鱼君
原文地址:《WordPress给网站加上加载特效 提高用户体验》 发布于2020-02-16

分享到:
赞(0) 赏杯咖啡

评论 抢沙发

8 + 6 =


文章对你有帮助可赏作者一杯咖啡

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.6主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册