能否仅用HTML和CSS实现遮罩覆盖？制作可动画聚光灯效果

核心思路 #

利用绝对定位的独立元素作为“显示窗口”，容器设置半透明遮罩背景，窗口元素通过背景图复用原图并对齐，配合CSS动画实现窗口的XY轴移动效果，全程无需JavaScript。

实现步骤与代码示例 #

1. HTML结构 #

沿用你提出的布局，容器内包含原图和多个窗口元素：

<div class="relative-container">
  <img class="full-img" src="你的图片URL" alt="展示图片" />
  <span class="mask-window big"></span>
  <span class="mask-window small"></span>
  <span class="mask-window big"></span>
  <span class="mask-window medium"></span>
</div>

2. CSS样式实现 #

/* 容器基础设置：相对定位+全局遮罩 */
.relative-container {
  position: relative;
  width: 600px;
  height: 400px;
  background-color: rgba(0, 0, 0, 0.7); /* 遮罩透明度可按需调整 */
  overflow: hidden;
}

/* 原图铺满容器 */
.full-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 窗口元素通用样式 */
.mask-window {
  position: absolute;
  border-radius: 50%; /* 圆形窗口，可改为0实现方形，或用clip-path自定义形状 */
  background-image: url("你的图片URL"); /* 与原图保持一致 */
  background-size: cover;
  animation: windowMove 8s infinite alternate ease-in-out;
}

/* 不同尺寸窗口 */
.big {
  width: 120px;
  height: 120px;
  animation-duration: 10s; /* 动画时长差异化 */
}

.medium {
  width: 90px;
  height: 90px;
  animation-duration: 7s;
  animation-delay: 1s; /* 延迟启动，增强错落感 */
}

.small {
  width: 60px;
  height: 60px;
  animation-duration: 5s;
  animation-delay: 2s;
}

/* 窗口移动动画关键帧 */
@keyframes windowMove {
  0% {
    top: 20%;
    left: 15%;
    background-position: -15% -20%; /* 反向定位，确保窗口显示对应区域 */
  }
  25% {
    top: 60%;
    left: 30%;
    background-position: -30% -60%;
  }
  50% {
    top: 30%;
    left: 70%;
    background-position: -70% -30%;
  }
  75% {
    top: 70%;
    left: 50%;
    background-position: -50% -70%;
  }
  100% {
    top: 10%;
    left: 80%;
    background-position: -80% -10%;
  }
}

关键细节说明 #

• 遮罩逻辑：容器的半透明背景作为全局遮罩，窗口元素通过背景图显示原图对应区域，形成“挖洞聚焦”效果
• 图片对齐：窗口的background-position需与top/left反向设置，确保窗口显示的内容与下方原图完全对应
• 动画优化：给不同窗口设置差异化的时长和延迟，避免动画同步导致的生硬感；使用alternate属性让动画来回循环

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