我知道这是一个旧线程，但我对自己制作效果很感兴趣，并开始了jsfiddle 上的东西我认为可以完成任务。
代码位于 jsfiddle，并复制到此处并附有说明。一切都很简单。
HTML
我用 id 创建了一个 divlight，然后我使用了一个包装 div，称为content，包含 lorem ipsum。
<div id="light"></div>
<div class="content">
<h1>Flashlight test</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
CSS
我设计了html元素，这是页面上的顶级元素，具有黑色文本和黑色背景，因此默认情况下所有内容都会被隐藏。
接下来我用lightID。我将我的高度设置为 100 像素，宽度设置为 100 像素，将背景设置为黄色，并给它一个border-radius50px，宽度/高度的一半，形成一个圆圈。我也做了divposition: relative，因此它脱离了正常的页面流，并且可以放置在其他元素之上，这对于我们创建效果所需的分层非常重要。我决定在用户移动鼠标之前为手电筒设置一个默认位置（更多内容请参见 JS 部分），因此我设置了top and left属性设置为 50%，使其在页面上居中。
最后，我向内容包装 div 添加了规则，设置position: relative和z-index to 10. position: relative or position: absolute需要得到z-index上班;z-index控制哪些元素堆叠在哪个元素之上。因此将内容div（即文本）设置为更高z-index，使其出现在浅色 div 的顶部，由于背景较浅，您现在可以看到它。
html {
color: #000;
background-color: #000;
}
.content {
position: relative;
z-index: 10;
}
#light {
top: 50%;
left: 50%;
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
background-color: rgb(231, 221, 122);
}
JavaScript
JS只有6行，使用jQuery。它所做的只是使用以下命令设置元素的偏移量 - 位置 -mousemove()事件函数。该函数有一个参数，用于保存鼠标所在位置的坐标。从该数字中减去 50 个像素以使光线居中，您就得到了效果。
$(document).mousemove(function(event) {
$('#light').offset({
top: event.pageY - 50,
left: event.pageX - 50
});
});
编辑：现代更新
遵循与上述相同的原则，以下是如何利用我最初编写答案时不可用的功能来利用更现代的普通编码实践。
完整演示在这里：https://codepen.io/bronzehedwick/pen/oNdRwYN
HTML
<div id="light" style="--light-position-y: 0; --light-position-x: 0"></div>
<div class="content">
<h1>Flashlight test</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
CSS
body {
background-color: black;
}
.content {
position: relative;
z-index: 10;
}
#light {
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
transform: translate(var(--light-position-x, 0px), var(--light-position-y, 0px));
background-color: rgb(231, 221, 122);
}
JavaScript
var light = document.getElementById('light');
document
.documentElement
.addEventListener('mousemove', function handleMouseMove(event) {
light.style.setProperty('--light-position-y', (event.clientY - 50) + 'px');
light.style.setProperty('--light-position-x', (event.clientX - 50) + 'px');
});
