当前位置：歪迪资源屋 > WordPress资源 > wordpress技巧 >

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

2019-01-29 wordpress技巧 1050 0
歪迪资源屋有话要说：支付宝红包升级 支付宝大额红包升级 10.88偏多 打开支付宝首页搜8774196领红包，领到大红包的小伙伴赶紧使用哦！
本站资源均为站长亲测，真实有效，本站不发表未经验证的资源，请放心参与体验

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

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

添加方法

第一步

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

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;}
#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index:999999;}
#loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 3px solid transparent;
    /* COLOR 1 */
    border-top-color: #FFF;
    -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
    -ms-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
    -moz-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */ 
    -o-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */   
        animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
    z-index:1001;}
#loader:before {
        content: "";
        position: absolute;
        top: 5px;
        left: 5px;
        right: 5px;
        bottom: 5px;
        border-radius: 50%;
        border: 3px solid transparent;
        /* COLOR 2 */       
        border-top-color: #FFF;
        -webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
        -moz-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
        -o-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
        -ms-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */              
        animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */}
#loader:after {
        content: "";
        position: absolute;
        top: 15px;
        left: 15px;
        right: 15px;
        bottom: 15px;
        border-radius: 50%;
        border: 3px solid transparent;
        border-top-color: #FFF;
        /* COLOR 3 */       
        -moz-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
        -o-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
        -ms-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */        
        -webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
          animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */}
 
 
@-webkit-keyframes spin {
        0%{ 
            -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: rotate(0deg);  /* IE 9 */
            transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
        }100%{
            -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: rotate(360deg);  /* IE 9 */
            transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */}
}
 
@keyframes spin {
        0%{ 
            -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: rotate(0deg);  /* IE 9 */
            transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
        }100%{
            -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: rotate(360deg);  /* IE 9 */
            transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */}
}
 
 
#loader-wrapper .loader-section {
        position: fixed;
        top: 0;
        width: 51%;
        height: 100%;
        background: #23282d; /* Old browsers */
        z-index: 1000;
        -webkit-transform: translateX(0);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: translateX(0);  /* IE 9 */
        transform: translateX(0);  /* Firefox 16+, IE 10+, Opera */}
#loader-wrapper .loader-section.section-left {left: 0;}
#loader-wrapper .loader-section.section-right {right: 0;}
 
/* Loaded */
.loaded #loader-wrapper .loader-section.section-left {
        -webkit-transform: translateX(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: translateX(-100%);  /* IE 9 */
                transform: translateX(-100%);  /* Firefox 16+, IE 10+, Opera */
        -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);  
                transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);}
.loaded #loader-wrapper .loader-section.section-right {
        -webkit-transform: translateX(100%);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: translateX(100%);  /* IE 9 */
                transform: translateX(100%);  /* Firefox 16+, IE 10+, Opera */
        -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);  
        transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);}
.loaded #loader {
        opacity: 0;
        -webkit-transition: all 0.3s ease-out;  
                transition: all 0.3s ease-out;}
.loaded #loader-wrapper {
        visibility: hidden;
        -webkit-transform: translateY(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: translateY(-100%);  /* IE 9 */
                transform: translateY(-100%);  /* Firefox 16+, IE 10+, Opera */
        -webkit-transition: all 0.3s 1s ease-out;  
                transition: all 0.3s 1s ease-out;}
/* JavaScript Turned Off */
.no-js #loader-wrapper {display: none;}
.no-js h1 {color: #222222;}
#loader-wrapper .load_title {
    font-family:'Open Sans';
    color:#FFF; font-size:19px; width:100%; text-align:center; z-index:9999999999999; position:absolute; top:60%; opacity:1; line-height:30px; }
#loader-wrapper .load_title span {  font-weight:normal; font-style:italic; font-size:13px; color:#FFF; opacity:0.5;}

第二部

修改header.php

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

<!--页面加载start-->
<link rel="stylesheet" type="text/css" href="/loader.css">
 
<script type="text/javascript">         
    // 等待所有加载
    $(window).load(function(){
        $('body').addClass('loaded');
        $('#loader-wrapper .load_title').remove();
    }); 
</script>    
 
<div id="loader-wrapper">
    <div id="loader"></div>
    <div class="loader-section section-left"></div>
    <div class="loader-section section-right"></div>
    <div class="load_title">第一行文字<br>
                      <span>第二行文字</span>
</div>
</div>
<!--页面加载end-->

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

<?php if (is_home()) { ?>
<!--页面加载start-->
<link rel="stylesheet" type="text/css" href="/loader.css">
 
<script type="text/javascript">         
    // 等待所有加载
    $(window).load(function(){
        $('body').addClass('loaded');
        $('#loader-wrapper .load_title').remove();
    }); 
</script>    
 
<div id="loader-wrapper">
    <div id="loader"></div>
    <div class="loader-section section-left"></div>
    <div class="loader-section section-right"></div>
    <div class="load_title">第一行文字<br>
                      <span>第二行文字</span>
</div>
</div>
<!--页面加载end-->
<?php } ?>

注意

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

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

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

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

这篇文章如果帮到了你 打赏

展开阅读全文

分享到： 更多 (0)
赞 2
如果文章内容或图片资源失效或者您对文章有异议，请留言反馈或点击右下角邮件图标发送邮件说明情况，我们会及时处理，谢谢！

限量领取：歪分享资源屋一直在用的服务器，阿里云的服务，不用解释，最近搞活动，领券购买超级实惠，先到先得！

  • WordPress一键全站SSL插件：Really Simple SSL
    如果要给WordPress网站设置https，如果是新的网站，是没有问题的，如果是老站，可能会有一些问题： 比如全站资源https的问题，因为老的网站，或多或少都会有一些外链的资源，而这些外链的资源如果不支持https，那么全站https就...
  • 如何彻底移除并关闭WordPress的RSS feed
    WordPress默认开启了feed功能，好处不言而喻，可以方便RSS阅读器进行订阅，让读者及时收到博客的更新信息。但有些博客基本没有人订阅，却有一堆机器人来采集博客的feed，方便了别人复制你的文章不说，还造成了不必要的资源消耗。 阻止采...
  • WordPress 给最新文章和置顶文章添加new和top图标
    wordpress发布文章一般类型是置顶或者在默认正常。如果在置顶文章或者是24小时内最新发布的文章标题加上相应的图标，不仅可以增加美观，也可以提高用户浏览网站的点击率。网上有各种漂亮的图标大家可以自己去搜一下。然后上传网站替换下面代码的图...
  • 每个IP自定义时间弹窗转跳广告代码
    分享一段网页自定义ip时间转跳弹窗的广告代码，支持自定义设置用户IP重复转跳网址的时间，做到每个用户，每个IP一定时间内不重复弹窗的功能。 许多站长接广告的时候，因为弹窗价格比较高，所以经常会选择弹窗广告，不过这样对用户体验非常的差。 但是...
  • WordPress判断文章发布时间是否超过一个月时输出一段声明
    今天走访博客时发现一个小功能挺好的，就是判断文章发布时间是否超过一个月时输出一段声明。 因为百影阁是一个技术型、分享型网站，发布的文章时间久了可能有些技术功能已经过时、图片失效或者下载资源失效，当有访客再次阅读文章时，就应当设定一个友善的提...
  • 访问Google方法 2019 Google hosts 文件【2019-05-15】
    提示：hosts ip和谐速度可以用惊人形容，可以现在可以打开过会就不能用了，建议还是使用收费的，价格也没多少钱，稳定随便用速度又快 hosts所在文件夹： Windows 系统hosts位于 C:\Windows\System32\dri...
  • 更改WordPress主题之前必须做的15件事
    使用过WordPress的人都应该做过一件事，那就是更换主题。但如果你一直使用的就是默认主题，那就更好办了。WordPress最大的魅力就是，更换主题很简单轻松，但主题的更换不仅仅只是激活就完事了。本文将介绍更改WordPress主题之前必...
  • WordPress自定义登录页面LOGO、链接、文本、样式等
    自定义 WordPress 登录界面 Logo 在主题目录 functions.php 中加入以下代码： //自定义WordPress登录界面Logo function fanly_custom_login_logo() { echo '&...
  • WordPress非插件实现文章点赞功能
    功能丰富的WordPress点赞插件不少，但对于要在主题中集成简单文章点赞功能的需求，插件就显得不合适，于是乎非插件实现文章点赞功能的方法就诞生，实现思路是：可以通过ajax实时显示点赞数量，自定义字段保存赞数量，Cookies禁止重新点赞...
  • 关于Chrome 69版本的一些改变以及设置
    Chrome 69浏览器离线下载地址： Stable 稳定版 32 位：69.0.3497.81  缓存服务器 Stable 稳定版 64 位：69.0.3497.81  缓存服务器 Chrome 69 更新的主要功能： 界面变化. 更聪明...
  • WordPress 如何实现纯代码添加禁止某些用户登录的方法
    在某些特殊情况下某些用户损害了网站的利益，你可能就需要禁止他们登录网站，WordPress博客如何实现免插件纯代码添加禁止某些用户登录的方法，也就是WordPress博客用户怎么实现封号，近日以来网站垃圾信息，垃圾回复泛滥，由于之前不怎么关...
  • js各种跳转代码汇总
    js跳转代码在网页前端用得是比较多的了，甚至在后台php中也会直接用echo用到，主要是因为js跳转代码使用方面，不拖泥带水的，这里就来简单总结一下在前端js跳转代码的一个简单汇总。 按钮式的js跳转代码如下: <INPUT name...

评论 抢沙发

取消换名


歪主题

WordPress建站服务

歪主题为您提供专业的wordpress建站及建站周边服务...

售后服务 技术咨询 业务咨询
支付宝大额红包升级 10.88偏多
打开支付宝首页搜8774196领红包，领到大红包的小伙伴赶紧使用哦！

随机显示一些文章

最新文章

置顶推荐

歪迪资源屋

关注公众号

关注歪迪资源屋公众号

40442584@qq.com

本站资源来自互联网

QQ客服意见反馈

在线工具歪主题广告 网站地图

©2018 歪迪资源屋 - 歪迪更懂你！

歪主题提供支持

这里写点啥？

觉得文章有用就赞赏支持一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏