站点最近换 Dream2.0 Plus 主题了，但还是喜欢原来改的404动画，所以我手动修改了新主题的默认404模版代码，实现了和原来差不多的动画效果。
在横屏下使用css实现了动态的404动画，https://12520.net/404
参考了群内xjzsq大佬手搓的css代码：https://github.com/xjzsq/404-page
使用了js判断是否空间是否足够显示404动画，在 window.innerWidth >= 1440 时才展示，否则会使用图片替代。
横屏效果
竖屏效果
修改的主题代码：halo2/themes/theme-dream2-plus/templates/error/common/error_default.html
<!DOCTYPE html>
<th:block xmlns:th="https://www.thymeleaf.org"
th:fragment="error_fragment"
th:insert="~{common/layout :: layout (title = ${error.status + ' - ' + #strings.defaultString(error.title, 'Internal server error')},
canonical = ${site.url + '/' + error.status}, content = ~{::content}, isPost = true)}">
<th:block th:fragment="content"
th:with="posts = ${postFinder.list(1,6)}, isEmpty = ${#lists.isEmpty(posts)}">
<div class="card">
<div class="title card-content main-title" th:text="${error.status + '错误 - ' + site.title}"></div>
</div>
<div class="card">
<div class="card-content">
<div class="main-content">
<div style="margin: 20px 0; text-align: center; ">
<th:block th:if="${error.status == 404}">
<div id="404-1" style="display: none; transform: scale(0.8);">
<div style="position: relative; display: flex; animation: error-404-moveFiexd 4s forwards; margin-left: -30%;">
<div style="height: 150px; color: rgb(0, 136, 255); font-size: 131px; line-height: 150px; opacity: 0; animation: error-404-transparency 4s forwards;">
4
</div>
<div style="display: flex; flex-direction: column; align-items: center; justify-content: flex-end;">
<div style="position: relative; width: 100px; height: 50px; overflow: hidden;">
<div style="position: absolute; box-sizing: border-box; width: 100px; height: 100px; border: 15px solid rgb(0, 136, 255); border-radius: 50%; transform: translateY(100%) scaleX(70%); filter: blur(2px); animation: error-404-myMoveTop 2s forwards; opacity: 0.3;">
</div>
</div>
<div style="position: relative; width: 100px; height: 50px; overflow: hidden;">
<div style="position: absolute; box-sizing: border-box; width: 100px; height: 100px; border: 15px solid rgb(0, 136, 255); border-radius: 50%; transform: translateY(-150%) scaleX(70%); filter: blur(2px); animation: error-404-myMoveBottom 2s forwards; opacity: 0.3;">
</div>
</div>
<div style="width: 0px; height: 10px; background: rgb(255, 55, 0); margin-top: 5px; animation: error-404-myMoveSliver 4s forwards;">
</div>
</div>
<div style="height: 150px; color: rgb(0, 136, 255); font-size: 131px; line-height: 150px; opacity: 0; animation: error-404-transparency 4s forwards;">
4 Not Found
</div>
<style>
@keyframes error-404-transparency {
50% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes error-404-myMoveSliver {
50% { width: 0px; }
100% { width: 50px; }
}
@keyframes error-404-myMoveBottom {
70% { filter: blur(2px); opacity: 0.8; }
100% { transform: translateY(-50%) scaleX(70%); filter: blur(0px); opacity: 1; }
}
@keyframes error-404-myMoveTop {
70% { filter: blur(0px); opacity: 0.8; }
100% { transform: scaleX(70%); filter: blur(0px); opacity: 1; }
}
@keyframes error-404-moveFiexd {
50% { left: 5%; }
100% { left: 20%; }
}
</style>
</div>
</div>
<div id="404-2" style="display: none;">
<div>
<img src="/upload/%E5%9C%B0%E5%9B%BE%E9%94%99%E8%AF%AF.png" alt="404">
<h1 style="font-size: 32px;color: rgb(0, 136, 255);">404 Not Found</h1>
</div>
</div>
<script>
function checkSize() {
if (window.innerWidth >= 1440) {
document.getElementById('404-1').style.display = 'inline-block';
document.getElementById('404-2').style.display = 'none';
}
else {
document.getElementById('404-1').style.display = 'none';
document.getElementById('404-2').style.display = 'block';
}
}
// 页面加载时检查一次
window.onload = checkSize;
// 窗口大小改变时检查
window.onresize = checkSize;
</script>
</th:block>
<p th:if="${error.status == 404}" style="font-size: 1.4em;text-indent: 2em;">找不到网页，可能已被删除，去<a href='/' aria-label="首页" title="首页">首页</a>看看吧。</p>
<p th:unless="${error.status == 404}" style="font-size: 1.4em;text-indent: 2em;">围观群众太过热情，服务器繁忙，请稍后访问。</p>
</div>
</div>
</div>
</div>
<th:block th:if="${!isEmpty}">
<div class="card">
<div class="title card-content main-title">最新文章推荐</div>
</div>
<th:block th:replace="~{main/article_list :: articleList (${posts.items})}"/>
</th:block>
</th:block>
</th:block>
评论