站点最近换 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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!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="%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>