网站首页 > 技术文章正文

用前端实现“手电筒”效果，照亮世界!

nanyue 2025-08-03 07:01:17 技术文章 18 ℃

这个手电筒效果代码非常有趣！使用 CSS radial-gradient()可以实现类似手电筒的光照效果。这篇文章帮助大家理解如何通过动态更新鼠标位置来模拟手电筒的照射

通过鼠标移动动态更新手电筒的光圈位置，利用radial-gradient来生成不同的透明度和阴影效果，达到逼真的照射效果。

前置知识

radial-gradient 的用法：

circle 100px：定义了渐变的形状为圆形，并且指定了渐变的大小为 100px。
at var(--x) var(--y)：这部分使得渐变的中心跟随鼠标位置变化，即光圈的照射位置。
后续的颜色和透明度渐变（transparent 0%到rgba(0, 0, 0, .8) 100%）模拟了光照效果，从透明到深色，产生类似手电筒的阴影效果。

JavaScript 动态更新：

监听mousemove事件，将鼠标位置更新到 CSS 自定义属性--x和 --y，使得光圈随鼠标位置实时更新。

完整代码

<html>
<body>
<div class="radial-circle"></div>
</body>
<style>
  html,
body {
    width: 100%;
    height: 100%;
    background-image: url(https://picx.zhimg.com/v2-fba456bb85fd62c6b00e1f1ba2fe5467_r.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
  }

.radial-circle {
    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>

这个效果会带给你与众不同的视觉体验，尤其是对照背景图的情况下，手电筒效果的光亮

上一篇：分手后把前任从照片上P掉，这个服务可以有
下一篇：如何拥有渐变色 | css进阶

网站首页 > 技术文章 正文

用前端实现“手电筒”效果，照亮世界!

前置知识

猜你喜欢

网站首页 > 技术文章正文