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

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

2019-01-29 wordpress技巧 84 0
歪迪资源屋有话要说：大锅 本站免费分享的资源均来自网络，如有侵权及其他事宜请点击联系我们处理

网页加载需要一个过程，现在这个过程可以极短了，不过有些朋友还是希望能用一个动画来代替这个过程，让加载不再那么枯燥。搜索了一下，很多这类文章，方法很多，利用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)
赞 0
如果文章内容或图片资源失效或者您对文章有异议，请留言反馈或点击右下角邮件图标发送邮件说明情况，我们会及时处理，谢谢！

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

  • WordPress插件-Post Expirator 给文章或页面设置一个到期时间
    有些时候，一些文章或页面没必要始终展示，比如公告，活动，广告等，但是对于像我一样的懒人们又不想拐回去关闭文章，或者忘记关闭文章。这是你就需要这样一个插件。 Post Expirator 这个插件使用起来比较简单，功能也够强大，可以为文章或者...
  • 2019科学上网工具简单评测，畅快游戏无延迟、无卡顿
    无法提供摘要。这是一篇受保护的文章。
  • 代码实现网站外链自动转换为内链
    实现步骤： 首先复制以下代码，添加到主题目录下的function.php文件中 /*  *自动给文章的外部链接添加nofollow属性  */    add_filter('the_content','web589_the_content_...
  • PHP输入密码才能访问这个页面的代码
    给任意php页面增加一个密码保护，需要输入正确密码才能访问 <html> <head> <title>title</title </head> <body> 输入密码才能访问...
  • official多用途企业门户官网类WordPress主题自适应wordpress企业主题
    official多用途企业门户官网类WordPress主题WordPress企业主题是由歪主题出品的一款比较简洁实用非常简单的一款wordpress企业类型主题，主题虽然包含多项设置选项，但真正需要设置的很少很少，所以无论你有无经验都可以轻...
  • 教你在线下载YouTube等网站高清视频 亲测有效
    网上有很多下载YouTuBe视频的方法，我试了好多，唯一有效的方法就是这个了。 如果要问我怎么登上的YouTuBe，推荐一个科学上网软件“科学上网工具”。 1、在地址栏里输入https://www.youtube.com/，按下回车键。 2...
  • DUX主题文章页相关推荐双栏显示
    DUX主题是themebetter原创开发的一款基于WordPress程序的多功能主题，响应式布局，不同设备不同展示效果，简洁大气  ，多设备支持、优化SEO，适用于垂直站点、科技博客、个人站，目前我站点使用的就是DUX主题，作为一个喜欢折...
  • 纯代码实现WordPress文章页展开收缩功能
    网上关于实现文章内容“展开/收缩”效果的方法有很多，但是有很多代码似乎已经不可用，而另一些虽然可用但是前端显示效果不怎么美观，于是我便根据网上的一些代码进行了些许的改动便有了这篇文章。下面我们就来具体了解下如何实现文章内容的“展开/收缩”功...
  • 为亮点功能添加快捷按钮
    其实该功能主要是通过 CSS 样式的调整来实现的，实现方式虽然简单但是前端显示效果确实不错，官方给出的调用方式也极其简单，通过下面两行代码调用： <ol class="liangdian"> <li><stro...
  • WordPress 后台文章编辑器添加下拉式短代码选择
    // 后台编辑器添加下拉式按钮 function wzt_select(){ echo ' <select id="short_code_select"> <option value="请选择一个短代码！！！">插入...
  • 五个步骤提升你的WordPress安全等级
    我敢肯定你周围肯定有关于WordPress安全的小故事，或者是数据库被入侵，或者是网站被挂马，甚至整个网站都没了。因此，是非常有必要地针对WordPress执行一些安全措施，尽可能降低WordPress因漏洞而被黑客做手脚。 如何提高你的W...
  • 七大免费WordPress画廊相册插件
    如果你正在准备建立一个以图片为主的WordPress博客，你可能需要考虑图片展示的问题。如果直接平铺一张张展示，貌似显得有点乏味，且会将页面拉得很长。WordPress自带的相册功能，有比较单一。 So，今天的主题是图片和图片相册。事不宜迟...

评论 抢沙发

取消换名


歪主题

WordPress建站服务

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

售后服务 技术咨询 业务咨询

随机显示一些文章

最新文章

置顶推荐

歪迪资源屋

关注公众号

关注歪迪资源屋公众号

40442584@qq.com

本站资源来自互联网

QQ客服意见反馈

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

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

歪主题提供支持

这里写点啥？

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

支付宝扫一扫打赏

微信扫一扫打赏