2十九
層示意圖：
效果就是這樣了：
鼠標(biāo)沒有放上去的時(shí)候，先把 border 層隱藏掉。
.border-layer {
...
visibility: hidden;
}
.calendar:hover .border-layer {
visibility: visible;
}CSS Mask
CSS Mask 類似于 Photoshop 中的圖層蒙版，可以使用一張圖作為蒙版用作在目標(biāo)元素上，圖片的 alpha 通道（也就是透明度信息）決定了目標(biāo)元素哪部分可見（也可以選擇使用亮度信息）。
舉個(gè)例子，如果蒙版圖片是一張半透明圖，則作用到實(shí)際元素上效果和設(shè)置 opacity: 0.5 效果一樣；如果蒙版圖片是一張中間鏤空的五角星，則效果就是元素被裁剪成五角星形狀。
Mask 的語(yǔ)法和 background 的語(yǔ)法幾乎完全一致，這里我們用徑向漸變創(chuàng)建一個(gè)半徑 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 */
接下來(lái)我們來(lái)更新 mask-position 。這里有兩個(gè)點(diǎn)要注意，一是獲取鼠標(biāo)對(duì)目標(biāo)元素的相對(duì)坐標(biāo)，一是 position 偏移。
MouseEvent 中有一堆的 X/Y，我們用相對(duì) document 的坐標(biāo) pageX/pageY，減去目標(biāo)元素相對(duì) document 的坐標(biāo)，就能得到我們需要的坐標(biāo)了。 向量公式： AB = AC - BC：
不過(guò)，這里 mask-position 的坐標(biāo)還需要處理一下。我們定義的 mask 是一張 160x160 的圓形漸變，而 mask-position 和 background-position 一樣,定義的是蒙層左上角 (0，0) 的位置實(shí)際需要和容器的哪個(gè)坐標(biāo)對(duì)齊。因此我們需要把計(jì)算得到的坐標(biāo)再減去 (80, 80) 才能讓漸變中心和鼠標(biāo)的坐標(biāo)保持一致。
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`;
});感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“CSS實(shí)現(xiàn)仿Windows10鼠標(biāo)照亮邊框效果的示例”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!
新聞標(biāo)題：CSS實(shí)現(xiàn)仿Windows10鼠標(biāo)照亮邊框效果的示例
網(wǎng)頁(yè)地址：http://weahome.cn/article/pdojsc.html
-
在線咨詢
微信咨詢
電話咨詢
-
028-86922220（工作日）
18980820575（7×24）
-
提交需求
-
返回頂部
重慶分公司
重慶分公司
