Matery主题自定义(六)页面加载动画
前言
这个页面加载动画效果我是按照简书中一位博主的文章做的，他写的也很详细，可以点击目录【参考】，点击连接查看他的文章，如果有幸你留下了，那我们就出发了
创建加载动画文件
想要添加页面加载动画，那么第一步当然是的创建一个对应的文件，模块化开发嘛
结构代码
在 themes>hexo-theme-matery>layout>_widget 下创建一个 loading.ejs 文件，将下面的代码 cv 进去
<% if (theme.preloader.enable) { %> <div id="loading-box"> <div></div> <div></div> <div> <div> <div></div> </div> <div> <div></div> </div> <div>加载中...</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: 0; } #loading-box>.spinner-box { position: fixed; z-index: 1001; display: flex; justify-content: center; align-items: center; width: 100%; height: 100vh; } #loading-box .spinner-box .configure-border-1 { position: absolute; padding: 3px; width: 115px; height: 115px; background: #ffab91; animation: configure-clockwise 3s ease-in-out 0s infinite alternate; } #loading-box .spinner-box .configure-border-2 { left: -115px; padding: 3px; width: 115px; height: 115px; background: rgb(63, 249, 220); transform: rotate(45deg); animation: configure-xclockwise 3s ease-in-out 0s infinite alternate; } #loading-box .spinner-box .loading-word { position: absolute; color: #ffffff; font-size: 0.8rem; } #loading-box .spinner-box .configure-core { width: 100%; height: 100%; background-color: #37474f; } div.loaded div.loading-left-bg { transform: translate(-100%, 0); } div.loaded div.loading-right-bg { transform: translate(100%, 0); } div.loaded div.spinner-box { display: none !important; } @keyframes configure-clockwise { 0% { transform: rotate(0); } 25% { transform: rotate(90deg); } 50% { transform: rotate(180deg); } 75% { transform: rotate(270deg); } 100% { transform: rotate(360deg); } } @keyframes configure-xclockwise { 0% { transform: rotate(45deg); } 25% { transform: rotate(-45deg); } 50% { transform: rotate(-135deg); } 75% { transform: rotate(-225deg); } 100% { transform: rotate(-315deg); } } 复制代码添加至页面
在将加载动画添加至页面中
找到 themes>hexo-theme-matery>layout>_partial>head.ejs 文件，这个文件专门用来引入样式文件和配置网页信息
在 <head> 标签中引入 loading.css 文件
<link rel="stylesheet" type="text/css" href="<%- theme.jsDelivr.url %><%- url_for('/css/loading.css') %>"> 复制代码引入样式文件后，引入结构文件 loading.ejs，插入在themes>hexo-theme-matery>layout>layout.ejs <body> 标签下第一行就行了
<%- partial('_widget/loading') %> 复制代码配置
最后在主题配置文件中进行配置 _config.yml，true 是开启；false 是关闭
# 是否开启页面加载动画 preloader: enable: true 复制代码
Matery 主题自定义系列撒花了，如果今后又有什么新的花里胡哨的的东西再和大家分享
作者：望间
链接：https://juejin.cn/post/7047004430079623204