Matery主题自定义(六)页面加载动画

最新推荐文章于 2024-08-22 17:38:39 发布

Dream_ruins

最新推荐文章于 2024-08-22 17:38:39 发布

阅读量1.2k

点赞数 3

分类专栏： Hexo 文章标签：前端 hexo

本文链接：https://blog.csdn.net/weixin_43662760/article/details/122311217

版权

本文介绍了如何在Matery主题中自定义页面加载动画，包括创建loading.ejs和loading.css文件，添加样式代码，将动画引入页面以及在_config.yml中进行配置。详细步骤帮助你为博客增加人性化体验。

摘要由CSDN通过智能技术生成

文章目录

Matery主题自定义(六)页面加载动画

Matery主题自定义(六)页面加载动画

当小伙伴网络差浏览你博客时，一直看白屏也太不人性化了，不如加个加载动画

前言

这个页面加载动画效果我是按照简书中一位博主的文章做的，他写的也很详细，可以点击目录【参考】，点击连接查看他的文章，如果有幸你留下了，那我们就出发了

创建加载动画文件

想要添加页面加载动画，那么第一步当然是的创建一个对应的文件，模块化开发嘛

结构代码

在 themes>hexo-theme-matery>layout>_widget 下创建一个 loading.ejs 文件，将下面的代码 cv 进去

<% if (theme.preloader.enable) { %>
  <div id="loading-box">
    <div class="loading-left-bg"></div>
    <div class="loading-right-bg"></div>
    <div class="spinner-box">
      <div class="configure-border-1">
        <div class="configure-core"></div>
      </div>
      <div class="configure-border-2">
        <div class="configure-core"></div>
      </div>
      <div class="loading-word">加载中...</div>
    </div>
  </div>
  <!-- 页面加载动画 -->
  <script>
    $(document).ready(function () {
      document.body.style.overflow = 'auto';
      document.getElementById('loading-box').classList.add("loaded")
    })
  </script>
<% } %>

样式代码

完成了结构代码，下面就开始样式代码了，不然没有样式的动画也太丑了，下面的就是样式代码

当然，在复制粘贴代码之前，需要先创建样式文件

在 themes>hexo-theme-matery>source>css> 下创建一个新的文件 loading.css，在将下面的代码复制粘贴

#loading-box .loading-left-bg,
#loading-box .loading-right-bg {
   
  position: fixed;
  z-index: 1000;
  width: 50%;
  height: 100%;
  background-color: #37474f;
  transition: all 0.5s;
}

#loading-box .loading-right-bg {
   
  right