使用 CSS、HTML 和 J*aScript 创建聚光灯效果_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

使用 CSS、HTML 和 J*aScript 创建聚光灯效果

2025-10-08

浏览次数：次

返回列表

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

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

实现聚光灯效果

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

HTML:

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

CSS:

.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 属性使用径向渐变创建聚光灯效果，中心区域透明，周围逐渐变为黑色。

J*aScript 实现鼠标跟随

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

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 属性，从而实现聚光灯跟随鼠标移动的效果。

解决初始位置问题

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

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

使用HTML,CSS,J*aScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和J*aScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用J*a。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

2 查看详情使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

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);
  }
}