本文主要讲解“如何用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 是一张 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鼠标照亮边框效果这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是,小编将为大家推送更多相关知识点的文章,欢迎关注!
内容来源网络,如有侵权,联系删除,本文地址:https://www.230890.com/zhan/73038.html