使用 CSS、HTML 和 JavaScript 实现聚光灯效果
引言
聚光灯效果是一种常见的前端视觉特效，它能在页面上创建一个圆形或椭圆形的高亮区域，周围区域则呈现暗淡效果，从而引导用户的注意力。本文将详细介绍如何使用 CSS、HTML 和 JavaScript 来实现这一效果。
实现思路
实现聚光灯效果的核心思路是利用 CSS 的径向渐变来创建高亮区域，然后通过 JavaScript 监听鼠标移动事件，动态更新渐变的中心位置，从而实现聚光灯跟随鼠标移动的效果。
HTML 结构
首先，我们需要创建一个基本的 HTML 结构，包含一个用于显示聚光灯效果的容器和一个覆盖层。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Spotlight Effect</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Spotlight Effect Demo</h1>
<p>Move your mouse to see the spotlight effect.</p>
<img src="https://ippipp.com/800/400" alt="Demo Image">
</div>
<div class="overlay"></div>
<script src="script.js"></script>
</body>
</html>CSS 样式
接下来，我们使用 CSS 来设置页面的基本样式，并定义聚光灯效果的样式。关键在于使用径向渐变来创建高亮区域。
body {
margin: 0;
padding: 0;
height: 100vh;
overflow: hidden;
}
.container {
position: relative;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #f0f0f0;
}
.container h1 {
font-size: 3rem;
color: #333;
margin-bottom: 1rem;
}
.container p {
font-size: 1.2rem;
color: #666;
margin-bottom: 2rem;
}
.container img {
max-width: 80%;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
background: radial-gradient(circle at 50% 50%, transparent 100px, rgba(0, 0, 0, 0.8) 200px);
}JavaScript 交互
最后，我们使用 JavaScript 来监听鼠标移动事件，并根据鼠标的位置动态更新聚光灯的中心位置。
const overlay = document.querySelector('.overlay');
document.addEventListener('mousemove', (e) => {
const x = e.clientX;
const y = e.clientY;
overlay.style.background = `radial-gradient(circle at ${x}px ${y}px, transparent 100px, rgba(0, 0, 0, 0.8) 200px)`;
});代码解释
- HTML 部分：创建了一个包含标题、段落和图片的容器，以及一个覆盖层。覆盖层将用于显示聚光灯效果。
- CSS 部分：
- 设置了页面的基本样式，确保容器占满整个视口。
- 使用径向渐变创建了聚光灯效果，其中
transparent表示高亮区域，rgba(0, 0, 0, 0.8)表示暗淡区域。 - JavaScript 部分：
- 获取覆盖层的 DOM 元素。
- 监听
mousemove事件，获取鼠标的当前位置。 - 根据鼠标位置动态更新覆盖层的径向渐变背景，使聚光灯跟随鼠标移动。
优化与扩展
- 调整聚光灯大小和强度：可以通过修改径向渐变中的数值来调整聚光灯的大小和强度。例如，增大
transparent和rgba(0, 0, 0, 0.8)的数值可以增加聚光灯的范围。 - 添加动画效果：可以使用 CSS 过渡或 JavaScript 动画库来为聚光灯的移动添加平滑的动画效果。
- 支持触摸设备：可以添加对触摸事件的支持，使聚光灯效果在触摸设备上也能正常工作。
总结
通过结合 CSS 的径向渐变和 JavaScript 的事件监听，我们可以轻松实现一个简单而有效的聚光灯效果。这种效果可以用于突出显示页面上的特定元素，增强用户体验。你可以根据自己的需求进一步定制和优化这个效果。