2

我有兴趣制作一个完全黑暗的网页效果（在黑暗中，我的意思是完全没有灯光的夜晚），并为鼠标光标提供灯光效果以照亮周围环境。
我应该用什么来达到那种效果？我尝试在 CSS 中寻找答案，通常在网络上，但没有找到任何类似的东西。
我唯一发现的是这个WordPress 插件，但它是固定的，不能自定义或使用。

4

1 回答 1

3

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

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

HTML

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

接下来我用lightid 为 div 设置样式。我把我的高 100 像素和宽 100 像素，把背景设为黄色，然后给它一个border-radius50 像素，宽度/高度的一半，做一个圆圈。我也做了 div position: relative，所以它脱离了正常的页面流，可以放在其他元素之上，这对于我们需要创建效果的分层很重要。我决定在用户​​移动鼠标之前为手电筒设置一个默认位置（更多内容在 JS 部分中），因此我将topandleft属性设置为 50%，使其在页面上居中。

最后，我在我的内容包装器 div 中添加了一个规则，设置position: relative为z-index10。position: relative或者position: absolute是开始工作所需要的z-index；z-index控制哪些元素堆叠在哪些之上。因此，将内容 div （即文本）设置为更高z-index，使其出现在 light 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
    });
});
于 2014-01-07T02:12:32.403 回答