CSS 打造手电筒光照效果,超简单

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>

先给大家捋一捋。在 htmlbody 的样式里,我设置了一个全屏的背景图,还把重复和平铺啥的都禁掉,防止图片显示乱七八糟的。然后重点看咱们的 .flashlight 类。这个 position: absolute 就是让这个元素脱离文档流,方便我们全屏定位。关键是这个 background: radial-gradient() ,我设置了一个圆形的渐变,中心位置用 var(--x)var(--y) 来动态表示,后面跟着的就是光照效果从透明到较暗的颜色过渡啦。

最精彩的部分在 script 标签里。我监听了鼠标的移动事件,只要鼠标一动,就把鼠标的横纵坐标分别赋值给 --x--y ,这样咱们的光照效果就能跟着鼠标跑啦。是不是很巧妙?

三、效果展示与小结

宝子们,是不是很神奇?鼠标一动,就像手电筒的光在黑暗背景上扫来扫去。这个效果是不是瞬间让页面生动了起来?而且呢,这个办法超级简单,只要掌握了 radial-gradient 的用法,再配合点小脚本,分分钟就能搞定。

其实呢,这个小技巧在生活中也能用上。比如咱们做个悬疑类的网页游戏,玩家只能在手电筒光照范围内探索,增加神秘感;或者做个氛围感十足的夜间主题网页,这种光照效果一加,瞬间代入感拉满。不过呢,大家在用的时候可以多试试不同的颜色、渐变范围和透明度,说不定能整出更炫酷的效果呢。

宝子们,快去试试吧!要是觉得这个教程有用,别忘了点赞关注哦,咱们下期再见,拜拜 ~

相关推荐
求知若渴,虚心若愚。4 小时前
Error reading config file (/home/ansible.cfg): ‘ACTION_WARNINGS(default) = True
linux·前端·ansible
LinDaiuuj5 小时前
最新的前端技术和趋势(2025)
前端
一只小风华~5 小时前
JavaScript 函数
开发语言·前端·javascript·ecmascript·web
程序猿阿伟6 小时前
《不只是接口:GraphQL与RESTful的本质差异》
前端·restful·graphql
若梦plus7 小时前
Nuxt.js基础与进阶
前端·vue.js
樱花开了几轉7 小时前
React中为甚么强调props的不可变性
前端·javascript·react.js
风清云淡_A7 小时前
【REACT18.x】CRA+TS+ANTD5.X实现useImperativeHandle让父组件修改子组件的数据
前端·react.js
小飞大王6667 小时前
React与Rudex的合奏
前端·react.js·前端框架
若梦plus8 小时前
React之react-dom中的dom-server与dom-client
前端·react.js
若梦plus8 小时前
react-router-dom中的几种路由详解
前端·react.js