修改主题加载动画
# 前言
主题默认加载动画是旋转的猫猫（ha），鉴于个人想要折腾的想法，修改成其他喜爱的加载动画
主题的加载动画实际上就是一个单独的播放循环动画的网页 div 块（ <div id="loading"> )，页面最开始显示这个 div 块，加载完成后设置隐藏，即 <div id="loading" style="opacity: 0; display: none;">
# 实现
# 修改 nunjucks (layout)
找到
themes\shoka\layout\_partials\目录；修改
layout.njk, 修改<div id="loading">的位置，大概 12 行左右:<div id="loading"><div class="cat"><div class="body"></div>
<div class="head"><div class="face"></div>
</div><div class="foot"><div class="tummy-end"></div>
<div class="bottom"></div>
<div class="legs left"></div>
<div class="legs right"></div>
</div><div class="paw"><div class="hands left"></div>
<div class="hands right"></div>
</div></div></div>将
loading的div块内填入新的loading的html部分，以本网站动画为例，loading下改为:<div id="loading"><div class="reliefload"><span style="--i:0;"></span>
<span style="--i:1;"></span>
<span style="--i:2;"></span>
<span style="--i:3;"></span>
<span style="--i:4;"></span>
<span style="--i:5;"></span>
<span style="--i:6;"></span>
</div></div>
# 修改 Stylus
找到
themes\shoka\source\css\_common\components\third-party\loading.styl；修改最开头的
loding的css:
#loading { | |
@extend $fix-fullscreen; | |
background-color: var(--grey-1); | |
if(!hexo-config('loader.start')) { | |
display: none; | |
} | |
} |
新增居中 css ，修改为
#loading { | |
@extend $fix-fullscreen; | |
background-color: var(--grey-1); | |
if(!hexo-config('loader.start')) { | |
display: none; | |
} | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
} |
- 在下方新增新增的
loding的css代码（可以删除原来的代码）按本网站举例：
.reliefload { | |
display: flex; | |
span { | |
position: relative; | |
width: 50px; | |
height: 50px; | |
background-color: #eaeef0; | |
margin: 0 10px; | |
border-radius: 50%; | |
box-shadow: -8px -8px 15px $bgColor, // 此处使用的是原主题 css 部分设置的颜色变量引用，可以直接替换为 16 进制颜色代码 | |
8px 8px 15px rgba(0,0,0,0.2), | |
inset 3px 3px 5px rgba(0,0,0,0.1), | |
inset -1px -1px 5px rgba(255,255,255,1); | |
border: 6px solid #eaeef0; | |
+mobile() { | |
width: 20px; | |
height: 20px; | |
border: 3px solid #eaeef0; | |
} | |
+tablet() { | |
width: 30px; | |
height: 30px; | |
border: 4px solid #eaeef0; | |
} | |
&::before { | |
content: ""; | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
background-color: lightseagreen; | |
border-radius: 50%; | |
box-shadow: inset 3px 3px 5px rgba(0,0,0,0.1), | |
inset -1px -1px 5px rgba(255,255,255,1); | |
opacity: 0; | |
animation: animaterelief 3.5s linear infinite, | |
animateColor5s linear infinite; | |
animation-delay: calc(var(--i) * 0.15s); | |
} | |
} | |
} | |
@keyframes animaterelief { | |
0%,9.99%,70.01%{ | |
opacity: 0; | |
} | |
10%,70%{ | |
opacity: 1; | |
} | |
} | |
@keyframes animateColor { | |
to{ | |
filter: hue-rotate(360deg); | |
} | |
} |
其中， +mobile() 和 +tablet() 部分是适配移动端的 css，要根据自己的实际情况设置对应的参数：
# 修复页面内加载动画位置偏移的问题
找到
themes\shoka\source\css\_common\outline\outline.styl；40 行左右找到
#main的css配置项，仿照.cat的写法，加入loading的div下包围整个加载动画的div块：.cat {margin-top: 10rem;margin-top: 20rem;}删除
.cat加入或者直接在下方加入新的css：.cat {margin-top: 10rem;margin-top: 20rem;}.reliefload {margin-top: 20rem;margin-left: 15rem;}其中：根据自己的实际情况调整
margin的值。
完成！
