国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

  1. Toy模板網(wǎng)首頁(yè)
  2. >Toy博客

CSS mask 實(shí)現(xiàn)鼠標(biāo)跟隨鏤空效果，阿里面試官必問(wèn)

1年前作者：蛋黃酥呀分類：Toy博客閱讀(29)違法舉報(bào)

這篇具有很好參考價(jià)值的文章主要介紹了CSS mask 實(shí)現(xiàn)鼠標(biāo)跟隨鏤空效果，阿里面試官必問(wèn)。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問(wèn)。

}`

效果如下：

CSS mask 實(shí)現(xiàn)鼠標(biāo)跟隨鏤空效果，阿里面試官必問(wèn),2024年程序員學(xué)習(xí),css,計(jì)算機(jī)外設(shè),前端

已經(jīng)全部都模糊了，只是圓形區(qū)域外暗一些。由于::before的尺寸占據(jù)整個(gè)容器，所以整個(gè)背后都變模糊了，圓形外部比較暗是因?yàn)榘胪该鳚u變的影響。

總之還是不能滿足我們的需求，需要尋求新的解決方式。

五、CSS MASK 實(shí)現(xiàn)鏤空

與其說(shuō)是讓圓形區(qū)域不模糊，還不如說(shuō)是把那塊區(qū)域給鏤空了。就好比之前是一整塊磨砂玻璃，然后通過(guò)?CSS MASK?打了一個(gè)圓孔，這樣透過(guò)圓孔看到后面肯定是清晰的。

可以對(duì)第二個(gè)例子稍作修改，通過(guò)徑向漸變繪制一個(gè)透明圓，剩余部分都是純色的遮罩層，示意如下：

CSS mask 實(shí)現(xiàn)鼠標(biāo)跟隨鏤空效果，阿里面試官必問(wèn),2024年程序員學(xué)習(xí),css,計(jì)算機(jī)外設(shè),前端

用代碼實(shí)現(xiàn)就是

.wrap::before{

content:?‘’;

position:?absolute;

width:?100%;

height:?100%;

left:?0;

top:?0;

-webkit-mask:?radial-gradient(?circle?at?calc(var(–x,?.5)?*?100%?)??calc(var(–y,?.5)?*?100%?),?transparent?50px,?#000?51px);

background:?rgba(0,0,0,.3);

backdrop-filter:?blur(5px)

}

這樣就實(shí)現(xiàn)了文章開頭的效果：

CSS mask 實(shí)現(xiàn)鼠標(biāo)跟隨鏤空效果，阿里面試官必問(wèn),2024年程序員學(xué)習(xí),css,計(jì)算機(jī)外設(shè),前端

完整代碼可以查看：https://codepen.io/xboxyan/pen/porpoXJ

六、CSS MASK COMPOSITE 實(shí)現(xiàn)更豐富的鏤空效果

除了使用徑向漸變繪制遮罩層以外，還可以通過(guò) CSS MASK COMPOSITE（遮罩合成）的方式來(lái)實(shí)現(xiàn)。

CSS MASK COMPOSITE?鏈接：https://developer.mozilla.org/en-US/docs/Web/CSS/mask-composite

標(biāo)準(zhǔn)關(guān)鍵值如下（firefox支持）：

/*?Keyword?values?*/

mask-composite:?add;?/*?疊加（默認(rèn)）?*/

mask-composite:?subtract;?/*?減去，排除掉上層的區(qū)域?*/

mask-composite:?intersect;?/*?相交，只顯示重合的地方?*/

mask-composite:?exclude;?/*?排除，只顯示不重合的地方?*/

遮罩合成是什么意思呢？可以類比 photoshop 中的形狀合成，幾乎是一一對(duì)應(yīng)的。

CSS mask 實(shí)現(xiàn)鼠標(biāo)跟隨鏤空效果，阿里面試官必問(wèn),2024年程序員學(xué)習(xí),css,計(jì)算機(jī)外設(shè),前端

-webkit-mask-composite?與標(biāo)準(zhǔn)下的值有所不同，屬性值非常多，如下（chorme 、safari 支持）

-webkit-mask-composite?鏈接：https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-mask-composite

-webkit-mask-composite:?clear;?/清除，不顯示任何遮罩/

-webkit-mask-composite:?copy;?/只顯示上方遮罩，不顯示下方遮罩/

-webkit-mask-composite:?source-over;

-webkit-mask-composite:?source-in;?/只顯示重合的地方/

-webkit-mask-composite:?source-out;?/只顯示上方遮罩，重合的地方不顯示/

-webkit-mask-composite:?source-atop;

-webkit-mask-composite:?destination-over;

-webkit-mask-composite:?destination-in;?/只顯示重合的地方/

-webkit-mask-composite:?destination-out;/只顯示下方遮罩，重合的地方不顯示/

-webkit-mask-composite:?destination-atop;

-webkit-mask-composite:?xor;?/只顯示不重合的地方/

是不是一臉懵？這里做了一個(gè)對(duì)應(yīng)的效果圖，如果不太熟練，使用的時(shí)候知道有這樣一個(gè)功能，然后對(duì)著找就行了。

CSS mask 實(shí)現(xiàn)鼠標(biāo)跟隨鏤空效果，阿里面試官必問(wèn),2024年程序員學(xué)習(xí),css,計(jì)算機(jī)外設(shè),前端

回到這里，可以繪制一整塊背景和一個(gè)圓形背景，然后通過(guò)遮罩合成排除（mask-composite: exclude）打一個(gè)孔就行了，實(shí)現(xiàn)如下：

.wrap::before{

content:?‘’;

position:?absolute;

width:?100%;

height:?100%;

left:?0;

top:?0;

-webkit-mask:?url(“data:image/svg+xml,%3Csvg?width=“50”?height=“50”?viewBox=“0?0?50?50”?fill=“none”?xmlns=“http://www.w3.org/2000/svg”%3E%3Ccircle?cx=“25”?cy=“25”?r=“25”?fill=”%23C4C4C4"/%3E%3C/svg%3E"),?linear-gradient(red,?red);

-webkit-mask-size:?50px,?100%;

-webkit-mask-repeat:?no-repeat;

-webkit-mask-position:?calc(var(–x,?.5)?*?100%?+?var(–x,?.5)?*?100px?-?50px?)??calc(var(–y,?.5)?*?100%?+?var(–y,?.5)?*?100px?-?50px?),?0;

-webkit-mask-composite:?xor;???/只顯示不重合的地方，?chorem?、safari?支持/

mask-composite:?exclude;?/*?排除，只顯示不重合的地方，?firefox?支持?*/

background:?rgba(0,0,0,.3);

backdrop-filter:?blur(5px)

}

需要注意-webkit-mask-position中的計(jì)算，這樣也能很好的實(shí)現(xiàn)這個(gè)效果：

CSS mask 實(shí)現(xiàn)鼠標(biāo)跟隨鏤空效果，阿里面試官必問(wèn),2024年程序員學(xué)習(xí),css,計(jì)算機(jī)外設(shè),前端

完整代碼可以查看：https://codepen.io/xboxyan/pen/ExvMpQB

你可能已經(jīng)發(fā)現(xiàn)，上述例子中的圓是通過(guò) svg 繪制的，還用到了遮罩合成，看著好像更加繁瑣了。其實(shí)呢，這是一種更加萬(wàn)能的解決方式，可以帶來(lái)無(wú)限的可能性。比如我需要一個(gè)星星??的鏤空效果，很簡(jiǎn)單，先通過(guò)一個(gè)繪制軟件畫一個(gè)。

CSS mask 實(shí)現(xiàn)鼠標(biāo)跟隨鏤空效果，阿里面試官必問(wèn),2024年程序員學(xué)習(xí),css,計(jì)算機(jī)外設(shè),前端

然后把這段 svg 代碼轉(zhuǎn)義一下，這里推薦使用張?chǎng)涡窭蠋煹腟VG在線壓縮合并工具。

鏈接：https://www.zhangxinxu.com/sp/svgo/

CSS mask 實(shí)現(xiàn)鼠標(biāo)跟隨鏤空效果，阿里面試官必問(wèn),2024年程序員學(xué)習(xí),css,計(jì)算機(jī)外設(shè),前端

替換到剛才的例子中就可以了。

.wrap::before{

content:?‘’;

position:?absolute;

width:?100%;

height:?100%;

left:?0;

top:?0;

-webkit-mask:?url(“data:image/svg+xml,%3Csvg?width=“96”?height=“91”?viewBox=“0?0?96?91”?fill=“none”?xmlns=“http://www.w3.org/2000/svg”%3E%3Cpath?d=“M48?0l11.226?34.55h36.327l-29.39?21.352L77.39?90.45?48?69.098?18.61?90.451?29.837?55.9.447?34.55h36.327L48?0z”?fill=”%23C4C4C4"/%3E%3C/svg%3E"),?linear-gradient(red,?red);

-webkit-mask-size:?50px,?100%;

-webkit-mask-repeat:?no-repeat;

-webkit-mask-position:?calc(var(–x,?.5)?*?100%?+?var(–x,?.5)?*?100px?-?50px?)??calc(var(–y,?.5)?*?100%?+?var(–y,?.5)?*?100px?-?50px?),?0;

-webkit-mask-composite:?xor;???/只顯示不重合的地方，?chorem?、safari?支持/

mask-composite:?exclude;?/*?排除，只顯示不重合的地方，?firefox?支持?*/

background:?rgba(0,0,0,.3);

backdrop-filter:?blur(5px)

}

星星鏤空實(shí)現(xiàn)效果如下：

CSS mask 實(shí)現(xiàn)鼠標(biāo)跟隨鏤空效果，阿里面試官必問(wèn),2024年程序員學(xué)習(xí),css,計(jì)算機(jī)外設(shè),前端

完整代碼可以查看：https://codepen.io/xboxyan/pen/vYJPaVy

再比如一個(gè)心形?，實(shí)現(xiàn)效果如下：

CSS mask 實(shí)現(xiàn)鼠標(biāo)跟隨鏤空效果，阿里面試官必問(wèn),2024年程序員學(xué)習(xí),css,計(jì)算機(jī)外設(shè),前端

完整代碼可以查看：https://codepen.io/xboxyan/pen/KKvEBjb

只有想不到，沒(méi)有做不到

七、總結(jié)和說(shuō)明

以上實(shí)現(xiàn)了一個(gè)鼠標(biāo)跟隨鏤空的效果，從簡(jiǎn)單到復(fù)雜，從單一到通用，雖然借助了一點(diǎn)點(diǎn) JS ，但是僅僅是“工具人”的角色，交互邏輯全部都由 CSS 完成，下面總結(jié)一下：

  1. 足夠大的陰影是一個(gè)實(shí)現(xiàn)圓形鏤空效果的小技巧

  2. CSS 漸變也能輕易的繪制出圓形鏤空背景

  3. 借助 CSS 變量可以很方便的利用鼠標(biāo)位置實(shí)現(xiàn)想要的效果

  4. backdrop-filter 可以想象成磨砂玻璃的功能

  5. CSS Mask 可以給磨砂玻璃打孔，實(shí)現(xiàn)鏤空的效果

  6. 借助遮罩合成特性和SVG，可以實(shí)現(xiàn)任意形狀的鏤空效果

CSS MASK 還是非常強(qiáng)大的，有必要還是多掌握一下。最后，如果覺(jué)得還不錯(cuò)，對(duì)你有幫助的話，歡迎點(diǎn)贊、在看、收藏、轉(zhuǎn)發(fā)。

作者：XboxYan

https://segmentfault.com/a/1190000040996523

推薦鏈接

  1. 純 CSS 自定義多行省略：從原理到實(shí)現(xiàn)

  2. 前端程序員簡(jiǎn)歷模板整理和下載

  3. 這才是前端該寫的代碼：CSS常見(jiàn)套路續(xù)

關(guān)注公眾號(hào)?前端開發(fā)博客，回復(fù)“加群”，秒進(jìn)群

加入我們一起學(xué)習(xí)，天天進(jìn)步

自我介紹一下，小編13年上海交大畢業(yè)，曾經(jīng)在小公司待過(guò)，也去過(guò)華為、OPPO等大廠，18年進(jìn)入阿里一直到現(xiàn)在。

深知大多數(shù)前端工程師，想要提升技能，往往是自己摸索成長(zhǎng)或者是報(bào)班學(xué)習(xí)，但對(duì)于培訓(xùn)機(jī)構(gòu)動(dòng)則幾千的學(xué)費(fèi)，著實(shí)壓力不小。自己不成體系的自學(xué)效果低效又漫長(zhǎng)，而且極易碰到天花板技術(shù)停滯不前！

因此收集整理了一份《2024年Web前端開發(fā)全套學(xué)習(xí)資料》，初衷也很簡(jiǎn)單，就是希望能夠幫助到想自學(xué)提升又不知道該從何學(xué)起的朋友，同時(shí)減輕大家的負(fù)擔(dān)。
CSS mask 實(shí)現(xiàn)鼠標(biāo)跟隨鏤空效果，阿里面試官必問(wèn),2024年程序員學(xué)習(xí),css,計(jì)算機(jī)外設(shè),前端
CSS mask 實(shí)現(xiàn)鼠標(biāo)跟隨鏤空效果，阿里面試官必問(wèn),2024年程序員學(xué)習(xí),css,計(jì)算機(jī)外設(shè),前端
CSS mask 實(shí)現(xiàn)鼠標(biāo)跟隨鏤空效果，阿里面試官必問(wèn),2024年程序員學(xué)習(xí),css,計(jì)算機(jī)外設(shè),前端
CSS mask 實(shí)現(xiàn)鼠標(biāo)跟隨鏤空效果，阿里面試官必問(wèn),2024年程序員學(xué)習(xí),css,計(jì)算機(jī)外設(shè),前端
CSS mask 實(shí)現(xiàn)鼠標(biāo)跟隨鏤空效果，阿里面試官必問(wèn),2024年程序員學(xué)習(xí),css,計(jì)算機(jī)外設(shè),前端
CSS mask 實(shí)現(xiàn)鼠標(biāo)跟隨鏤空效果，阿里面試官必問(wèn),2024年程序員學(xué)習(xí),css,計(jì)算機(jī)外設(shè),前端

既有適合小白學(xué)習(xí)的零基礎(chǔ)資料，也有適合3年以上經(jīng)驗(yàn)的小伙伴深入學(xué)習(xí)提升的進(jìn)階課程，基本涵蓋了95%以上前端開發(fā)知識(shí)點(diǎn)，真正體系化！

由于文件比較大，這里只是將部分目錄大綱截圖出來(lái)，每個(gè)節(jié)點(diǎn)里面都包含大廠面經(jīng)、學(xué)習(xí)筆記、源碼講義、實(shí)戰(zhàn)項(xiàng)目、講解視頻，并且后續(xù)會(huì)持續(xù)更新

如果你覺(jué)得這些內(nèi)容對(duì)你有幫助，可以添加V獲?。簐ip1024c （備注前端）
CSS mask 實(shí)現(xiàn)鼠標(biāo)跟隨鏤空效果，阿里面試官必問(wèn),2024年程序員學(xué)習(xí),css,計(jì)算機(jī)外設(shè),前端

最后

除了簡(jiǎn)歷做到位，面試題也必不可少，整理了些題目，前面有117道匯總的面試到的題目，后面包括了HTML、CSS、JS、ES6、vue、微信小程序、項(xiàng)目類問(wèn)題、筆試編程類題等專題。

  • CodeChina開源項(xiàng)目：【大廠前端面試題解析+核心總結(jié)學(xué)習(xí)筆記+真實(shí)項(xiàng)目實(shí)戰(zhàn)+最新講解視頻】

    CSS mask 實(shí)現(xiàn)鼠標(biāo)跟隨鏤空效果，阿里面試官必問(wèn),2024年程序員學(xué)習(xí),css,計(jì)算機(jī)外設(shè),前端

CSS mask 實(shí)現(xiàn)鼠標(biāo)跟隨鏤空效果，阿里面試官必問(wèn),2024年程序員學(xué)習(xí),css,計(jì)算機(jī)外設(shè),前端文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-858118.html

如果你覺(jué)得這些內(nèi)容對(duì)你有幫助，可以添加V獲?。簐ip1024c （備注前端）**
[外鏈圖片轉(zhuǎn)存中…(img-ghVIgfon-1711732721729)]

最后

除了簡(jiǎn)歷做到位，面試題也必不可少，整理了些題目，前面有117道匯總的面試到的題目，后面包括了HTML、CSS、JS、ES6、vue、微信小程序、項(xiàng)目類問(wèn)題、筆試編程類題等專題。

  • CodeChina開源項(xiàng)目：【大廠前端面試題解析+核心總結(jié)學(xué)習(xí)筆記+真實(shí)項(xiàng)目實(shí)戰(zhàn)+最新講解視頻】

    CSS mask 實(shí)現(xiàn)鼠標(biāo)跟隨鏤空效果，阿里面試官必問(wèn),2024年程序員學(xué)習(xí),css,計(jì)算機(jī)外設(shè),前端

CSS mask 實(shí)現(xiàn)鼠標(biāo)跟隨鏤空效果，阿里面試官必問(wèn),2024年程序員學(xué)習(xí),css,計(jì)算機(jī)外設(shè),前端

到了這里，關(guān)于CSS mask 實(shí)現(xiàn)鼠標(biāo)跟隨鏤空效果，阿里面試官必問(wèn)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來(lái)自互聯(lián)網(wǎng)用戶投稿，該文觀點(diǎn)僅代表作者本人，不代表本站立場(chǎng)。本站僅提供信息存儲(chǔ)空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請(qǐng)注明出處： 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符，請(qǐng)點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋，一經(jīng)查實(shí)，立即刪除！

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

相關(guān)文章

覺(jué)得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請(qǐng)作者喝杯咖啡吧~博客贊助

支付寶掃一掃領(lǐng)取紅包，優(yōu)惠每天領(lǐng)

二維碼1

領(lǐng)取紅包

二維碼2

領(lǐng)紅包