css - 如何使用鼠标光标使网页在黑暗中发光

Question

我有兴趣制作一个完全黑暗的网页效果(在黑暗中，我的意思是黑暗如夜，根本没有灯光)，并给鼠标光标一个灯光效果来照亮周围的环境。
我应该用什么来达到那种效果？我已经尝试在 CSS 中和通常在网络上寻找答案，但没有找到任何类似的东西。
我唯一找到的是 this plugin适用于 WordPress，但它是固定的，无法自定义或使用。

Answer 1

我知道这是一个旧话题，但我对自己制作效果很感兴趣，于是决定 something on jsfiddle我认为完成了任务。

代码在 jsfiddle 上，并复制到这里并附上解释。一切都非常简单。

HTML

我创建了一个 ID 为 light 的 div，然后我使用了一个名为 content 的包装器 div，其中包含 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 元素(页面上的顶级元素)设置为黑色文本和黑色背景，因此默认情况下所有内容都会隐藏。

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

最后，我向内容包装器 div 添加了一条规则，将 position: relative 和 z-index 设置为 10。position: relative 或 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');
  });