用CSS实现手电筒光照效果

橙子2025-06-09 10:46　339 浏览

打赏收藏

‌又发现了好玩的了，使用CSS可以实现手电筒效果，独乐乐不如众乐乐，赶紧分享给大家玩！这是一个使用CSS和JS实现的手电筒光照效果网页。当鼠标移动时，光照会跟随移动，创造出动态的光照体验。

‌又发现了好玩的了，使用CSS可以实现手电筒效果，独乐乐不如众乐乐，赶紧分享给大家玩！

关键代码就是 background: radial-gradient()

基本语法结构

background: radial-gradient(
  [shape] [size] at [position],  /* 渐变形状、大小和位置 */
  color1 [stop1],                /* 第一个颜色及其位置 */
  color2 [stop2],                /* 第二个颜色及其位置 */
  ...                            /* 可选更多颜色 */
);

看语法可能不太明白；不过没关系；可以直接看下面的效果图

由上图可知；手电筒效果很好呢。

完整代码如下：

<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>

‌最后觉得好玩的；可以直接复制完整代码去玩哦！

作者：邢同学爱折腾链接：https://juejin.cn/post/7503365162059268146 来源：稀土掘金著作权归作者所有。

相关标签：手电筒效果