css實現(xiàn)縷空遮罩層的示例代碼
發(fā)布時間:2020-06-03 16:18:50 作者:萬少博
我要評論

這篇文章主要介紹了css實現(xiàn)縷空遮罩層的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
本文內(nèi)容:頁面鏤空遮罩層、頁面鏤空遮罩引導(dǎo)層、圖片鏤空遮罩
常規(guī)遮罩層
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <title>Title</title> <style> .mask{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0,0,0,0.4); display: flex; justify-content: center; align-items: center; z-index: 3; } .mask{ position:fixed; top : 0; left : 0; bottom : 0; right : 0; background:rgba(0,0,0,.5); /*background:hsla(0,100%,80%,0.5)*/ /*background:#000; opacity:0.5; */ } //模糊效果 毛玻璃效果 .blur{ -webkit-filter: blur(5px); /* Chrome, Opera */ -moz-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px); } </style> </head> <style> </style> <body> <div class='mask'></div> </body> </html>
鏤空遮罩層效果如圖
使用box-shadow實現(xiàn)鏤空遮罩引導(dǎo)層效果
優(yōu)點:
- 圓角輕松實現(xiàn);
- box-shadow 不會影響元素位置,定位只需要根據(jù) content 的位置寫。
缺點:陰影可視區(qū)域無法觸發(fā)click事件,因此,當(dāng)點擊蒙層任意區(qū)域,無法隱藏。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <title>Title</title> <style> .guide{ position: absolute; z-index: 2; top: 0px; left: 50%; transform: translateX(-50%); width: 50px; height: 50px; border-radius: 50px; border: 3px solid #2353FA; box-shadow: 0px 0px 0px 1000px rgba(0,0,0,.75); box-sizing: border-box; } </style> </head> <style> </style> <body> <div class='guide'></div> </body> </html>
使用border實現(xiàn)鏤空遮罩引導(dǎo)層效果
缺點:代碼量大
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <title>Title</title> <style> .guide{ position: absolute; z-index: 2; .opacityEle{ border: 700px solid rgba(0,0,0,0.75); width: 50px; height: 50px; position: relative; top: -700px; left: -538px; border-radius: 50%; .ele{ width: 50px; height: 50px; border: 3px solid #0B6EFF; border-radius: 25px; box-sizing: border-box; } } } </style> </head> <style> </style> <body> <div class='guide'> <div class='opacityEle'> <div class='ele'></div> </div> </div> </body> </html>
到此這篇關(guān)于css實現(xiàn)縷空遮罩層的示例代碼的文章就介紹到這了,更多相關(guān)css縷空遮罩層內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!
相關(guān)文章
使用CSS content的attr實現(xiàn)鼠標(biāo)懸浮提示(tooltip)效果
這篇文章主要介紹了使用CSS content的attr實現(xiàn)鼠標(biāo)懸浮提示(tooltip)效果,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-10-10CSS實現(xiàn)鼠標(biāo)懸浮無限向下級展示的實例代碼
本文通過實例代碼給大家介紹了CSS實現(xiàn)鼠標(biāo)懸浮無限向下級展示的實例代碼,需要的朋友參考下吧2017-09-07CSS鼠標(biāo)懸浮DIV后顯示DIV外的按鈕解決方法
昨天寫樣式遇到個問題,如何讓鼠標(biāo)懸浮DIV后,顯示DIV外的按鈕,可以點擊到按鈕。下面通過本文給大家分享CSS鼠標(biāo)懸浮DIV后顯示DIV外的按鈕解決方法,感興趣的朋友一起看看2017-08-26CSS3制作了一個動畫導(dǎo)航效果(鼠標(biāo)懸浮會放大)
使用了CSS3的animation、transform、transition制作了一個動畫導(dǎo)航效果,其中利用了Ligature Icon UI制作了導(dǎo)航中的ICON圖標(biāo),需要了解的朋友可以參考下2012-12-27- 這篇文章主要介紹了css3遮罩層鏤空效果的多種實現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)2020-05-11
- 這篇文章主要介紹了CSS實現(xiàn)帶遮罩層可關(guān)閉的彈窗效果,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-03-09
CSS實現(xiàn)鼠標(biāo)移至圖片上顯示遮罩層效果
這篇文章主要介紹了CSS實現(xiàn)鼠標(biāo)移至圖片上顯示遮罩層效果,本文通過實例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友參考下吧2019-11-20CSS 鼠標(biāo)懸浮在圖片上添加遮罩層效果的實現(xiàn)
這篇文章主要介紹了CSS 鼠標(biāo)懸浮在圖片上添加遮罩層效果的實現(xiàn),本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-12-17