这篇文章主要介绍了CSS实现仿Windows10鼠标照亮边框效果的示例,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
创新互联建站是一家成都网站制作、做网站、外贸营销网站建设,提供网页设计,网站设计,网站制作,建网站,按需开发,网站开发公司,于2013年开始是互联行业建设者,服务者。以提升客户品牌价值为核心业务,全程参与项目的网站策划设计制作,前端开发,后台程序制作以及后期项目运营并提出专业建议和思路。
分析
拿桌面日历中的效果为例,鼠标移动时附近的边框也渐变性可见。这个效果不就是探照灯效果嘛!这个完全可以用 CSS 中的 mask 蒙版配合一个径向渐变实现。
但问题是,mask 蒙版是作用于整个元素的,没办法只作用于 border 而不影响内容。这个,那只能把 border 和实际内容分离用不同层来表示了。嗯,鼠标移动就更新蒙版位置,应该不成问题。
实现
准备工作
首先,撸好两层日历格子,一层展示日期信息,一层展示探照灯效果的边框。用 flex 布局也好,grid 也好,哪怕 inline-block 也都是没有问题的,这都不重要,重要的是上下两层的格子一定要对齐,然后我们用 relative 的容器把这两层 absolute 层圈起来,固定住。
一二三四五六日...28十四29十五...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鼠标照亮边框效果的示例”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!