详解CSS实现仿Windows10鼠标照亮边框效果
GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
【 如果你想靠AI翻身,你先需要一个靠谱的工具! 】
安装最新 Windows 10 update 之后,注意到系统 UI 里有一个很棒的细节效果,在开始菜单的磁贴里或者 UWP 风格的设置界面中,元素的高亮边框是可以感知鼠标的,边框的高亮部分会跟随鼠标的移动而移动。顿时灵机一动,这个效果用 CSS 可否实现?
分析
拿桌面日历中的效果为例,鼠标移动时附近的边框也渐变性可见。这个效果不就是探照灯效果嘛!这个完全可以用 CSS 中的 mask 蒙版配合一个径向渐变实现。
但问题是,mask 蒙版是作用于整个元素的,没办法只作用于 border 而不影响内容。这个,那只能把 border 和实际内容分离用不同层来表示了。嗯,鼠标移动就更新蒙版位置,应该不成问题。
实现
准备工作
首先,撸好两层日历格子,一层展示日期信息,一层展示探照灯效果的边框。用 flex 布局也好,grid 也好,哪怕 inline-block 也都是没有问题的,这都不重要,重要的是上下两层的格子一定要对齐,然后我们用 relative 的容器把这两层 absolute 层圈起来,固定住。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | < div class = "calendar" > < div class = "calendar-header" > < div class = "week-day" >一</ div > < div class = "week-day" >二</ div > < div class = "week-day" >三</ div > < div class = "week-day" >四</ div > < div class = "week-day" >五</ div > < div class = "week-day" >六</ div > < div class = "week-day" >日</ div > </ div > < div class = "calendar-body" > < div class = "grid-container border-layer" > < div class = "grid-item" ></ div > ... < div class = "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 层隐藏掉。
1 2 3 4 5 6 7 8 | .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 和变形。
1 2 3 | -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) 才能让渐变中心和鼠标的坐标保持一致。
1 2 3 4 5 6 7 8 9 | 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`; }); |
最终效果:https://codepen.io/liuxiaole-the-sasster/full/OGZgpv
后记
把 border 分层然后应用 mask 的方案只能是在特定场合下有效,分离另一个层增加了很多维护成本。在查阅 MDN 资料的时候,偶然发现居然有个货叫 mask-border
,貌似是作用于 border 的 mask,目前还没有浏览器实现。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
- 本文给大家分享一段css3代码实现鼠标悬停时边框旋转的效果,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友参考下2017-01-03
- 鼠标经过图片显示边框的CSS代码,需要的朋友可以参考下。2011-11-23
最新评论