javascript - win10设置界面的鼠标移动显示周边的样式（探照灯效果）该怎么实现呢？

Question

类似windows设置界面

在前端开发时，使用css，该如何实现探照灯效果？
如果css不行的话，那该如何实现呢？

Answer 1

CSS如何实现局部光照效果？

参考被采纳的回答

Answer 2

可以说一个理论上的实现法。

首先是实现基础，从 CSS 的角度去想有点头疼，但如果是 <canvas> + 探照灯，那么就很好说明了。

探照灯示例，源自网络： https://www.cnblogs.com/xiaohuochai/p/6370952.html

就是说，以鼠标作为探照灯中心点，并将一定区域中的线条全部展示出来，这一点，说得通。

然后是第二个效果，当滑入选项区域时，其选项四边边框都会呈现出来，这一点不难，做一下 x 和 y 区域判断即可。

Answer 3

DEMO1:Windows 10 calendar effect CSS

DEMO2:Windows 10 calendar effect using HTML,CSS,JS

教程 Windows 10 calendar hover effect using HTML, CSS, and vanilla JS

Answer 4

您好，您的问题涉及到使用CSS来实现鼠标移动时显示周边样式的效果。以下是一个简单的示例，您可以根据需要进行修改：

HTML:

<div class="hover-box">  <div class="content">    <p>这是设置界面的内容</p>  </div></div>

CSS:

.hover-box {  width: 200px; /* 您可以根据需要调整宽度 */  height: 200px; /* 您可以根据需要调整高度 */  background-color: #f0f0f0; /* 您可以根据需要调整背景色 */  border: 2px solid #fff; /* 您可以根据需要调整边框颜色和大小 */  border-radius: 5px; /* 您可以根据需要调整边框圆角大小 */  overflow: hidden; /* 隐藏超出边框的内容 */  position: relative; /* 设置相对定位 */}.content {  width: 100%; /* 内容宽度为100% */  height: 100%; /* 内容高度为100% */  padding: 20px; /* 在内容和边框之间添加一些内边距 */  box-sizing: border-box; /* 内容框始终填满父元素，包括边框和内边距 */}.hover-box:hover {  border: 2px solid #007bff; /* 当鼠标悬停时更改边框颜色 */}

解释：上述代码创建了一个带有边框的矩形盒子，当鼠标悬停在该盒子上面时，边框颜色会发生变化。您可以根据需要修改盒子的大小、背景色、边框颜色和大小以及其他样式。同时，您还可以在盒子里添加其他元素和内容。