如何用CSS自定义属性实现聚光灯效果

CSS自定义属性也就是我们常说的CSS变量，它允许我们在样式表中定义可复用、可动态修改的属性值，结合CSS的裁剪、渐变和动画能力，可以很方便地实现聚光灯效果。这种效果可以模拟灯光照射的效果，让页面内容呈现出层次感，提升视觉吸引力。

CSS自定义属性基础

CSS自定义属性以--开头命名，通常定义在根伪类:root中，这样可以在整个文档中复用。定义之后通过var()函数来调用自定义属性的值。

下面是一个简单的自定义属性定义示例：

:root {
  /* 定义聚光灯的位置自定义属性 */
  --spotlight-x: 50%;
  --spotlight-y: 50%;
  /* 定义聚光灯的半径 */
  --spotlight-radius: 150px;
}

.box {
  /* 调用自定义属性 */
  background: radial-gradient(
    circle at var(--spotlight-x) var(--spotlight-y),
    rgba(255, 255, 255, 0.8) 0%,
    rgba(255, 255, 255, 0) var(--spotlight-radius)
  );
}

聚光灯效果实现原理

聚光灯效果的核心逻辑是通过径向渐变radial-gradient生成一个中心亮、边缘暗的圆形区域，再通过clip-path或者背景叠加的方式，让这个亮区只显示在指定范围内。而CSS自定义属性的作用就是动态控制这个亮区的位置和大小，配合@keyframes动画就可以实现聚光灯移动的效果。

基础聚光灯效果实现

首先我们创建一个容器，给容器添加一个暗色的背景，再叠加一个径向渐变的半透明层，通过自定义属性控制渐变的中心位置，就可以得到基础的聚光灯效果。

<style>
:root {
  --spot-x: 50%;
  --spot-y: 50%;
  --spot-r: 120px;
}

.spotlight-container {
  position: relative;
  width: 800px;
  height: 400px;
  background: #1a1a2e;
  overflow: hidden;
  margin: 0 auto;
}

.spotlight-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle at var(--spot-x) var(--spot-y),
    rgba(255, 255, 255, 0.9) 0%,
    rgba(255, 255, 255, 0.1) 60%,
    transparent var(--spot-r)
  );
  pointer-events: none;
}

.content {
  position: relative;
  z-index: 1;
  color: #fff;
  padding: 40px;
  font-size: 18px;
  line-height: 1.6;
}
</style>

<div class="spotlight-container">
  <div class="spotlight-mask"></div>
  <div class="content">
    <h3>聚光灯效果展示</h3>
    <p>这是一段被聚光灯照射的内容，亮区会跟随自定义属性定义的位置变化。</p>
  </div>
</div>

添加动画让聚光灯移动

我们可以通过@keyframes定义动画，在动画的不同阶段修改自定义属性的值，让聚光灯在容器内移动。同时给遮罩层添加animation属性应用动画。

<style>
:root {
  --spot-x: 50%;
  --spot-y: 50%;
  --spot-r: 120px;
}

/* 定义聚光灯移动的动画 */
@keyframes moveSpotlight {
  0% {
    --spot-x: 20%;
    --spot-y: 30%;
  }
  25% {
    --spot-x: 70%;
    --spot-y: 20%;
  }
  50% {
    --spot-x: 80%;
    --spot-y: 70%;
  }
  75% {
    --spot-x: 30%;
    --spot-y: 80%;
  }
  100% {
    --spot-x: 20%;
    --spot-y: 30%;
  }
}

.spotlight-container {
  position: relative;
  width: 800px;
  height: 400px;
  background: #1a1a2e;
  overflow: hidden;
  margin: 0 auto;
}

.spotlight-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle at var(--spot-x) var(--spot-y),
    rgba(255, 255, 255, 0.9) 0%,
    rgba(255, 255, 255, 0.1) 60%,
    transparent var(--spot-r)
  );
  pointer-events: none;
  /* 应用动画，持续8秒，无限循环，线性速度 */
  animation: moveSpotlight 8s linear infinite;
}

.content {
  position: relative;
  z-index: 1;
  color: #fff;
  padding: 40px;
  font-size: 18px;
  line-height: 1.6;
}
</style>

<div class="spotlight-container">
  <div class="spotlight-mask"></div>
  <div class="content">
    <h3>动态聚光灯效果</h3>
    <p>聚光灯会按照预设的轨迹在容器内循环移动，所有位置变化都通过CSS自定义属性控制。</p>
  </div>
</div>

交互式聚光灯效果

如果希望聚光灯跟随鼠标移动，只需要监听容器的mousemove事件，计算鼠标在容器内的相对位置，再动态修改根元素上的自定义属性即可，不需要修改CSS样式逻辑。

// 获取聚光灯容器
const container = document.querySelector('.spotlight-container');
// 监听鼠标移动事件
container.addEventListener('mousemove', (e) => {
  // 计算鼠标在容器内的相对位置百分比
  const x = ((e.clientX - container.getBoundingClientRect().left) / container.offsetWidth) * 100;
  const y = ((e.clientY - container.getBoundingClientRect().top) / container.offsetHeight) * 100;
  // 修改CSS自定义属性
  document.documentElement.style.setProperty('--spot-x', `${x}%`);
  document.documentElement.style.setProperty('--spot-y', `${y}%`);
});

对应的CSS部分只需要保留之前的遮罩层样式，不需要修改动画相关代码，就可以实现鼠标跟随的聚光灯效果。

注意事项

• CSS自定义属性的动画支持需要浏览器兼容，现代浏览器基本都支持该特性，如果需要兼容旧版本浏览器可以做降级处理。
• 聚光灯的半径和透明度可以根据实际需求调整自定义属性的值，灵活控制效果强度。
• 如果页面中有多个聚光灯效果，可以给不同的容器定义不同的自定义属性前缀，避免属性冲突。

CSS自定义属性聚光灯效果clip_pathlinear_gradientanimation修改时间：2026-06-04 07:09:11