怎么用CSS实现仿Windows10鼠标照亮边框效果

本文主要讲解“如何用CSS实现模仿Windows10鼠标照亮边框的效果”。本文的解释简单明了，易学易懂。现在请跟随边肖的思路学习学习“如何用CSS实现模仿Windows10鼠标照亮边框的效果”！

00-1010以桌面日历中的效果为例。当鼠标移动时，它附近的边框也逐渐可见。这个效果就是探照灯效果！这可以通过在CSS中使用带有径向渐变的遮罩来实现。

但问题是蒙版蒙版是应用到整个元素的，所以不能只应用到边框而不影响内容。这个，那个只能通过把边框和实际内容分在不同的层来表达。嗯，鼠标移动时更新蒙版位置应该不成问题。

00-1010

分析

首先设置两层日历网格，一层显示日期信息，另一层显示探照灯效果边框。Flex布局或网格布局都可以，即使是内嵌块也可以。没关系。重要的是上下网格必须对齐，然后我们用相对容器圈出两个绝对层并固定它们。

divclass=’日历’

divclass=’日历-标题’

Divclass=’周-日’ I /div

Divclass=’周-日’ II /div

Divclass=’周-日’三/div

Divclass=’周-日’四/div

Divclass=’周-日’五/div

Divclass=’周-日’六/div

Divclass=’周-日’天/div

/div

divclass=’日历-正文’

div class=’ grid-container order-layer ‘

divclass=’grid-item’/div

.

divclass=’grid-item’/div

/div

div class=’ grid-container number-layer ‘

       <div class="grid-item"><span>28</span><span>十四</span></div>
            <div class="grid-item"><span>29</span><span>十五</span></div>
            …
            <div class="grid-item"><span>2</span><span>十九</span></div>
        </div>
    </div>
  </div>

层示意图：

效果就是这样了：

鼠标没有放上去的时候，先把 border 层隐藏掉。

.border-layer {
 ...
  visibility: hidden;
}
.calendar:hover .border-layer {
  visibility: visible;
}

CSS Mask

CSS Mask 类似于 Photoshop 中的图层蒙版，可以使用一张图作为蒙版用作在目标元素上，图片的 alpha 通道（也就是透明度信息）决定了目标元素哪部分可见（也可以选择使用亮度信息）。

举个例子，如果蒙版图片是一张半透明图，则作用到实际元素上效果和设置 opacity: 0.5 效果一样；如果蒙版图片是一张中间镂空的五角星，则效果就是元素被裁剪成五角星形状。

Mask 的语法和 background 的语法几乎完全一致，这里我们用径向渐变创建一个半径 80px 从中心白色到边缘透明的渐变圆，配合 mask-repeat 和 mask-size 防止 repeat 和变形。

  -webkit-mask-image: radial-gradient(circle at center, white 0%, transparent 80px);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 160px 160px; /* 半径80px 所以 size 需要是 160px */

接下来我们来更新 mask-position 。这里有两个点要注意，一是获取鼠标对目标元素的相对坐标，一是 position 偏移。

MouseEvent 中有一堆的 X/Y，我们用相对 document 的坐标 pageX/pageY，减去目标元素相对 document 的坐标，就能得到我们需要的坐标了。 向量公式： AB = AC – BC：

不过，这里 mask-position 的坐标还需要处理一下。我们定义的 mask 是一张 160×160 的圆形渐变，而 mask-position 和 background-position 一样,定义的是蒙层左上角 (0，0) 的位置实际需要和容器的哪个坐标对齐。因此我们需要把计算得到的坐标再减去 (80, 80) 才能让渐变中心和鼠标的坐标保持一致。

var borderLayer = document.querySelector(".border-layer");
document.querySelector(".calendar").addEventListener("mousemove", function(ev){
  var x = ev.pageX;
  var y = ev.pageY;
  var bounding = borderLayer.getBoundingClientRect();
  borderLayer.style.webkitMaskPosition = `${x - bounding.x - 80}px ${y -bounding.y - 80}px`;
});

感谢各位的阅读，以上就是“怎么用CSS实现仿Windows10鼠标照亮边框效果”的内容了，经过本文的学习后，相信大家对怎么用CSS实现仿Windows10鼠标照亮边框效果这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是，小编将为大家推送更多相关知识点的文章，欢迎关注！