CSS 打造手电筒光照效果，超简单！
在网页设计的世界里，总有一些小创意能给我们的页面增添别样的趣味。今天，我要和大家分享一个超好玩的技巧 ------ 用 CSS 实现手电筒光照效果！宝子们，是不是听起来就很酷？别急，接着往下看，手把手教你搞定。
一、核心原理： radial - gradient 的魅力
这个神奇效果的关键就在于 background: radial-gradient() 。它能创建一个径向渐变，简单来说，就是颜色从一个中心点向四周发散开来的渐变效果。它的基本语法长这样：
background: radial-gradient([shape] [size] at [position], color1 [stop1], color2 [stop2], ...);
乍一看有点复杂，别慌！我来给大家拆解一下。[shape] 就是渐变的形状，比如 circle 表示圆形，ellipse 表示椭圆形；[size] 用来定义渐变的大小范围；at [position] 指定渐变的中心位置；后面跟着的就是各种颜色及其对应的停止位置啦。
咱直接看个简单的例子，感受一下这个渐变的神奇。假设我们写成：
background: radial-gradient(circle at 100px 100px, red, blue 50%, green 100%);
意思就是，创建一个圆形的径向渐变，中心在距离左上角 100px、100px 的位置。颜色从中心开始是红色，然后在 50% 的位置变成蓝色，最后在 100% 的位置变成绿色。是不是很直观？
二、打造手电筒光照效果：代码实战
好啦，光说不练假把式。直接上我们实现手电筒光照效果的完整代码吧：
html
<html>
<body>
<div class="flashlight"></div>
</body>
<style>
html,
body {
width: 100%;
height: 100%;
background-image: url(https://fastly.jsdelivr.net/gh/bucketio/img16@main/2025/06/24/1750735460479-c318c8e9-df17-469d-a930-459784710ac7.png);
background-repeat: no-repeat;
background-size: cover;
overflow: hidden;
}
.flashlight {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle 100px at var(--x) var(--y), transparent 0%, transparent 5%, rgba(0, 0, 0, .5) 80%, rgba(0, 0, 0, .7) 90%, rgba(0, 0, 0, .8) 100%);
}
</style>
<script>
document.addEventListener('mousemove', (e) => {
document.documentElement.style.setProperty('--x', `${e.clientX}px`);
document.documentElement.style.setProperty('--y', `${e.clientY}px`);
});
</script>
</html>先给大家捋一捋。在 html 和 body 的样式里，我设置了一个全屏的背景图，还把重复和平铺啥的都禁掉，防止图片显示乱七八糟的。然后重点看咱们的 .flashlight 类。这个 position: absolute 就是让这个元素脱离文档流，方便我们全屏定位。关键是这个 background: radial-gradient() ，我设置了一个圆形的渐变，中心位置用 var(--x) 和 var(--y) 来动态表示，后面跟着的就是光照效果从透明到较暗的颜色过渡啦。
最精彩的部分在 script 标签里。我监听了鼠标的移动事件，只要鼠标一动，就把鼠标的横纵坐标分别赋值给 --x 和 --y ，这样咱们的光照效果就能跟着鼠标跑啦。是不是很巧妙？
三、效果展示与小结
宝子们，是不是很神奇？鼠标一动，就像手电筒的光在黑暗背景上扫来扫去。这个效果是不是瞬间让页面生动了起来？而且呢，这个办法超级简单，只要掌握了 radial-gradient 的用法，再配合点小脚本，分分钟就能搞定。
其实呢，这个小技巧在生活中也能用上。比如咱们做个悬疑类的网页游戏，玩家只能在手电筒光照范围内探索，增加神秘感；或者做个氛围感十足的夜间主题网页，这种光照效果一加，瞬间代入感拉满。不过呢，大家在用的时候可以多试试不同的颜色、渐变范围和透明度，说不定能整出更炫酷的效果呢。
宝子们，快去试试吧！要是觉得这个教程有用，别忘了点赞关注哦，咱们下期再见，拜拜 ~