hexo添加页面加载动画
2022-04-13 14:17:38 # 博客篇
修改配置文件
在 hexo 博客主题文件_config.yml中添加
# 开启页面加载动画
preloader:
enable: true打开主题目录中 /layout/_partial /head.ejs文件，将 以下内容填入<head> 标签中。
<link
rel="stylesheet"
type="text/css"
href="<%- theme.jsDelivr.url %><%- url_for('/css/loading.css') %>"
/>打开主题目录 中/layout/layout.ejs文件，将 以下内容填入<body> 标签中。
<%- partial('_widget/loading') %>添加文件
在主题目录/layout/_widget下添加loading.ejs文件
<% 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>
window.addEventListener('load', function(){
document.body.style.overflow = 'auto';
document.getElementById('loading-box').classList.add("loaded")
}, false)
</script>
<% } %>在主题目录/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);
}
}部署
hexo c
hexo g
hexo d