本文详细介绍了如何使用 CSS、HTML 和 JavaScript 创建一个跟随鼠标移动的聚光灯效果。我们将解决页面加载时聚光灯初始位置不在中心的问题，并提供在移动设备上优化聚光灯效果的方案，包括使用媒体查询来控制聚光灯的行为，使其在小屏幕设备上默认居中显示，在大屏幕设备上跟随鼠标移动。
实现基本的聚光灯效果
首先，我们需要创建一个 HTML 元素作为聚光灯的容器，并使用 CSS 设置其样式。然后，使用 JavaScript 监听鼠标移动事件，并动态更新聚光灯的位置。
HTML:
CSS:
立即学习“Java免费学习笔记（深入）”；
.spotlight { position: fixed; /* 使用 fixed 定位，使其始终位于视口中 */ width: 100%; height: 100%; pointer-events: none; /* 允许鼠标事件穿透聚光灯 */ background-image: radial-gradient(circle, transparent 160px, rgba(0, 0, 0, 0.85) 200px);}
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}`; }});
这段代码创建了一个覆盖整个屏幕的 div 元素，并使用径向渐变来模拟聚光灯效果。pointer-events: none 属性确保鼠标事件可以穿透聚光灯，从而不影响页面上的其他元素。JavaScript 代码监听 mousemove 事件，并根据鼠标的位置动态更新径向渐变的中心点，从而实现聚光灯跟随鼠标移动的效果。
解决初始位置问题
上述代码存在一个问题：页面加载时，聚光灯的初始位置不在中心。为了解决这个问题，我们需要在 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 事件处理函数中，添加了一行代码来设置聚光灯的初始位置。通过将径向渐变的中心点设置为 window.innerWidth/2 和 window.innerHeight/2，可以确保聚光灯在页面加载时始终位于屏幕中心。
移动设备优化
在移动设备上，聚光灯效果可能不太理想，因为移动设备通常没有鼠标。为了在移动设备上提供更好的体验，我们可以使用媒体查询来控制聚光灯的行为。例如，我们可以设置在屏幕宽度小于 800px 的设备上，聚光灯始终位于屏幕中心，而在屏幕宽度大于等于 800px 的设备上，聚光灯跟随鼠标移动。
CSS:
立即学习“Java免费学习笔记（深入）”；
.spotlight { position: absolute; /* 默认使用 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; /* 大屏幕设备使用 fixed 定位 */ background-image: radial-gradient(circle at 50% 50%, transparent 160px, rgba(0, 0, 0, 0) 200px); /* 初始透明 */ }}
JavaScript:
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，则聚光灯始终位于屏幕中心。否则，将添加 mousemove 事件监听器，使聚光灯跟随鼠标移动。
注意事项:
可以根据实际需求调整媒体查询的阈值。还可以处理窗口大小调整事件，以便在屏幕宽度发生变化时动态更新聚光灯的行为。
总结
本文介绍了如何使用 CSS、HTML 和 JavaScript 创建一个跟随鼠标移动的聚光灯效果。我们解决了页面加载时聚光灯初始位置不在中心的问题，并提供了在移动设备上优化聚光灯效果的方案。通过使用媒体查询，我们可以根据屏幕大小动态调整聚光灯的行为，从而在各种设备上提供更好的用户体验。
以上就是使用 CSS、HTML 和 JavaScript 实现聚光灯效果的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1582382.html
微信扫一扫 
支付宝扫一扫 
