强大的CSS :实现仿 Windows10 鼠标照亮边框效果

强大的CSS :实现仿 Windows10 鼠标照亮边框效果_第1张图片

安装最新 Windows 10 update 之后,注意到系统 UI 里有一个很棒的细节效果,在开始菜单的磁贴里或者 UWP 风格的设置界面中,元素的高亮边框是可以感知鼠标的,边框的高亮部分会跟随鼠标的移动而移动。顿时灵机一动,这个效果用 CSS 可否实现?

分析

拿桌面日历中的效果为例,鼠标移动时附近的边框也渐变性可见。这个效果不就是探照灯效果嘛!这个完全可以用 CSS 中的 mask 蒙版配合一个径向渐变实现。

强大的CSS :实现仿 Windows10 鼠标照亮边框效果_第2张图片

但问题是,mask 蒙版是作用于整个元素的,没办法只作用于 border 而不影响内容。这个,那只能把 border 和实际内容分离用不同层来表示了。嗯,鼠标移动就更新蒙版位置,应该不成问题。

实现

准备工作

首先,撸好两层日历格子,一层展示日期信息,一层展示探照灯效果的边框。用 flex 布局也好,grid 也好,哪怕 inline-block 也都是没有问题的,这都不重要,重要的是上下两层的格子一定要对齐,然后我们用 relative 的容器把这两层 absolute 层圈起来,固定住。

...
28十四
29十五
...
2十九

层示意图:

强大的CSS :实现仿 Windows10 鼠标照亮边框效果_第3张图片

效果就是这样了:

强大的CSS :实现仿 Windows10 鼠标照亮边框效果_第4张图片

鼠标没有放上去的时候,先把 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

强大的CSS :实现仿 Windows10 鼠标照亮边框效果_第5张图片

不过,这里 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`;
});

最终效果:codepen.io/liuxiaole-t…

后记

把 border 分层然后应用 mask 的方案只能是在特定场合下有效,分离另一个层增加了很多维护成本。在查阅 MDN 资料的时候,偶然发现居然有个货叫 mask-border ,貌似是作用于 border 的 mask,目前还没有浏览器实现。

这里推荐一下我的前端学习交流扣qun:731771211 ,里面都是学习前端的,如果你想制作酷炫的网页,想学习编程。自己整理了一份2019最全面前端学习资料,从最基础的HTML+CSS+JS【炫酷特效,游戏,插件封装,设计模式】到移动端HTML5的项目实战的学习资料都有整理,送给每一位前端小伙伴,每天分享技术

点击:加入

你可能感兴趣的:(css,css,前端,前端开发,web前端,前端工程师)