如何用原生HTML/CSS/JS实现显示隐藏网站功能的移动蒙版彩蛋？

核心思路 #

放弃截图或iframe的复杂方案，直接在页面中叠加两个完整的网站容器（正常版+隐藏版），通过CSS mask控制顶层容器的显示区域——仅让鼠标位置的圆形区域透出底层的隐藏网站，同时隐藏系统光标，用自定义圆形元素替代，完美保留两个版本网站的动态交互能力。

具体实现步骤 #

1. 页面结构布局 #

• 底层容器：#hidden-site，放置隐藏版网站的所有内容，全屏覆盖页面。
• 顶层容器：#normal-site，放置正常版网站的所有内容，同样全屏覆盖，默认完全显示。
• 自定义光标：一个跟随鼠标的圆形元素，用于视觉提示透视区域。

2. CSS基础设置 #

/* 触发彩蛋后隐藏系统光标 */
body.easter-egg-active {
  cursor: none;
  overflow: hidden;
}

/* 两个网站容器的基础布局 */
#normal-site, #hidden-site {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: auto;
}

/* 正常网站样式 */
#normal-site {
  background: #ffffff;
  color: #333333;
  /* 初始mask：完全显示，触发后动态修改 */
  mask: radial-gradient(circle 50px at 0 0, transparent 100%, #000 100%);
  mask-repeat: no-repeat;
  /* 平滑过渡鼠标移动时的mask变化 */
  transition: mask-position 0.05s ease;
}

/* 隐藏网站样式（自定义配色、字体、动画） */
#hidden-site {
  background: #1a1a2e;
  color: #e94560;
  font-family: 'Comic Sans MS', cursive;
  /* 这里可以添加插画动画的基础样式 */
}

/* 自定义圆形光标 */
.custom-cursor {
  position: fixed;
  width: 100px;
  height: 100px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
}

3. JavaScript交互逻辑 #

const triggerBtn = document.getElementById('easter-egg-trigger');
const normalSite = document.getElementById('normal-site');
const customCursor = document.createElement('div');
customCursor.className = 'custom-cursor';

let isActive = false;

// 切换彩蛋状态
function toggleEasterEgg() {
  isActive = !isActive;
  document.body.classList.toggle('easter-egg-active');

  if (isActive) {
    document.body.appendChild(customCursor);
    document.addEventListener('mousemove', updatePerspectiveArea);
  } else {
    document.body.removeChild(customCursor);
    document.removeEventListener('mousemove', updatePerspectiveArea);
    normalSite.style.mask = 'none';
  }
}

// 更新透视区域和光标位置
function updatePerspectiveArea(e) {
  const x = e.clientX;
  const y = e.clientY;
  // 调整顶层容器的mask，让圆形中心跟随鼠标
  normalSite.style.maskPosition = `${x}px ${y}px`;
  // 调整自定义光标位置
  customCursor.style.left = `${x - 50}px`;
  customCursor.style.top = `${y - 50}px`;
}

// 绑定触发按钮事件
triggerBtn.addEventListener('click', toggleEasterEgg);

解决原方案的核心问题 #

• 保留动态元素：两个容器都是真实DOM结构，所有交互组件、动画都能正常运行，无需截图。
• 无需iframe裁剪：直接通过CSS mask控制顶层显示区域，不需要对iframe做特殊处理，逻辑简洁易维护。

额外优化技巧 #

• 用CSS变量统一控制圆形半径：--perspective-radius: 50px，修改时只需调整变量值。
• 若隐藏网站需要交互，可在彩蛋激活时给#hidden-site添加pointer-events: auto，同时给#normal-site设置pointer-events: none（需确保正常网站的交互仅在彩蛋关闭时生效）。
• 添加彩蛋激活/关闭的过渡动画，比如给#normal-site的mask属性添加渐变过渡，让透视效果的出现更自然。

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