CSS实现手电筒光照效果

发表于2025/5/21 02:22
53浏览
0评论
14分钟阅读

又发现了好玩的了，使用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;
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>