2十九
层示意图：
效果就是这样了：
鼠标没有放上去的时候，先把 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 是一张 160x160 的圆形渐变，而 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鼠标照亮边框效果的示例
分享路径：http://kswjz.com/article/pdojsc.html
扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
