CSS Spotlight 效果实现教程：初始居中及响应式优化

新闻中心 NEWS CENTER

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

CSS Spotlight 效果实现教程：初始居中及响应式优化

2025-10-08

浏览次数：次

返回列表

css spotlight 效果实现教程：初始居中及响应式优化

本教程将引导你使用 CSS、HTML 和 J*aScript 创建一个聚光灯（Spotlight）效果。我们将解决页面加载时聚光灯不在页面中心的初始定位问题，并提供响应式优化的解决方案，确保在不同屏幕尺寸下都能获得最佳用户体验。通过本文，你将掌握如何利用 CSS 径向渐变和 J*aScript 事件监听来实现动态聚光灯效果，并了解如何使用媒体查询进行适配。

基础实现

首先，我们需要创建 HTML 结构，一个简单的 div 元素即可作为聚光灯容器：

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

接下来，使用 CSS 设置聚光灯的样式。关键在于使用 radial-gradient 创建聚光灯效果，并设置 position: fixed 使其固定在屏幕上。

.spotlight {
  position: fixed;
  width: 100%;
  height: 100%;
  pointer-events: none; /* 允许鼠标事件穿透聚光灯 */
  background-image: radial-gradient(circle, transparent 160px, rgba(0, 0, 0, 0) 200px);
}

这段 CSS 代码创建了一个从透明到半透明黑色的径向渐变，模拟聚光灯的效果。pointer-events: none 确保聚光灯不会阻挡鼠标事件，允许用户与页面上的其他元素交互。

然后，使用 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}`;
  }
});

这段代码在页面加载完成后，获取聚光灯元素，并监听鼠标移动事件。updateSpotlight 函数根据鼠标的坐标动态更新径向渐变的中心位置，实现聚光灯跟随鼠标的效果。

解决初始定位问题

上述代码存在一个问题：页面加载时，聚光灯可能不会出现在屏幕中心，而是在右下角。为了解决这个问题，我们需要在 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}`;`，我们可以在页面加载时将聚光灯定位到屏幕中心。

青泥AI

青泥学术AI写作辅助平台

360 查看详情青泥AI

响应式优化

为了在不同屏幕尺寸下获得更好的效果，我们需要进行响应式优化。例如，在移动设备上，我们可能希望聚光灯固定在屏幕中心，而不是跟随鼠标移动。可以使用 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 检测屏幕宽度是否大于 800px。如果大于 800px，则添加鼠标移动事件监听器，使聚光灯跟随鼠标移动；否则，将聚光灯固定在屏幕中心。

同时，我们也可以使用 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);
  }
}

在这个例子中，当屏幕宽度小于 800px 时，聚光灯的 position 属性为 absolute，且径向渐变的中心固定在 50% 50%。当屏幕宽度大于等于 800px 时，聚光灯的 position 属性为 fixed，并且J*aScript代码控制其跟随鼠标。

总结

通过本教程，我们学习了如何使用 CSS、HTML 和 J*aScript 创建一个聚光灯效果，并解决了初始定位和响应式优化的问题。关键点包括：

使用 radial-gradient 创建聚光灯效果。
使用 DOMContentLoaded 事件处理函数设置聚光灯的初始位置。
使用 matchMedia 方法和 CSS 媒体查询进行响应式优化。
pointer-events: none 属性使得聚光灯不影响鼠标事件。

希望本教程对你有所帮助！你可以根据自己的需求调整聚光灯的大小、颜色和透明度，以及响应式断点，以获得最佳的用户体验。

以上就是CSS Spotlight 效果实现教程：初始居中及响应式优化的详细内容，更多请关注其它相关文章！

相关栏目：【科技资讯46185 】【网络学院92790 】

上一篇：Vue Virtual Scroller 结合 VueUse 实现无限滚动

下一篇：优雅地结合 Async/Await 与可取消的 Bluebird Promise

首页

关于我们

产品展示

咨询研究

新闻中心

留言板

联系我们

新闻中心 NEWS CENTER

CSS Spotlight 效果实现教程：初始居中及响应式优化

基础实现

解决初始定位问题

响应式优化

总结