本文将指导你如何使用 CSS、HTML 和 JavaScript 创建一个跟随鼠标移动的聚光灯效果。我们将解决页面加载时聚光灯初始位置不在中心的问题，并探讨如何在不同屏幕尺寸下优化聚光灯效果，使其在移动设备上也能正常显示。通过本文的学习，你将掌握使用径向渐变和事件监听器实现动态视觉效果的关键技术。
实现聚光灯效果
首先，我们需要创建一个 HTML 元素作为聚光灯的容器，并应用相应的 CSS 样式。
HTML:
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 属性，从而实现聚光灯跟随鼠标移动的效果。
解决初始位置问题
默认情况下，页面加载时聚光灯可能不在屏幕中心。为了解决这个问题，可以在 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); }}
总结
通过本文的学习，你已经掌握了使用 CSS、HTML 和 JavaScript 创建聚光灯效果的关键技术，包括使用径向渐变创建聚光灯效果、使用事件监听器实现鼠标跟随效果、解决初始位置问题以及适配移动设备。希望这些知识能帮助你创建更加炫酷的网页视觉效果。
以上就是使用 CSS、HTML 和 JavaScript 创建聚光灯效果的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1582392.html
微信扫一扫 
支付宝扫一扫 
