Roberta001.github.io/games.html at main · Roberta001/Roberta001.github.io · 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
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>H5游戏</title>
    <link rel="stylesheet" href="style.css"><style>
    body {
      background-color: black;
      font-family: Consolas, Monaco, Menlo, 'Ubuntu Mono', 'Liberation Mono', monospace;
      color: black;
    }
    .cursor {
      display: inline-block;
      width: 20px;
      height: 40px;
      background-color: black;
      vertical-align: text-top; /* 修改：设置为底部对齐 */
      animation: blink 0.8s infinite;
    }
    @keyframes blink {
      50% {
        opacity: 0;
      }
    }
    </style>

</head>

<body style="opacity:0;">
    <!-- 首先将 body 的透明度设为 0 -->
    <header>
        <h1><p><span id="content" style="line-height: 20px;"></span><span class="cursor"></span></p>
  <script>;
    const text = "    Roberta的小窝";
    let index = 0;
    const content = document.getElementById("content");
    const intervalId = setInterval(() => {
      if (index === text.length) {
        clearInterval(intervalId);
        return;
      }
      content.textContent += text[index];
      index++;
    }, 200);
  </script></h1>
    </header>


    <section class="content">
        <h2>H5游戏</h2>
        <h3>
            <a href="./games/51/">50层魔塔<br></a>
        </h3>
    </section>
    <footer>
        <iframe src="aboutme.html"></iframe>
    </footer>
    <script>
    window.onload = function() {
        document.body.style.opacity = "1"; // 当页面加载完成时，将 body 的透明度设为 1，实现渐变的过渡动画
    }
    </script>
</body>
</html>