用CSS实现手电筒光照效果

时间：2025-06-09 10:46热度：137

‌又发现了好玩的了，使用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 来源：稀土掘金著作权归作者所有。

相关标签：手电筒效果