website/contact.html at main · RecycleBin232/website · GitHub

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
102
103
104
105
106
107
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>私人联系方式 - RecycleBin's Page</title>
    <link rel="stylesheet" href="terminal.css">
    <link href="https://fontsapi.zeoseven.com/925/main/result.css" onload="this.rel='stylesheet'" rel="preload" as="style" crossorigin />
    <noscript><link rel="stylesheet" href="https://fontsapi.zeoseven.com/925/main/result.css" /></noscript>

    <style>
        /* 1. 字体与基础覆盖 */
        body {
            font-family: "Ark Pixel 12px P latin", monospace;
            background-color: var(--background); /* 使用 terminal.css 的深蓝背景 */
            color: var(--foreground);           /* 使用 terminal.css 的文字颜色 */
            min-height: 100vh;
            margin: 0;
            padding: 0;
            position: relative;
        }

        .container {
            max-width: 800px;
            margin: auto;
            padding: 40px 20px;
        }

        /* 2. 打字机效果：跟随 --accent 配色 */
        .typewriter {
            display: inline-block;
            overflow: hidden;
            white-space: nowrap;
            border-right: 3px solid var(--accent); /* 使用 terminal.css 的粉色作为光标 */
            width: 0;
            animation:
                typing 3.5s steps(30, end) forwards,
                blink 0.8s step-end infinite;
        }

        @keyframes typing {
            from { width: 0 }
            to { width: 100% }
        }

        @keyframes blink {
            from, to { border-color: transparent }
            50% { border-color: var(--accent) }
        }

        /* 3. 扫描线滤镜：颜色减淡处理，适配蓝调背景 */
        body::before {
            content: " ";
            display: block;
            position: fixed;
            top: 0; left: 0; bottom: 0; right: 0;
            background: linear-gradient(rgba(0, 66, 117, 0) 50%, rgba(0, 0, 0, 0.15) 50%);
            background-size: 100% 4px;
            z-index: 9999;
            pointer-events: none;
            opacity: 0.5;
        }

        /* 修正 terminal.css 可能带来的外边距问题 */
        h1, h2, p { margin-top: 0; }
        section { margin-bottom: 40px; }

        /* 链接悬停效果增强 */
        a:hover {
            background-color: var(--accent);
            color: var(--background) !important;
        }
        /* 标题右侧边框（光标） */
.terminal-title {
    display: inline-block; /* 确保边框紧贴文字末尾 */
    border-right: 8px solid var(--accent); /* 使用 CSS 里的配色 */
    padding-right: 10px;
    line-height: 1;
    animation: blink 0.8s step-end infinite;
}

.small-img {
    max-width: 200px; /* 限制最大宽度 */
    height: auto;
    margin: 0 auto;  /* 居中 */
}

@keyframes blink {
    from, to { border-color: transparent }
    50% { border-color: var(--accent) }
}
    </style>
</head>
<body class="terminal">
    <div class="container">
        <a href="index.html" class="back-link"><- 返回主页</a>

        <h1># 私人联系方式</h1>

        <section>
            <p>没事别加</p>
<figure>
    <img src="qq.jpg" alt="qq">
    <figcaption>QQ</figcaption>
</figure>
</body>
</html>