使用 CSS、HTML 和 JavaScript 创建聚光灯效果-html教程-PHP中文网

使用 CSS、HTML 和 JavaScript 创建聚光灯效果

花韻仙語

发布： 2025-10-08 11:55:01

原创

854人浏览过

使用 css、html 和 javascript 创建聚光灯效果

本文将指导你如何使用 CSS、HTML 和 JavaScript 创建一个跟随鼠标移动的聚光灯效果。我们将解决页面加载时聚光灯初始位置不在中心的问题，并探讨如何在不同屏幕尺寸下优化聚光灯效果，使其在移动设备上也能正常显示。通过本文的学习，你将掌握使用径向渐变和事件监听器实现动态视觉效果的关键技术。

实现聚光灯效果

首先，我们需要创建一个 HTML 元素作为聚光灯的容器，并应用相应的 CSS 样式。

HTML:

<div class="spotlight"></div>

登录后复制

CSS:

立即学习“Java免费学习笔记（深入）”；

.spotlight {
  position: fixed;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-image: radial-gradient(circle, transparent 160px, rgba(0, 0, 0, 0) 200px);
}

登录后复制

这段 CSS 代码将 .spotlight 元素定位为固定位置，使其覆盖整个屏幕。pointer-events: none; 属性确保聚光灯效果不会阻止鼠标事件传递到下方的元素。background-image 属性使用径向渐变创建聚光灯效果，中心区域透明，周围逐渐变为黑色。

JavaScript 实现鼠标跟随

接下来，使用 JavaScript 监听鼠标移动事件，并动态更新聚光灯的背景图像。

window.addEventListener("DOMContentLoaded", () => {
  const spotlight = document.querySelector('.spotlight');
  let spotlightSize = 'transparent 160px, rgba(0, 0, 0, 0.85) 200px)';
  window.addEventListener('mousemove', e => updateSpotlight(e));

  function updateSpotlight(e) {
    spotlight.style.backgroundImage = `radial-gradient(circle at ${e.pageX / window.innerWidth * 100}% ${e.pageY / window.innerHeight * 100}%, ${spotlightSize}`;
  }
});

登录后复制

这段代码在页面加载完成后，获取 .spotlight 元素，并添加一个 mousemove 事件监听器。当鼠标移动时，updateSpotlight 函数会被调用，该函数根据鼠标的坐标动态更新 background-image 属性，从而实现聚光灯跟随鼠标移动的效果。

聚好用AI

可免费AI绘图、AI音乐、AI视频创作，聚集全球顶级AI，一站式创意平台

115

查看详情

解决初始位置问题

默认情况下，页面加载时聚光灯可能不在屏幕中心。为了解决这个问题，可以在 DOMContentLoaded 事件中，手动设置聚光灯的初始位置。

window.addEventListener("DOMContentLoaded", () => {
  const spotlight = document.querySelector('.spotlight');
  let spotlightSize = 'transparent 160px, rgba(0, 0, 0, 0.85) 200px)';
  spotlight.style.backgroundImage = `radial-gradient(circle at ${window.innerWidth/2}px ${window.innerHeight/2}px, ${spotlightSize}`;
  window.addEventListener('mousemove', e => updateSpotlight(e));

  function updateSpotlight(e) {
    spotlight.style.backgroundImage = `radial-gradient(circle at ${e.pageX / window.innerWidth * 100}% ${e.pageY / window.innerHeight * 100}%, ${spotlightSize}`;
  }
});

登录后复制

在 DOMContentLoaded 事件监听器中，我们添加了一行代码：spotlight.style.backgroundImage = \radial-gradient(circle at ${window.innerWidth/2}px ${window.innerHeight/2}px, ${spotlightSize}`;`。这行代码在页面加载时，将聚光灯的中心位置设置为屏幕的中心。

适配移动设备

在移动设备上，鼠标移动事件可能不适用。为了在移动设备上也能正常显示聚光灯效果，可以使用 matchMedia 方法检测屏幕宽度，并根据屏幕宽度决定是否启用鼠标跟随效果。

window.addEventListener("DOMContentLoaded", ()=>{
  const spotlight = document.querySelector('.spotlight');
  let spotlightSize = 'transparent 160px, rgba(0, 0, 0, 0.85) 200px)';
  //attach mousemove event listener if media query matches. 
  if (matchMedia('only screen and (min-width: 800px)').matches) {
    window.addEventListener('mousemove', updateSpotlight);

    function updateSpotlight(e) {
      spotlight.style.backgroundImage = `radial-gradient(circle at ${e.pageX / window.innerWidth * 100}% ${e.pageY / window.innerHeight * 100}%, ${spotlightSize}`;
    }

  } else {
    spotlight.style.backgroundImage = `radial-gradient(circle at ${window.innerWidth/2}px ${window.innerHeight/2}px, ${spotlightSize}`;
  }
});

登录后复制

这段代码使用 matchMedia('only screen and (min-width: 800px)').matches 检测屏幕宽度是否大于 800px。如果屏幕宽度大于 800px，则启用鼠标跟随效果；否则，将聚光灯固定在屏幕中心。

此外，为了在屏幕尺寸变化时也能正确显示聚光灯效果，可以监听 resize 事件，并根据新的屏幕尺寸重新定位聚光灯。

CSS (配合移动端适配):

.spotlight {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-image: radial-gradient(circle at 50% 50%, transparent 160px, rgba(0, 0, 0, 0.85) 200px);
}

@media only screen and (min-width: 800px) {
  .spotlight {
    position: fixed;
    background-image: radial-gradient(circle at 50% 50%, transparent 160px, rgba(0, 0, 0, 0) 200px);
  }
}

登录后复制