带超链接的闪烁文本页面开发问题求助

问题修复说明 #

1. 解决仅单状态链接有效 #

原代码中后渲染的blink2始终覆盖在blink上方，即使透明也会阻挡点击。改为切换两个元素的显示状态，确保当前可见元素的链接可被点击。

2. 解决白底状态无法铺满页面 #

新增body背景色切换逻辑，让整个页面背景随文字状态同步变化，不再仅局限于文字区域。

3. 解决页面自适应窗口问题 #

• 设置html基准字体为视窗宽度的1%，让rem单位随窗口缩放自适应。
• 调整文字尺寸为相对单位，限制最大宽度避免溢出。
• 用全屏容器确保内容始终居中且占满视口。

修改后完整代码 #

HTML #

<body>
  <!-- 全屏容器，确保内容居中且占满视口 -->
  <div class="fullscreen-container">
    <h1 id="blink" class="blink-item">
      <a href="page1.html"> hello </a>
    </h1>
  </div>
  <div class="fullscreen-container">
    <h1 id="blink2" class="blink-item">
      <a href="page2.html"> hello </a>
    </h1>
  </div>
</body>

CSS #

/* 重置默认边距，确保页面无留白 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 设置基准字体，让rem随窗口宽度自适应 */
html {
  font-size: 1vw;
}

body {
  background-color: black;
  transition: background-color 0.25s; /* 背景色切换添加过渡，更平滑 */
}

/* 全屏容器，占满整个视口 */
.fullscreen-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.blink-item {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10rem;
  font-weight: 800;
  text-align: center;
  max-width: 90%; /* 限制最大宽度，避免超出窗口 */
}

#blink {
  color: black;
  background-color: white;
  display: none; /* 初始隐藏 */
}

#blink2 {
  color: white;
  background-color: black;
}

a {
  text-decoration: none;
  cursor: pointer;
  color: inherit;
  display: block; /* 让链接占满整个h1区域，点击范围更大 */
}

JavaScript #

function toggleBlink() {
  const blink = document.getElementById("blink");
  const blink2 = document.getElementById("blink2");
  const body = document.body;

  // 切换两个元素的显示状态
  const isBlink2Visible = blink2.style.display !== 'none';
  blink.style.display = isBlink2Visible ? 'block' : 'none';
  blink2.style.display = isBlink2Visible ? 'none' : 'block';

  // 同步切换body背景色
  body.style.backgroundColor = isBlink2Visible ? 'white' : 'black';

  setTimeout(toggleBlink, 250);
}

toggleBlink();

内容的提问来源于stack exchange，提问作者user24875129