最近，我遇到了一個很酷的效果，稱為運球鏡頭。我的第一個想法是，如果我只用一些表情符號在圖標(biāo)中使用一些表情符號而不會浪費時間在svg上，我可以在幾分鐘內(nèi)迅速重新創(chuàng)建它。

對於那些“幾分鐘”，我再錯了 - 他們最終變得瘋狂而令人沮喪地刮擦了這種癢！

事實證明，儘管有關(guān)於如何進(jìn)行這種效果的資源，但他們都假定覆蓋層是矩形或最多是帶邊框拉迪烏斯的矩形的非常簡單的情況。但是，對圖標(biāo)等不規(guī)則形狀（這些圖標(biāo)是表情符號還是適當(dāng)?shù)腟VG）的形狀產(chǎn)生玻璃晶狀體效果，比我預(yù)期的要復(fù)雜得多，因此我認(rèn)為值得分享該過程，我陷入的陷阱以及我一路上學(xué)到的東西。還有我仍然不明白的事情。

為什麼要表情符號？

簡短答案：因為SVG需要太多時間。長答案：因為我缺乏僅將它們繪製在圖像編輯器中的藝術(shù)意義，但是我熟悉語法足夠多，因此我通常可以緊湊我在網(wǎng)上發(fā)現(xiàn)的現(xiàn)成的SVG，而不到其原始大小的不到10％。因此，我不能僅僅在Internet上找到它們時使用它們 - 我必須重做代碼以使其超級乾淨(jìng)和緊湊。這需要時間。很多時間，因為這是細(xì)節(jié)的工作。

而且，如果我想要的只是用圖標(biāo)快速代碼菜單概念，我可以使用表情符號，在它們上應(yīng)用過濾器以使其與主題匹配，僅此而已！這是我為這個液體標(biāo)籤欄互動演示所做的 - 這些圖標(biāo)都是表情符號！光滑的山谷效應(yīng)利用了面具合成技術(shù)。

好吧，這將是我們的起點：將表情符號用於圖標(biāo)。

最初的想法

我的第一個想法是將導(dǎo)航鏈接的兩個假（帶有表情符號的含量）堆疊在一起，略微偏移並用變換旋轉(zhuǎn)底部，以便它們只部分重疊。然後，我將最高的一個半透明劑，其不透明度值小於1，設(shè)置背景過濾器：blur（），這應(yīng)該足夠大。

現(xiàn)在，閱讀了介紹後，您可能會發(fā)現(xiàn)這沒有按計劃進(jìn)行，但是讓我們看看代碼中的外觀以及它的問題。

我們使用以下哈巴狗生成導(dǎo)航欄：

 - 讓數(shù)據(jù)= {
 - 主：{ico：'？'，色調(diào)：200}， 
 - 注意：{iCo：'？？?'，色調(diào)：260}，， 
 - 活動：{ico：'？'，色調(diào)：320}， 
 - 發(fā)現(xiàn)：{ico：'？'，色調(diào)：30}
 - };
 - 令e = object.entries（data）;
 - 令n = e.length;

導(dǎo)航
   -  for（讓i = 0; i> n; i）
    a（href ='＃'data-ico = e [i] [1] .ico style =`-hue：$ {e [i] [i] [1] .hue} deg`）＃{e [e [i] [0] [0]}

哪個彙編到下面的HTML：

 
  <a href="'%EF%BC%83'data-ico"> HOME </a>
  態(tài)
  <a href="'%EF%BC%83'data-ico">活動</a>
  <a href="'%EF%BC%83'data-ico" style="'" hue> covery </a>

我們從佈局開始，製作元素網(wǎng)格項目。我們將NAV放置在中間，給出鏈接明確的寬度，將兩個pseudos放在頂部單元格中的每個鏈接（將鏈接文本內(nèi)容推向底部單元格），然後中間對準(zhǔn)鏈接文本和偽造。

車身，nav，a {顯示：網(wǎng)格; }

身體 {
  保證金：0;
  身高：100VH；
}

nav {
  網(wǎng)格 - 自動流：列；
  位置：中心；
  填充：.75EM 0 .375EM;
}

a {
  寬度：5em;
  文字平衡：中心；
  
  ＆::之前，＆:: efter {
    網(wǎng)格區(qū)域：1/1；
    內(nèi)容：attr（data-iCo）;
  }
}

請注意，表情符號的外觀將有所不同，具體取決於您使用的瀏覽器查看演示。

我們選擇一個清晰的字體，凸起其大小，使圖標(biāo)更大，設(shè)置背景，並為每個鏈接提供更好的顏色（基於每個鏈接的-hue自定義屬性）：

身體 {
  / *與以前相同 */
  背景：＃333;
}

nav {
  / *與以前相同 */
  背景：#fff;
  字體：夾具（.625EM，5VW，1.25EM）/ 1.25 Ubuntu，sans-serif;
}

a {
  / *與以前相同 */
  顏色：HSL（var（-hue），100％，50％）;
  文本介紹：無；
  
  ＆::之前，＆:: efter {
    / *與以前相同 */
    字體大?。?.5em;
  }
}

這是事情開始變得有趣的地方，因為我們開始區(qū)分使用鏈接偽造創(chuàng)建的兩個表情符號層。我們稍微移動並旋轉(zhuǎn)pseudo之前，用棕褐色（1）過濾器使其單色，使其正確地調(diào)出，然後撞到其對比度（） - 一種來自Lea Verou的Oldie，但Goldie Technique。我們還在:: pseudo之後應(yīng)用灰度（1）並使其使其半透明，因為否則，我們將無法通過它看到另一個偽。

 a {
  / *與以前相同 */
  
  ＆：：前 {
    轉(zhuǎn)換： 
      翻譯（.375EM，-.25EM） 
      旋轉(zhuǎn)（22.5攝氏度）;
    篩選： 
      棕褐色（1） 
      色 - 旋轉(zhuǎn)（calc（var（ -  hue）-50DEG））））） 
      飽和（3）;
  }
	
  ＆：：後 {
    不透明：.5;
    過濾器：灰度（1）;
  }
}

撞牆

到目前為止，太好了……那呢？下一步，我愚蠢地認(rèn)為，當(dāng)我有了編寫編碼的想法時，這將是最後一步，涉及在頂部（:: :: after）層設(shè)置BlackDrop-Filter：Blur（5px）。

請注意，F(xiàn)irefox仍然需要gfx.webrender.all and layout.css.backdrop-filter.enabled標(biāo)誌設(shè)置為true的標(biāo)誌：in of：config，為了使背景濾波器屬性可行。

可悲的是，結(jié)果看起來與我期望的不像。我們得到了整個頂部圖標(biāo)邊界框的大小的覆蓋，但是底部圖標(biāo)並沒有真正模糊。

但是，我敢肯定，我之前已經(jīng)玩過背景過濾器：Blur（），而且效果很好，那麼這裡發(fā)生了什麼？

達(dá)到問題的根源

好吧，當(dāng)您不知道為什麼某件事不起作用時，您所能做的就是舉一個工作示例，開始調(diào)整它以嘗試獲得想要的結(jié)果……看看它破裂了！

因此，讓我們看看我較舊的工作演示的簡化版本。 HTML只是一節(jié)中的一篇文章。在CSS中，我們首先設(shè)置一些維度，然後在該部分上設(shè)置一個圖像背景，並在文章中設(shè)置一個半透明的背景。最後，我們在文章中設(shè)置了背景濾波器屬性。

 {背景：url（cake.jpg）50％/封面； }

文章 {
  利潤：25Vmin;
  身高：40VH；
  背景：HSLA（0，0％，97％，.25）;
  背景過濾器：模糊（5px）;
}

這起作用，但我們不希望我們的兩個層彼此嵌套。我們希望他們成為兄弟姐妹。因此，讓我們做兩個層文章兄弟姐妹，使它們部分重疊，看看我們的玻璃塑態(tài)效應(yīng)是否仍然有效。

 <artical class="'Base'"> 
<artical class="'Gray'"> </artical></artical>

文章{寬度：66％;身高：40VH； }

.base {背景：url（cake.jpg）50％/封面； }

?；疑?{
  保證金：-50％0 0 33％；
  背景：HSLA（0，0％，97％，.25）;
  背景過濾器：模糊（5px）;
}

在鍍鉻中，一切似乎都很好，並且在大多數(shù)情況下也是Firefox。只是blur（）在Firefox中的邊緣處理的方式看起來很尷尬，而不是我們想要的。而且，根據(jù)規(guī)格中的少數(shù)圖像，我相信Firefox的結(jié)果也不正確？

我想在我們的兩個層坐在堅固的背景上（在這種特殊情況下為白色）的情況下，F(xiàn)irefox問題的一個解決方法是為底層（.basase）一個沒有偏移，沒有偏移的盒子陰影，沒有模糊，而塗抹半徑是兩倍的模糊半徑，我們用於在頂層上使用背景濾波器（.grey）。果然，在我們的特殊情況下，此修復(fù)程序似乎可以起作用。

如果我們的兩個層坐在帶有未固定的圖像背景的元素上（在這種情況下，我們可以使用分層的背景方法來解決Firefox問題），那麼事情會變得更加毛髮，但這裡不是這樣，因此我們不會進(jìn)入它。

不過，讓我們繼續(xù)下一步。我們不希望我們的兩個層是兩個平方盒，然後我們希望成為表情符號，這意味著我們不能使用HSLA（）背景來確保頂部的半平等 - 我們需要使用不透明度。

 ?；疑?{
  / *與以前相同 */
  不透明：.25;
  背景：HSL（0，0％，97％）;
}

看來我們發(fā)現(xiàn)了問題！由於某種原因，使用不透明度製作頂層半透明會破壞Chrome和Firefox的背景濾波器效應(yīng)。那是一個錯誤嗎？那應(yīng)該發(fā)生什麼嗎？

錯誤與否？

MDN在Backdrop-Filter頁面上的第一段中說以下內(nèi)容：

因為它適用於元素背後的所有內(nèi)容，以查看必須使元素或其背景至少部分透明的效果。

除非我不了解上述句子，否則這似乎表明不透明度不應(yīng)該打破效果，即使它在鉻和Firefox中都可以。

規(guī)格呢？好吧，規(guī)格是一堵大文字牆，沒有許多插圖或互動演示，用一種語言編寫，使閱讀它與嗅探臭鼬的氣味一樣吸引人。它包含了這部分，我有一種感覺可能是相關(guān)的，但是我不確定我要說的是要說的是 - 在頂部元素上設(shè)置的不透明度，我們也將背景過濾器也用於下面的兄弟姐妹嗎？如果這是預(yù)期的結(jié)果，那麼在實踐中肯定不會發(fā)生。

除非元素B的某些部分是半透明的，否則將看不到背景過濾器的效果。另請注意，應(yīng)用於元素B的任何不透明度也將應(yīng)用於過濾的背景圖像。

嘗試隨機(jī)的事情

無論規(guī)格可能說什麼，事實仍然存在：使頂層半透明具有不透明度的特性會破壞鍍鉻和Firefox中的玻璃晶狀體效應(yīng)。還有其他方法可以使表情符號半透明嗎？好吧，我們可以嘗試過濾器：opacity（）！

在這一點上，我可能應(yīng)該報告這種替代方案是否有效，但現(xiàn)實是……我不知道！我在此步驟上花了幾天的時間，並在此步驟中進(jìn)行了無數(shù)次的檢查 - 有時它有效，有時它在完全相同的瀏覽器中，根據(jù)一天中的時間的不同結(jié)果。我還在Twitter上問，得到了不同的答案。當(dāng)您不禁要問萬聖節(jié)鬼是否沒有困擾，嚇到和疤痕您的代碼時，只是其中之一。永恆！

看來所有希望都消失了，但是讓我們只嘗試一件事：用文本代替矩形，最高的是顏色的半透明：hsla（）。我們可能無法獲得我們所追求的涼爽表情符號效果，但也許我們可以得到純文本的結(jié)果。

因此，我們將文本內(nèi)容添加到我們的文章元素中，放棄其明確的尺寸，凸起其字體大小，調(diào)整空間，從而使我們局部重疊，最重要的是，用顏色替換上一個工作版本中的背景聲明。出於可訪問性原因，我們還將aria-hidden ='true'設(shè)置在底部。

 <artical class="'Base'Aria-Hidded">獅子？
<artical class="'Gray'">獅子？</artical></artical>

文章{字體：900 21VW/ 1草書； }

.base {顏色：＃ff7a18; }

?；疑?{
  保證金：-.75EM 0 0 .5EM;
  顏色：HSLA（0，0％，50％，.25）;
  背景過濾器：模糊（5px）;
}

這裡有幾件事要注意。

首先，將顏色屬性設(shè)置為具有亞軍alpha的值，還可以使表情符號半透明，而不僅僅是純文本，無論是在Chrome還是在Firefox中！考慮到其他渠道不會以任何方式影響表情符號，這是我以前從未知道的事情，我發(fā)現(xiàn)絕對令人震驚。

其次，Chrome和Firefox都模糊了橙色文本和表情符號的整個區(qū)域，這些區(qū)域在頂部半透明灰色層的邊界框下方發(fā)現(xiàn)，而不僅僅是模糊實際文本下面的內(nèi)容。在Firefox中，由於尷尬的鋒利邊緣效果，情況看起來更糟。

即使盒子的模糊不是我們想要的，我也不禁認(rèn)為這確實有意義，因為規(guī)格確實說了以下內(nèi)容：

[…]創(chuàng)建一個“透明”元素，可以看到完整的過濾背景圖像，您可以使用“背景色：透明;”。

因此，讓我們進(jìn)行測試以檢查當(dāng)頂層是另一個不是文本的非矩形形狀時發(fā)生的情況，而是用背景梯度，剪貼式路徑或口罩獲得的！

在Chrome和Firefox中，當(dāng)以背景獲得形狀時，頂層整個盒子下方的區(qū)域都會模糊：漸變（），如以前的文本情況所述，根據(jù)規(guī)格有意義。但是，Chrome尊重夾子路徑和麵罩形狀，而Firefox則不尊重。而且，在這種情況下，我真的不知道哪個是正確的，儘管鉻的結(jié)果對我來說確實更有意義。

朝鍍鉻溶液移動

當(dāng)我問如何使模糊文本邊緣而不是其邊界盒的模糊時，我得到了這個結(jié)果，也是我得到的Twitter建議。該解決方案在Firefox中不起作用的原因有兩個：一個原因，可悲的是，僅在Webkit瀏覽器中起作用的非標(biāo)準(zhǔn)蒙版-CLIP值，而在上面的測試中，掩模並不將模糊區(qū)域限制在Firefox中蒙版所產(chǎn)生的形狀。

 / *與以前相同 */

。灰色的 {
  / *與以前相同 */
  -webkit面具：線性級別（紅色，紅色）文本； / *僅在Webkit瀏覽器中工作 */
}

好吧，這實際上看起來像我們想要的，所以我們可以說我們正朝著正確的方向前進(jìn)！但是，在這裡，我們使用了橙色的心臟表情符號作為底層，而黑心表情符號則用於頂部半透明層。其他通用表情符號沒有黑白版本，所以我的下一個想法是最初使這兩層相同，然後將頂部的一個半透明劑和使用過濾器製成：灰度（1）。

文章 { 
  顏色：HSLA（25，100％，55％，var（-a，1））;
  字體：900 21VW/ 1.25草書；
}

?；疑?{
  -a：.25;
  保證金：-1EM 0 0 .5EM;
  過濾器：灰度（1）;
  背景過濾器：模糊（5px）;
  -webkit面具：線性級別（紅色，紅色）文本；
}

好吧，那肯定會產(chǎn)生我們想要的效果。不幸的是，出於某種奇怪的原因，它似乎也影響了下面的層的模糊區(qū)域。這一刻是要簡要考慮將筆記本電腦扔出窗口的地方……在獲得添加另一層的想法之前。

它會像這樣：我們有基礎(chǔ)層，就像我們到目前為止，與上面的其他兩個相距略有偏見。中間層是一個“幽靈”（透明），它應(yīng)用了背景過濾器。最後，頂部是半透明的，並獲取灰度（1）濾波器。

身體{顯示：網(wǎng)格; }

文章 {
  網(wǎng)格區(qū)域：1/1；
  位置：中心；
  填充：.25em;
  顏色：HSLA（25，100％，55％，var（-a，1））;
  字體：900 21VW/ 1.25 Pacifico，Z003，Segoe腳本，漫畫Sans MS，草書；
}

.base {margin：-.5em 0 0 -.5em; }

.midl {
  -a：0;
  背景過濾器：模糊（5px）;
  -webkit面具：線性級別（紅色，紅色）文本；
}

.grey {過濾器：灰度（1）不透明度（.25）}

現(xiàn)在我們到達(dá)某個地方！還有另一件事要做：使基層單色！

 / *與以前相同 */

。根據(jù) {
  保證金：-.5EM 0 0 -.5EM;
  濾鏡：棕褐色（1）色 - 旋轉(zhuǎn)（165DEG）對比度（1.5）;
}

好吧，這就是我們想要的效果！

進(jìn)入Firefox解決方案

在編碼Chrome解決方案時，我不禁認(rèn)為我們可能能夠在Firefox中取得相同的結(jié)果，因為Firefox是唯一支持元素（）函數(shù)的瀏覽器。此功能使我們可以採用一個元素，並將其用作另一個元素的背景。

這個想法是，.base和.grey層具有與Chrome版本相同的樣式，而中間層將具有（通過元素（）函數(shù)）我們層的模糊版本的背景。

為了使事情變得更容易，我們僅從這個模糊的版本和中層開始。

 獅子？
<artical class="'Midl'">獅子？</artical>

我們絕對將模糊的版本定位（目前仍將其視為），使其單色並模糊，然後將其用作.midl的背景。

 #blur {
  位置：絕對；
  頂部：2em;右：0;
  保證金：-.5EM 0 0 -.5EM;
  過濾器：棕褐色（1）色 - 旋轉(zhuǎn)（165DEG）對比度（1.5）Blur（5px）;
}

.midl {
  -a：.5;
  背景：-moz -element（#blur）;
}

我們還將文字在.midl元素半透明式上進(jìn)行了，因此我們可以通過它看到背景。最終我們將使其完全透明，但是就目前而言，我們?nèi)匀幌Ｍ吹狡湎鄬侗尘暗奈恢谩?/p>

我們可以立即註意到一個問題：雖然保證金可以抵消實際的#Blur元素，但它無濟(jì)於事，可以轉(zhuǎn)移其作為背景的位置。為了獲得這種效果，我們需要使用轉(zhuǎn)換屬性。如果我們想要旋轉(zhuǎn)或任何其他變換，這也可以幫助我們，因為它可以在下面看到我們用變換替換邊緣的地方：旋轉(zhuǎn)（-9DEG）。

好吧，但是我們?nèi)匀粓猿脂F(xiàn)在的翻譯：

 #blur {
  / *與以前相同 */
  變換：轉(zhuǎn)換（ - 。25EM，-.25EM）; / *更換保證金 */
}

這裡要注意的一件事是，隨著中間層的填充框的限制，它有些模糊的背景被切斷。無論如何，這並不重要，因為我們的下一步行動是將背景夾在文本區(qū)域中，但是只有該空間就可以了，因為.base層將被翻譯到遠(yuǎn)處。

因此，即使在這一點上，我們也會在視覺上毫無區(qū)別，因為我們還設(shè)置了backgrows-clip：.midl元素上的文本，我們也將稍微提高填充物。

文章 {
  / *與以前相同 */
  填充：.5em;
}

#blur {
  位置：絕對；
  底部：100VH;
  變換：轉(zhuǎn)換（ - 。25EM，-.25EM）;
  過濾器：棕褐色（1）色 - 旋轉(zhuǎn)（165DEG）對比度（1.5）Blur（5px）;
}

.midl {
  -a：.1;
  背景：-moz -element（#blur）;
  背景剪輯：文字；
}

我們還將#Blur元素移到了視線之外，並進(jìn)一步降低了.midl元素的顏色的alpha，因為我們希望通過文本在背景上更好地視野。我們並沒有使其完全透明，但是現(xiàn)在仍然可以看到它，以便我們知道它覆蓋的區(qū)域。

下一步是添加帶有與Chrome情況相同的樣式的.basase元素，只能用轉(zhuǎn)換代替邊距。

 獅子？
<artical class="'Base'Aria-Hidded">獅子？
<artical class="'Midl'">獅子？</artical></artical>

 #blur {
  位置：絕對；
  底部：100VH;
  變換：轉(zhuǎn)換（ - 。25EM，-.25EM）;
  過濾器：棕褐色（1）色 - 旋轉(zhuǎn)（165DEG）對比度（1.5）Blur（5px）;
}

。根據(jù) {
  變換：轉(zhuǎn)換（ - 。25EM，-.25EM）;
  濾鏡：棕褐色（1）色 - 旋轉(zhuǎn)（165DEG）對比度（1.5）;
}

由於這些樣式的一部分很常見，因此我們還可以在模糊元素#blur上添加.basase類，以避免重複並減少我們編寫的代碼量。

 獅子？
<artical class="'Base'Aria-Hidded">獅子？
<artical class="'Midl'">獅子？</artical></artical>

 #blur {
  -r：5px;
  位置：絕對；
  底部：100VH;
}

。根據(jù) {
  變換：轉(zhuǎn)換（ - 。25EM，-.25EM）;
  濾鏡：棕褐色（1）色 - 旋酸鹽（165DEG）對比度（1.5）Blur（var（-r，0））;
}

我們這裡有一個不同的問題。由於.base層具有轉(zhuǎn)換，因此儘管DOM順序，它現(xiàn)在位於.Midl層的頂部。最簡單的修復(fù)？在.midl元素上添加z index：2！

我們?nèi)匀挥辛硪粋€更微妙的問題：在.Midl元素上設(shè)置的模糊背景的半透明部分下方仍然可以看到.base元素。我們不想看到下面的.base層文本的尖銳邊緣，但是我們是因為模糊會導(dǎo)致像素接近邊緣變成半透明的像素。

根據(jù)我們在文本層的父母身上有哪種背景，這是一個可以通過少量或大量精力來解決的問題。

如果我們只有堅實的背景，則通過將.Midl元素上的背景色設(shè)置為相同的值來解決問題。幸運的是，這恰好是我們的情況，因此我們不會討論其他情況。也許在另一篇文章中。

 .midl {
  / *與以前相同 */
  背景：-moz -element（#blur）#fff;
  背景剪輯：文字；
}

我們在Firefox中取得了不錯的成績！剩下要做的就是添加頂部.grey層，其樣式與Chrome版本完全相同！

 .grey {過濾器：灰度（1）不透明度（.25）; }

可悲的是，這樣做並不能產(chǎn)生我們想要的結(jié)果，如果我們還將中間層文本完全透明（通過將其alpha -a：0）使中間層文本完全透明，那麼我們只會看到其背景（在固體白色頂部使用模糊的元素#blur）夾在文本區(qū)域：

問題是我們看不到.grey層！由於設(shè)置了z索引：2，中間層.MIDL現(xiàn)在還是在頂層（.grey One）上方，儘管有DOM順序。解決方案？設(shè)置z索引：3上的.grey層！

 ?；疑?{
  z索引：3;
  過濾器：灰度（1）不透明度（.25）;
}

我真的不喜歡一層給出z索引，但是，嘿，這很努力，而且有效！我們現(xiàn)在有一個不錯的Firefox解決方案：

將我們的解決方案組合到跨瀏覽器中

我們從Firefox代碼開始，因為還有更多：

 獅子？
<artical class="'Base'Aria-Hidded">獅子？
<artical class="'Midl'Aria-Hidded">獅子？
<artical class="'Gray'">獅子？</artical></artical></artical>

身體{顯示：網(wǎng)格; }

文章 {
  網(wǎng)格區(qū)域：1/1；
  位置：中心；
  填充：.5em;
  顏色：HSLA（25，100％，55％，var（-a，1））;
  字體：900 21VW/ 1.25草書；
}

#blur {
  -r：5px;
  位置：絕對；
  底部：100VH;
}

。根據(jù) {
  變換：轉(zhuǎn)換（ - 。25EM，-.25EM）;
  濾鏡：棕褐色（1）色 - 旋酸鹽（165DEG）對比度（1.5）Blur（var（-r，0））;
}

.midl {
  -a：0;
  z索引：2;
  背景：-moz -element（#blur）#fff;
  背景剪輯：文字；
}

?；疑?{
  z索引：3;
  過濾器：灰度（1）不透明度（.25）;
}

額外的z索引聲明不會影響鉻的結(jié)果，並且視覺#blur元素也不會影響。為了在Chrome中起作用的唯一缺少的是背景濾波器和.midl元素上的蒙版聲明：

背景過濾器：模糊（5px）;
-webkit面具：線性級別（紅色，紅色）文本；

由於我們不希望在Firefox中應(yīng)用背景過濾器，也不希望背景在Chrome中應(yīng)用，因此我們使用@supports：

 $ r：5px;

/ *與以前相同 */

#blur {
  / *與以前相同 */
  -r：＃{$ r};
}

.midl {
  -a：0;
  z索引：2;
  / *需要在@supports內(nèi)部重置，以免將其應(yīng)用於Firefox */
  背景過濾器：Blur（$ r）;
  / * Firefox中無效的值，無論如何都沒有應(yīng)用，無需重置 */
  -webkit面具：線性級別（紅色，紅色）文本；
  
  @supports（背景：-moz -element（#blur））{ / * for Firefox * /
    背景：-moz -element（#blur）#fff;
    背景剪輯：文字；
    背景過濾器：無；
  }
}

這為我們提供了跨瀏覽器解決方案！

雖然在兩個瀏覽器中的結(jié)果並不相同，但它仍然非常相似，對我來說足夠了。

一個元素的解決方案呢？

可悲的是，這是不可能的。

首先，F(xiàn)irefox解決方案要求我們至少具有兩個元素，因為我們使用一個元素（由其ID引用）作為另一個元素。

其次，雖然其餘三層的第一個想法（無論如何，這是我們唯一需要的鉻解決方案）是，其中一個可能是實際元素，而其他兩個則可能是偽造的，但在這種特殊情況下，它並不那麼簡單。

對於Chrome解決方案，每個層都有至少一個特性，它也會不可逆地影響任何兒童及其可能擁有的任何偽造物。對於.base和.grey層，這就是過濾器屬性。對於中間層，這是掩模屬性。

因此，儘管擁有所有這些元素並不是很漂亮，但如果我們希望玻璃晶狀體效應(yīng)也可以在表情符號上起作用，看起來我們沒有更好的解決方案。

如果我們只想對純文本產(chǎn)生玻璃晶狀體影響 - 圖片中沒有表情符號 - 只需兩個元素即可實現(xiàn)，其中只需要一個元素才能用於鍍鉻溶液。另一個是#blur元素，我們只需要在Firefox中。

 血液
<artical class="'text'aria-hidded"> </artical>

我們使用.TEXT元素的兩個偽群來創(chuàng)建基礎(chǔ)層（以::之前）和其他兩個層的組合（帶有::後面）。在這裡有幫助的是，隨著表情符號的圖像，我們不需要過濾器：灰度（1），而是我們可以控制顏色值的飽和成分。

這兩個偽堆在另一個偽造的頂部，底部的一個（::前）被相同的量偏移，並且具有與#Blur元素相同的顏色。該顏色值取決於一個標(biāo)誌 - -f，有助於我們控制飽和度和alpha。對於#blur元素和偽元素和:: pseudo（-f：1）之前，飽和度為100％，alpha為1。對於pseudo（-f：0）之後的:: ::飽和度為0％，而alpha為.25。

 $ r：5px;

％text {// #blur和兩個.text pseudos使用
  -f：1;
  網(wǎng)格區(qū)域：1/1； //堆棧pseudos，絕對定位的#base忽略了
  填充：.5em;
  顏色：HSLA（345，calc（var（-f）*100％），55％，calc（.25 .75*var（-f）））;
  內(nèi)容：attr（data-text）;
}

文章{字體：900 21VW/ 1.25草書}

#blur {
  位置：絕對；
  底部：100VH;
  過濾器：Blur（$ r）;
}

#blur，.text :: {
  變換：翻譯（ - 。125EM，-.125EM）;
  @extend％text;
}

.文字 {
  顯示：網(wǎng)格；
	
  ＆：：後 {
    -f：0;
    @extend％text;
    z索引：2;
    背景過濾器：Blur（$ r）;
    -webkit面具：線性級別（紅色，紅色）文本；

    @supports（背景：-moz -element（#blur））{
      背景：-moz -element（#blur）#fff;
      背景剪輯：文字；
      背景過濾器：無；
    }
  }
}

將跨瀏覽器解決方案應(yīng)用於我們的用例

這裡的好消息是我們的特殊用例，在該情況下，我們只對鏈接圖標(biāo)產(chǎn)生玻璃效果效果（不在整個鏈接上，包括文本）實際上簡化了一點一點。

我們使用以下哈巴狗生成結(jié)構(gòu)：

 - 讓數(shù)據(jù)= {
 - 主：{ico：'？'，色調(diào)：200}， 
 - 注意：{iCo：'？？?'，色調(diào)：260}，， 
 - 活動：{ico：'？'，色調(diào)：320}， 
 - 發(fā)現(xiàn)：{ico：'？'，色調(diào)：30}
 - };
 - 令e = object.entries（data）;
 - 令n = e.length;

導(dǎo)航
   -  for（讓i = 0; i <n i e .ico a.item .hue deg span.icon.tint span.icon.midl span.icon.grey><p>它產(chǎn)生了下面的HTML結(jié)構(gòu)：</p>
<pre rel="HTML" data-line=""> 
  <a class="'item'href" hue>
    <span class="'圖標(biāo)tint'id">？</span>
    <span class="'圖標(biāo)色調(diào)'aria-hidded">？</span>
    <span class="'iCon" midl>？</span>
    <span class="'圖標(biāo)灰色'aria-hidded">？</span>
    家
  </a>
  

我們可能可以用偽造代替這些跨度的一部分，但是我覺得它更加一致，更容易，所以跨度三明治！

值得注意的一件事是，我們對每個項目都有一個不同的模糊圖標(biāo)層（因為每個項目都有自己的圖標(biāo)），因此我們將.Midl元素的背景設(shè)置為樣式屬性。如果我們添加或刪除數(shù)據(jù)對象的條目（從而更改菜單項的數(shù)量），以這種方式進(jìn)行操作可以避免對CSS文件進(jìn)行任何更改。

當(dāng)我們第一次CSS-ED The Nav Bar時，我們幾乎具有相同的佈局和風(fēng)化的樣式。唯一的區(qū)別是，現(xiàn)在我們在項目網(wǎng)格的頂部單元格中沒有偽造。我們有跨度：

跨度{
  網(wǎng)格區(qū)域：1/1； / *將所有表情符號彼此堆疊在一起 */
  字體大?。?em; / *凸起表情符號大小 */
}

對於表情符號圖標(biāo)本身，我們也不需要從跨瀏覽器版本中進(jìn)行許多更改，儘管有一些lttle。

首先，我們使用最初選擇的轉(zhuǎn)換和濾網(wǎng)鏈，而不是使用鏈接偽造而不是跨度。從那以後，我們也不需要顏色：hsla（）聲明，因為我們只有表情符號在這裡，所以只有alpha頻道才是重要的。為.base和.grey層保留的默認(rèn)值是1。因此，我們不在設(shè)置一個顏色值，而只有alpha，-a，通道很重要，我們將其更改為.midl層上的0，我們將其直接設(shè)置為顏色：透明。我們也只需要在Firefox情況下的.midl元素上設(shè)置背景色，因為我們已經(jīng)在樣式屬性中設(shè)置了背景圖像。這導(dǎo)致了解決方案的以下適應(yīng)：

 .base { / * mono emoji版本 * /
  變換：translate（.375em，-.25em）旋轉(zhuǎn)（22.5DEG）;
  濾鏡：棕褐色（1）色調(diào)旋轉(zhuǎn)（var（-hue））飽和（3）Blur（var（-r，0））;
}

.midl { / *中間，透明表情符號版本 * /
  顏色：透明； / *所以看不到 */
  背景過濾器：模糊（5px）;
  -webkit mask：線性級別（紅色0 0）文本;
  
  @supports（背景：-moz -element（#b））{
    背景色：#FFF;
    背景剪輯：文字；
    背景過濾器：無；
  }
}

就是這樣 - 我們對此NAV欄具有不錯的圖標(biāo)玻璃效果！

只有一件事要照顧 - 我們一直不希望這種效果；僅在：懸?；颍航裹c狀態(tài)。因此，我們將使用一個標(biāo)誌，即正常狀態(tài)為0，在：懸停或：焦點狀態(tài)中為1，以控制不透明度並轉(zhuǎn)換.base跨度的不透明度。這是我在早期文章中詳細(xì)介紹的一種技術(shù)。

 $ t：.3s;

a {
  / *與以前相同 */
  -hl：0;
  顏色：HSL（var（-hue），calc（var（-hl）*100％），65％）;
  過渡：顏色$ t;
  
  ＆：Hover，＆：focus {-hl：1; }
}

。根據(jù) {
  轉(zhuǎn)換： 
    翻譯（calc（var（-hl）*。375EM），calc（var（-hl）* - 。25EM）） 
    旋轉(zhuǎn)（calc（var（-hl）*22.5DEG））;
  不透明度：var（-hl）;
  過渡：變換$ t，不透明度$ t;
}

當(dāng)圖標(biāo)懸?；蚓劢箷r，可以在下面的交互式演示中看到該結(jié)果。

使用SVG圖標(biāo)怎麼樣？

在完成CSS表情符號版本所需的一切之後，我自然而然地問自己這個問題。普通的SVG方式是否比跨度三明治更有意義，這不是很簡單嗎？好吧，雖然這確實更有意義，尤其是因為我們沒有表情符號，但可悲的是代碼不少，而且也不是更簡單。

但是，我們將在另一篇文章中詳細(xì)介紹！

以上是CSS中的圖標(biāo)玻璃塑料效應(yīng)的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！