騰訊微云黑色遮罩引導(dǎo)蒙版更好的CSS實(shí)現(xiàn)方式_html/css

一、微云的實(shí)現(xiàn)

網(wǎng)站有一些改動(dòng)的時(shí)候，為了讓用戶熟知新的操作位置，往往會(huì)增加一個(gè)引導(dǎo)，常見的方式就是使用一個(gè)黑色的半透明蒙版，然后需要關(guān)注的區(qū)域是鏤空的。

然后上周五我去 微云 轉(zhuǎn)悠的時(shí)候，也看到了引導(dǎo)層，于是職業(yè)病又犯了，去學(xué)習(xí)下別人是怎么實(shí)現(xiàn)的。下面是觀測的結(jié)果：

為了實(shí)現(xiàn)鏤空蒙層效果，作者發(fā)揮了小時(shí)候拼積木的才能，使用兩層HTML結(jié)構(gòu)，內(nèi)層使用5塊獨(dú)立區(qū)域拼接形成，至于中間鏤空的區(qū)域的陰影則是使用的圖片實(shí)現(xiàn)的。

雖然最終的效果滿足了產(chǎn)品的需求，對于用戶而言，目的已經(jīng)達(dá)到。但是，從代碼質(zhì)量層面、潛在的體驗(yàn)提升可能性、使用場景廣度上來講，還是弱了很多的。

舉例來說，如果我們某個(gè)提示區(qū)域面積很大，那中間的那個(gè)鏤空區(qū)域尺寸是不是要變，那后面的背景圖片怎么辦？搞新圖，有人看到了使用了 background-size:cover , 那IE7,IE8怎么辦？哦，可能微云不需要管IE7, IE8.

如果不需要管IE7, IE8，那這里的實(shí)現(xiàn)就顯得更加小白了。我們實(shí)際上只需要一層標(biāo)簽，一層空標(biāo)簽就可以實(shí)現(xiàn)我們的效果，且不需要圖片。

二、我的實(shí)現(xiàn)

主要在于思維方式的變化。拼積木這種想法大家都比較容易想到，符合日常認(rèn)知，但是，但代碼層面，我們可以進(jìn)行思維轉(zhuǎn)換，發(fā)散思考，偌大的半透明遮罩層，我們不要老想著背景色塊背景色塊，可以突破常規(guī)思維，把它認(rèn)為是邊框，一個(gè)很大很大的邊框（我們平時(shí)使用border都是 1 像素巨多），這樣，我們自然就有了鏤空效果。

如下圖示意：

但是，目前我們中間的鏤空區(qū)域方的，有沒有什么辦法變成圓的呢？

自然有， 方法1 是元素設(shè)置超大圓角，但是，此時(shí)為了邊框依然填滿整個(gè)屏幕， border 邊框尺寸要大大增大，但是，為了不影響頁面的滾動(dòng)條，我們必須再嵌套一層標(biāo)簽，就顯得啰嗦了；

方法2則是方法1某些方面的逆向思維處理，就是把當(dāng)前元素作為外層限制標(biāo)簽，里面重新生成一個(gè)大尺寸偽元素，實(shí)現(xiàn)自適應(yīng)尺寸的圓角效果，這個(gè)好，HTML干凈不啰嗦，CSS一步到位（代碼如下示意）；

.cover::before { content: ''; width: 100%; height:100%; border-radius: 50%; border: 400px solid #000; position: absolute; left: -400px; top: -400px; /* 自己瞎填的參數(shù)，示意 */ box-shadow: inset 0 0 5px 2px rgba(0,0,0,.75);}

大家可以看到，上面的偽元素的各個(gè)參數(shù)都是固定參數(shù)值，與外部元素的尺寸什么的沒有任何關(guān)系，只要外部元素尺寸不超過400，里面永遠(yuǎn)會(huì)有一個(gè)正橢圓的內(nèi)陰影的鏤空圖形（因?yàn)槌霾糠謺?huì)被 .cover 隱藏），要理解圓角和正橢圓的關(guān)系，可以參考我之前的文章：“ 秋月何時(shí)了，CSS3 border-radius知多少？ ”。

眼見為實(shí)，耳聽為虛，您可以狠狠地點(diǎn)擊這里： 一層標(biāo)簽實(shí)現(xiàn)網(wǎng)站引導(dǎo)鏤空蒙版功能demo （點(diǎn)擊黑色蒙層會(huì)有引導(dǎo)切換效果）

demo這個(gè)鏤空蒙層所使用的HTML代碼如下：

沒錯(cuò)，就這么簡單，沒什么嵌套，沒有什么五個(gè)元素變形金剛合體，沒有使用圖片。

微云這張圖片3K多，以微云的用戶訪問量，估計(jì)流量費(fèi)要不少錢的。

而且，大家如果點(diǎn)擊蒙版，會(huì)發(fā)現(xiàn)，鏤空的區(qū)域大小每次都是不一樣的，有大有小，有高有瘦，而微云的那個(gè)實(shí)現(xiàn)方法要滿足此需求就棘手；而且，大家發(fā)現(xiàn)沒，這些尺寸位置的變化都是動(dòng)畫來動(dòng)畫去的，不是嗙嗙嗙這種生硬的效果，更soft, 對用戶視覺引導(dǎo)效果更好，你看，我從這里到這里了，為什么可以實(shí)現(xiàn)動(dòng)畫效果呢，因?yàn)槲覀兊溺U空和內(nèi)陰影都是CSS實(shí)現(xiàn)的，而微云的圖片方法，顯然是無法有動(dòng)畫的。

JS代碼輔助

當(dāng)然，我的實(shí)現(xiàn)也離不開JS的輔助，JS的工作很簡單，讓蒙層的 width / height 以及 border 大小和需要引導(dǎo)的元素相關(guān)聯(lián)。

我特意整了個(gè)可以公用的方法 coverGuide （命名不喜歡自己隨便改）：

var coverGuide = function(cover, target) { var body = document.body, doc = document.documentElement; if (cover && target) { // target size(width/height) var targetWidth = target.clientWidth, targetHeight = target.clientHeight; // page size var pageHeight = doc.scrollHeight, pageWidth = doc.scrollWidth; // offset of target var offsetTop = target.getBoundingClientRect().top + (body.scrollTop || doc.scrollTop), offsetLeft = target.getBoundingClientRect().left + (body.scrollLeft || doc.scrollLeft); // set size and border-width cover.style.width = targetWidth + 'px'; cover.style.height = targetHeight + 'px'; cover.style.borderWidth = offsetTop + 'px ' + (pageWidth - targetWidth - offsetLeft) + 'px ' + (pageHeight - targetHeight - offsetTop) + 'px ' + offsetLeft + 'px'; cover.style.display = 'block'; // resize if (!cover.isResizeBind) { if (window.addEventListener) { window.addEventListener('resize', function() { coverGuide(cover, target); }); cover.isResizeBind = true; } else if (window.attachEvent) { window.attachEvent('onresize', function() { coverGuide(cover, target); }); cover.isResizeBind = true; // IE7, IE8 box-shadow hack cover.innerHTML = ''; } } }};

這里的 coverGuide 方法使用原生JS實(shí)現(xiàn)，IE6+瀏覽器都是兼容的，不依賴JS庫，大家可以隨意使用。當(dāng)然，寫得匆忙，沒有嚴(yán)格驗(yàn)證，可能有bug，大家可以稍微留點(diǎn)心。

使用非常簡單，語法如下：

coverGuide(cover, target);

其中 cover 就是 .cover 這個(gè)單獨(dú)的蒙版元素， target 則是我們需要指引的元素，按鈕啊，導(dǎo)航什么的。然后，我們的鏤空區(qū)域自動(dòng)定位到 target 的位置，大小也是 target 元素的大小。超省心。

具體使用，可參考上面的demo，源代碼就在頁面上。

IE7,IE8怎么辦

如果你需要兼容IE7,IE8，我們不妨就方框效果；如果設(shè)計(jì)和產(chǎn)品接受不了，則可以使用圖片打個(gè)補(bǔ)丁，例如上面JS代碼部分的：

cover.innerHTML = '';

我demo使用的這個(gè)圖片長下面這樣：

大小還有陰影都是我自己隨手一搞的，旨在示意，真實(shí)項(xiàng)目大家可以向設(shè)計(jì)師索要圖片。

然后，CSS超easy, 圖片撐滿我們的 cover 就可以。

/* IE7, IE8 img */.cover > img { width: 100%; height: 100%; }

三、結(jié)束語

這種蒙版覆蓋思想呢，不僅僅適用于這種大面積的引導(dǎo)。我們上傳圖片，尤其上傳頭像之后，要對頭像進(jìn)行剪裁，常見的交互之一就是四周黑色，中間鏤空，也可以使用巨大 border 來實(shí)現(xiàn)我們的效果，一層標(biāo)簽足矣，根本不需要上下左右額外4層標(biāo)簽拼接合體實(shí)現(xiàn)。

內(nèi)部自適應(yīng)的圓角效果單看文字，很多小伙伴估計(jì)不知道我在說些什么，建議去demo頁面看下偽元素的代碼，真實(shí)區(qū)域大小和最終效果，估計(jì)就會(huì)明白了。

感謝閱讀，歡迎交流，歡迎提供更好的實(shí)現(xiàn)方法，一定有的，只是我功力不夠。

以上~

本文為原創(chuàng)文章，會(huì)經(jīng)常更新知識(shí)點(diǎn)以及修正一些錯(cuò)誤，因此轉(zhuǎn)載(圖片請勿直接外鏈)請保留原出處，方便溯源，避免陳舊錯(cuò)誤知識(shí)的誤導(dǎo)，同時(shí)有更好的閱讀體驗(yàn)。

本文地址： http://www.zhangxinxu.com/wordpress/?p=5290

（本篇完）

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com