如何使用鼠标光标给网页带来黑暗中的光效果

Question

我有兴趣制作一个完全黑暗的网页效果（在黑暗中，我的意思是黑暗如夜，根本没有灯光），并给鼠标光标一个灯光效果来照亮周围。
我应该用什么来达到这样的效果？我尝试在 CSS 和网络上寻找答案，但没有找到类似的内容。
我唯一发现的是这个WordPress 插件，但它已修复并且无法自定义或使用。

Answer 1

我知道这是一个旧线程，但我对自己制作效果很感兴趣，并在 jsfiddle 上制作了一些我认为可以完成任务的东西。

代码位于 jsfiddle，并复制到此处并附有说明。一切都很简单。

超文本标记语言

我使用 id 创建了一个 div light，然后使用了一个名为 的包装 div，content其中包含 lorum ibsum。

<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元素（页面上的顶级元素）设计为具有黑色文本和黑色背景，因此默认情况下所有内容都会隐藏。

接下来我用 id 设置 div 的样式light。我将我的高度设置为 100 像素，宽度设置为 100 像素，将背景设置为黄色，并将其设置border-radius为 50 像素，宽度/高度的一半，形成一个圆圈。我还制作了 div position: relative，因此它脱离了正常的页面流，并且可以放置在其他元素之上，这对于我们创建效果所需的分层非常重要。我决定在用户​​移动鼠标之前为手电筒设置一个默认位置（更多内容请参见 JS 部分），因此我将 和top属性设置left为 50%，使其在页面上居中。

最后，我向内容包装器 div 添加了规则，设置position: relative10.z-index或position: relative需要position: absolute开始z-index工作；z-index控制哪些元素堆叠在哪个元素之上。因此，将内容 div（即文本）设置为较高的z-index，使其显示在浅色 div 的顶部，您现在可以看到浅色 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

超文本标记语言

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

$(document).mousemove(function(event) {
    $('#light').offset({
        top: event.pageY - 50,
        left: event.pageX - 50
    });
});