404页面设计#

腾讯404公益——QQ空间

在网站中的404.php页面中进行添加修改

1
<!doctype html>
2
<html>
3
<head>
4
    <meta charset="utf-8">
5
    <meta name="description" content=" XXXX的 404 错误页面，当您看到这个页面，表示您的访问出错，这个错误是您打开的页面不存在，请确认您输入的地址是正确的!虽然你访问的页面找不回来了，但是我们可以一起贡献自己的一份力量!" />
6
    <meta name="keywords" content="404,404 错误页面,404 公益计划" />
7
    <title>404 Not Found - 公益计划</title>
8
</head>
9
<body>
10
    <script type="text/javascript" src="https://volunteer.cdn-go.cn/404/latest/404.js" charset="utf-8"></script>
11
</body>
12
</html>

网站停用提示页#

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
<meta charset="UTF-8">
5
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6
<title>站点暂停访问</title>
7
<style>
8
    body {
9
        margin: 0;
10
        padding: 0;
11
        font-family: 'Arial', sans-serif;
12
        background-color: #f2f2f2;
13
        display: flex;
14
        justify-content: center;
15
        align-items: center;
16
        height: 100vh;
17
        overflow: hidden;
18
    }
19

20
    .pause-container {
21
        text-align: center;
22
        position: relative;
23
        width: 100%;
24
        max-width: 600px;
25
    }
26

27
    .pause-icon {
28
        font-size: 48px;
29
        color: #333;
30
        margin-bottom: 20px;
31
        animation: pulse 2s infinite;
32
    }
33

34
    @keyframes pulse {
35
        0% { transform: scale(1); }
36
        50% { transform: scale(1.1); }
37
        100% { transform: scale(1); }
38
    }
39

40
    h1 {
41
        font-size: 32px;
42
        font-weight: bold;
43
        color: #333;
44
        margin: 0 0 20px 0;
45
    }
46

47
    p {
48
        font-size: 18px;
49
        color: #666;
50
        margin: 0;
51
    }
52

53
    .pause-overlay {
54
        position: absolute;
55
        top: 0;
56
        left: 0;
57
        width: 100%;
58
        height: 100%;
59
        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path d="M0,100 C100,0 200,100 100,200" style="fill:none;stroke:rgba(0,0,0,0.1);stroke-width:2" /></svg>');
60
        background-size: 50px 50px;
61
        animation: overlay-animation 2s linear infinite;
62
        opacity: 0.5;
63
    }
64

65
    @keyframes overlay-animation {
66
        0% { background-position: 0 0; }
67
        100% { background-position: 50px 50px; }
68
    }
69

70
    /* 响应式布局 */
71
    @media (max-width: 600px) {
72
        h1 {
73
            font-size: 28px;
74
        }
75
        p {
76
            font-size: 16px;
77
        }
78
    }
79
</style>
80
</head>
81
<body>
82
    <div class="pause-container">
83
    <div class="pause-icon"></div>
84
    <h1>站点暂停访问</h1>
85
    <p>很抱歉，该站点暂时无法访问。请联系管理员了解详情。</p>
86
    <div class="pause-overlay"></div>
87
    </div>
88
</body>
89
</html>

随机诗词#

jinrishici.com

1
<p style="color:white;font-weight:bold">随机诗词</p>
2
<script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>
3
<div id="poem_sentence"></div>
4
<div id="poem_info"></div>
5
<script type="text/javascript">
6
    jinrishici.load(function(result) {
7
        var sentence = document.querySelector("#poem_sentence")
8
        var info = document.querySelector("#poem_info")
9
        sentence.innerHTML = result.data.content
10
        info.innerHTML = '【' + result.data.origin.dynasty + '】' + result.data.origin.author + '《' + result.data.origin.title + '》'
11
    });
12
</script>

随机一言#

https://developer.hitokoto.cn/sentence/demo.html

https://v1.hitokoto.cn/（从7种分类中随机抽取）
https://v1.hitokoto.cn/?c=b （请求获得一个分类是漫画的句子）
https://v1.hitokoto.cn/?c=f&encode=text （请求获得一个来自网络的句子，并以纯文本格式输出）

1
<p style="color:white;font-weight:bold">随机一言</p>
2
<p id="hitokoto"><a href="#" id="hitokoto_text">:D 获取中...</a></p>
3
<p id="hitokoto"><a href="#" id="hitokoto_info">:D 获取中...</a></p>
4
<script>
5
    fetch('https://v1.hitokoto.cn/?c=b ')
6
        .then(response => response.json())
7
        .then(data => {
8
            const hitokoto = document.querySelector('#hitokoto_text')
9
            hitokoto.href = `https://v1.hitokoto.cn/?c=b?uuid=${data.uuid}`
10
            hitokoto.innerText = data.hitokoto
11
            const hitokotoInfo = document.querySelector('#hitokoto_info')
12
            hitokotoInfo.href = `https://v1.hitokoto.cn/?c=b?uuid=${data.uuid}`
13
            hitokotoInfo.innerText = data.from_who+"《"+data.from+"》"
14
    })
15
    .catch(console.error)
16
</script>

背景滚动模糊#

1
<!--滚动模糊-->
2
<script>
3
    window.addEventListener("scroll", function (e) {
4
    if (window.scrollY > window.innerHeight * 0.3) {
5
      document.querySelector("#content").classList.add("scrolled");
6
    } else {
7
      document.querySelector("#content").classList.remove("scrolled");
8
    }});
9
</script>
10
<style>
11
    #content.scrolled::before, #content.scrolled::after {
12
        filter: blur(6px); /*数字越大虚化越明显*/
13
        transform: scale(1.02); /*数字越大背景放大越明显*/
14
    }
15
    #content::before, #content::after {
16
        transition: filter .3s ease, transform .3s ease !important;
17
        filter: blur(0px);
18
        transform: scale(1.02);
19
    }
20
</style>