如何模拟Windows 10 设置界面中的鼠标悬浮放大效果？

win10设置界面的鼠标移动显示周边的样式（探照灯效果）的实现方式

在windows设置界面的鼠标悬浮效果中，光标周围会显示一个放大区域。在前端开发中，可以通过多种方式实现类似的效果。

使用css

使用css的transform和box-shadow属性。通过将transform: scale(1.2);应用于悬浮元素，可以放大元素。然后，使用box-shadow: 0 0 10px #ccc;在元素周围添加阴影。

示例代码：

.container {
  height: 200px;
  width: 200px;
  background: #f00;
}

.container:hover {
  transform: scale(1.2);
  box-shadow: 0 0 10px #ccc;
}

不使用css

如果css不可用或效果不理想，可以使用javascript或第三方库。

使用javascript

uBrand

一站式AI品牌创建平台，在线品牌设计，AI品牌策划，智能品牌营销；uBrand帮助创业者轻松打造个性品牌！

下载

使用element.getboundingclientrect()获取悬浮元素的矩形边界。然后，使用document.createelement()创建新的元素作为遮罩层，并将遮罩层的位置和大小设置为悬浮元素的边界加上偏移量。

示例代码：

const element = document.querySelector('.container');

element.addEventListener('mouseover', (e) => {
  const rect = element.getBoundingClientRect();
  const mask = document.createElement('div');
  mask.style.position = 'absolute';
  mask.style.top = rect.top - 10 + 'px';
  mask.style.left = rect.left - 10 + 'px';
  mask.style.width = rect.width + 20 + 'px';
  mask.style.height = rect.height + 20 + 'px';
  mask.style.background = '#ccc';
  
  document.body.appendChild(mask);
});

element.addEventListener('mouseout', (e) => {
  document.body.removeChild(mask);
});

使用第三方库

可以使用如jquery ui的library实现类似效果。

以下是一些类似效果的演示：

• [windows 10 grid hover effect](https://codepen.io/greensock/pen/yzwwwo)
• [windows 10 calendar effect css](https://codepen.io/f3ll0wme/pen/kkyrwb)
• [windows 10 calendar effect using html,css,js](https://codepen.io/jorenbley/pen/jjyjv)

教程：

• [windows 10 calendar hover effect using html, css, and vanilla js](https://dev.to/jorenbley/windows-10-calendar-hover-effect-using-html-css-and-vanilla-js-45dp)
• [windows 10 grid hover effect using html, css, and vanilla js](https://www.jacekjeznach.com/blog/windows-10-grid-hover-effect-pure-javascript)