CSS中的图标玻璃塑料效应

最近，我遇到了一个很酷的效果，称为运球镜头。我的第一个想法是，如果我只用一些表情符号在图标中使用一些表情符号而不会浪费时间在svg上，我可以在几分钟内迅速重新创建它。

对于那些“几分钟”，我再错了 - 他们最终变得疯狂而令人沮丧地刮擦了这种痒！

事实证明，尽管有关于如何进行这种效果的资源，但他们都假定覆盖层是矩形或最多是带边框拉迪乌斯的矩形的非常简单的情况。但是，对图标等不规则形状（这些图标是表情符号还是适当的SVG）的形状产生玻璃晶状体效果，比我预期的要复杂得多，因此我认为值得分享该过程，我陷入的陷阱以及我一路上学到的东西。还有我仍然不明白的事情。

为什么要表情符号？

简短答案：因为SVG需要太多时间。长答案：因为我缺乏仅将它们绘制在图像编辑器中的艺术意义，但是我熟悉语法足够多，因此我通常可以紧凑我在网上发现的现成的SVG，而不到其原始大小的不到10％。因此，我不能仅仅在Internet上找到它们时使用它们 - 我必须重做代码以使其超级干净和紧凑。这需要时间。很多时间，因为这是细节的工作。

而且，如果我想要的只是用图标快速代码菜单概念，我可以使用表情符号，在它们上应用过滤器以使其与主题匹配，仅此而已！这是我为这个液体标签栏互动演示所做的 - 这些图标都是表情符号！光滑的山谷效应利用了面具合成技术。

好吧，这将是我们的起点：将表情符号用于图标。

最初的想法

我的第一个想法是将导航链接的两个假（带有表情符号的含量）堆叠在一起，略微偏移并用变换旋转底部，以便它们只部分重叠。然后，我将最高的一个半透明剂，其不透明度值小于1，设置背景过滤器：blur（），这应该足够大。

现在，阅读了介绍后，您可能会发现这没有按计划进行，但是让我们看看代码中的外观以及它的问题。

我们使用以下哈巴狗生成导航栏：

 - 让数据= {
 - 主：{ico：'？'，色调：200}， 
 - 注意：{iCo：'？？️'，色调：260}，， 
 - 活动：{ico：'？'，色调：320}， 
 - 发现：{ico：'？'，色调：30}
 - };
 - 令e = object.entries（data）;
 - 令n = e.length;

导航
   -  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>
  态
  <a href="'%EF%BC%83'data-ico">活动</a>
  <a href="'%EF%BC%83'data-ico" style="'" hue> covery </a>

我们从布局开始，制作元素网格项目。我们将NAV放置在中间，给出链接明确的宽度，将两个pseudos放在顶部单元格中的每个链接（将链接文本内容推向底部单元格），然后中间对准链接文本和伪造。

车身，nav，a {显示：网格; }

身体 {
  保证金：0;
  身高：100VH；
}

nav {
  网格 - 自动流：列；
  位置：中心；
  填充：.75EM 0 .375EM;
}

a {
  宽度：5em;
  文字平衡：中心；
  
  ＆::之前，＆:: efter {
    网格区域：1/1；
    内容：attr（data-iCo）;
  }
}

请注意，表情符号的外观将有所不同，具体取决于您使用的浏览器查看演示。

我们选择一个清晰的字体，凸起其大小，使图标更大，设置背景，并为每个链接提供更好的颜色（基于每个链接的-hue自定义属性）：

身体 {
  / *与以前相同 */
  背景：＃333;
}

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

a {
  / *与以前相同 */
  颜色：HSL（var（-hue），100％，50％）;
  文本介绍：无；
  
  ＆::之前，＆:: efter {
    / *与以前相同 */
    字体大小：2.5em;
  }
}

这是事情开始变得有趣的地方，因为我们开始区分使用链接伪造创建的两个表情符号层。我们稍微移动并旋转pseudo之前，用棕褐色（1）过滤器使其单色，使其正确地调出，然后撞到其对比度（） - 一种来自Lea Verou的Oldie，但Goldie Technique。我们还在:: pseudo之后应用灰度（1）并使其使其半透明，因为否则，我们将无法通过它看到另一个伪。

 a {
  / *与以前相同 */
  
  ＆：：前 {
    转换： 
      翻译（.375EM，-.25EM） 
      旋转（22.5摄氏度）;
    筛选： 
      棕褐色（1） 
      色 - 旋转（calc（var（ -  hue）-50DEG））））） 
      饱和（3）;
  }
	
  ＆：：后 {
    不透明：.5;
    过滤器：灰度（1）;
  }
}

撞墙

到目前为止，太好了……那呢？下一步，我愚蠢地认为，当我有了编写编码的想法时，这将是最后一步，涉及在顶部（:: :: after）层设置BlackDrop-Filter：Blur（5px）。

请注意，Firefox仍然需要gfx.webrender.all and layout.css.backdrop-filter.enabled标志设置为true的标志：in of：config，为了使背景滤波器属性可行。

可悲的是，结果看起来与我期望的不像。我们得到了整个顶部图标边界框的大小的覆盖，但是底部图标并没有真正模糊。

但是，我敢肯定，我之前已经玩过背景过滤器：Blur（），而且效果很好，那么这里发生了什么？

达到问题的根源

好吧，当您不知道为什么某件事不起作用时，您所能做的就是举一个工作示例，开始调整它以尝试获得想要的结果……看看它破裂了！

因此，让我们看看我较旧的工作演示的简化版本。 HTML只是一节中的一篇文章。在CSS中，我们首先设置一些维度，然后在该部分上设置一个图像背景，并在文章中设置一个半透明的背景。最后，我们在文章中设置了背景滤波器属性。

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

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

这起作用，但我们不希望我们的两个层彼此嵌套。我们希望他们成为兄弟姐妹。因此，让我们做两个层文章兄弟姐妹，使它们部分重叠，看看我们的玻璃塑态效应是否仍然有效。

 <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）;
}

在镀铬中，一切似乎都很好，并且在大多数情况下也是Firefox。只是blur（）在Firefox中的边缘处理的方式看起来很尴尬，而不是我们想要的。而且，根据规格中的少数图像，我相信Firefox的结果也不正确？

我想在我们的两个层坐在坚固的背景上（在这种特殊情况下为白色）的情况下，Firefox问题的一个解决方法是为底层（.basase）一个没有偏移，没有偏移的盒子阴影，没有模糊，而涂抹半径是两倍的模糊半径，我们用于在顶层上使用背景滤波器（.grey）。果然，在我们的特殊情况下，此修复程序似乎可以起作用。

如果我们的两个层坐在带有未固定的图像背景的元素上（在这种情况下，我们可以使用分层的背景方法来解决Firefox问题），那么事情会变得更加毛发，但这里不是这样，因此我们不会进入它。

不过，让我们继续下一步。我们不希望我们的两个层是两个平方盒，然后我们希望成为表情符号，这意味着我们不能使用HSLA（）背景来确保顶部的半平等 - 我们需要使用不透明度。

 。灰色的 {
  / *与以前相同 */
  不透明：.25;
  背景：HSL（0，0％，97％）;
}

看来我们发现了问题！由于某种原因，使用不透明度制作顶层半透明会破坏Chrome和Firefox的背景滤波器效应。那是一个错误吗？那应该发生什么吗？

错误与否？

MDN在Backdrop-Filter页面上的第一段中说以下内容：

因为它适用于元素背后的所有内容，以查看必须使元素或其背景至少部分透明的效果。

除非我不了解上述句子，否则这似乎表明不透明度不应该打破效果，即使它在铬和Firefox中都可以。

规格呢？好吧，规格是一堵大文字墙，没有许多插图或互动演示，用一种语言编写，使阅读它与嗅探臭鼬的气味一样吸引人。它包含了这部分，我有一种感觉可能是相关的，但是我不确定我要说的是要说的是 - 在顶部元素上设置的不透明度，我们也将背景过滤器也用于下面的兄弟姐妹吗？如果这是预期的结果，那么在实践中肯定不会发生。

除非元素B的某些部分是半透明的，否则将看不到背景过滤器的效果。另请注意，应用于元素B的任何不透明度也将应用于过滤的背景图像。

尝试随机的事情

无论规格可能说什么，事实仍然存在：使顶层半透明具有不透明度的特性会破坏镀铬和Firefox中的玻璃晶状体效应。还有其他方法可以使表情符号半透明吗？好吧，我们可以尝试过滤器：opacity（）！

在这一点上，我可能应该报告这种替代方案是否有效，但现实是……我不知道！我在此步骤上花了几天的时间，并在此步骤中进行了无数次的检查 - 有时它有效，有时它在完全相同的浏览器中，根据一天中的时间的不同结果。我还在Twitter上问，得到了不同的答案。当您不禁要问万圣节鬼是否没有困扰，吓到和疤痕您的代码时，只是其中之一。永恒！

看来所有希望都消失了，但是让我们只尝试一件事：用文本代替矩形，最高的是颜色的半透明：hsla（）。我们可能无法获得我们所追求的凉爽表情符号效果，但也许我们可以得到纯文本的结果。

因此，我们将文本内容添加到我们的文章元素中，放弃其明确的尺寸，凸起其字体大小，调整空间，从而使我们局部重叠，最重要的是，用颜色替换上一个工作版本中的背景声明。出于可访问性原因，我们还将aria-hidden ='true'设置在底部。

 <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）;
}

这里有几件事要注意。

首先，将颜色属性设置为具有亚军alpha的值，还可以使表情符号半透明，而不仅仅是纯文本，无论是在Chrome还是在Firefox中！考虑到其他渠道不会以任何方式影响表情符号，这是我以前从未知道的事情，我发现绝对令人震惊。

其次，Chrome和Firefox都模糊了橙色文本和表情符号的整个区域，这些区域在顶部半透明灰色层的边界框下方发现，而不仅仅是模糊实际文本下面的内容。在Firefox中，由于尴尬的锋利边缘效果，情况看起来更糟。

即使盒子的模糊不是我们想要的，我也不禁认为这确实有意义，因为规格确实说了以下内容：

[…]创建一个“透明”元素，可以看到完整的过滤背景图像，您可以使用“背景色：透明;”。

因此，让我们进行测试以检查当顶层是另一个不是文本的非矩形形状时发生的情况，而是用背景梯度，剪贴式路径或口罩获得的！

在Chrome和Firefox中，当以背景获得形状时，顶层整个盒子下方的区域都会模糊：渐变（），如以前的文本情况所述，根据规格有意义。但是，Chrome尊重夹子路径和面罩形状，而Firefox则不尊重。而且，在这种情况下，我真的不知道哪个是正确的，尽管铬的结果对我来说确实更有意义。

朝镀铬溶液移动

当我问如何使模糊文本边缘而不是其边界盒的模糊时，我得到了这个结果，也是我得到的Twitter建议。该解决方案在Firefox中不起作用的原因有两个：一个原因，可悲的是，仅在Webkit浏览器中起作用的非标准蒙版-CLIP值，而在上面的测试中，掩模并不将模糊区域限制在Firefox中蒙版所产生的形状。

 / *与以前相同 */

。灰色的 {
  / *与以前相同 */
  -webkit面具：线性级别（红色，红色）文本； / *仅在Webkit浏览器中工作 */
}

好吧，这实际上看起来像我们想要的，所以我们可以说我们正朝着正确的方向前进！但是，在这里，我们使用了橙色的心脏表情符号作为底层，而黑心表情符号则用于顶部半透明层。其他通用表情符号没有黑白版本，所以我的下一个想法是最初使这两层相同，然后将顶部的一个半透明剂和使用过滤器制成：灰度（1）。

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

。灰色的 {
  -a：.25;
  保证金：-1EM 0 0 .5EM;
  过滤器：灰度（1）;
  背景过滤器：模糊（5px）;
  -webkit面具：线性级别（红色，红色）文本；
}

好吧，那肯定会产生我们想要的效果。不幸的是，出于某种奇怪的原因，它似乎也影响了下面的层的模糊区域。这一刻是要简要考虑将笔记本电脑扔出窗口的地方……在获得添加另一层的想法之前。

它会像这样：我们有基础层，就像我们到目前为止，与上面的其他两个相距略有偏见。中间层是一个“幽灵”（透明），它应用了背景过滤器。最后，顶部是半透明的，并获取灰度（1）滤波器。

身体{显示：网格; }

文章 {
  网格区域：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）}

现在我们到达某个地方！还有另一件事要做：使基层单色！

 / *与以前相同 */

。根据 {
  保证金：-.5EM 0 0 -.5EM;
  滤镜：棕褐色（1）色 - 旋转（165DEG）对比度（1.5）;
}

好吧，这就是我们想要的效果！

进入Firefox解决方案

在编码Chrome解决方案时，我不禁认为我们可能能够在Firefox中取得相同的结果，因为Firefox是唯一支持元素（）函数的浏览器。此功能使我们可以采用一个元素，并将其用作另一个元素的背景。

这个想法是，.base和.grey层具有与Chrome版本相同的样式，而中间层将具有（通过元素（）函数）我们层的模糊版本的背景。

为了使事情变得更容易，我们仅从这个模糊的版本和中层开始。

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

我们绝对将模糊的版本定位（目前仍将其视为），使其单色并模糊，然后将其用作.midl的背景。

 #blur {
  位置：绝对；
  顶部：2em;右：0;
  保证金：-.5EM 0 0 -.5EM;
  过滤器：棕褐色（1）色 - 旋转（165DEG）对比度（1.5）Blur（5px）;
}

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

我们还将文字在.midl元素半透明式上进行了，因此我们可以通过它看到背景。最终我们将使其完全透明，但是就目前而言，我们仍然希望看到其相对于背景的位置。

我们可以立即注意到一个问题：虽然保证金可以抵消实际的#Blur元素，但它无济于事，可以转移其作为背景的位置。为了获得这种效果，我们需要使用转换属性。如果我们想要旋转或任何其他变换，这也可以帮助我们，因为它可以在下面看到我们用变换替换边缘的地方：旋转（-9DEG）。

好吧，但是我们仍然坚持现在的翻译：

 #blur {
  / *与以前相同 */
  变换：转换（ - 。25EM，-.25EM）; / *更换保证金 */
}

这里要注意的一件事是，随着中间层的填充框的限制，它有些模糊的背景被切断。无论如何，这并不重要，因为我们的下一步行动是将背景夹在文本区域中，但是只有该空间就可以了，因为.base层将被翻译到远处。

因此，即使在这一点上，我们也会在视觉上毫无区别，因为我们还设置了backgrows-clip：.midl元素上的文本，我们也将稍微提高填充物。

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

#blur {
  位置：绝对；
  底部：100VH;
  变换：转换（ - 。25EM，-.25EM）;
  过滤器：棕褐色（1）色 - 旋转（165DEG）对比度（1.5）Blur（5px）;
}

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

我们还将#Blur元素移到了视线之外，并进一步降低了.midl元素的颜色的alpha，因为我们希望通过文本在背景上更好地视野。我们并没有使其完全透明，但是现在仍然可以看到它，以便我们知道它覆盖的区域。

下一步是添加带有与Chrome情况相同的样式的.basase元素，只能用转换代替边距。

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

 #blur {
  位置：绝对；
  底部：100VH;
  变换：转换（ - 。25EM，-.25EM）;
  过滤器：棕褐色（1）色 - 旋转（165DEG）对比度（1.5）Blur（5px）;
}

。根据 {
  变换：转换（ - 。25EM，-.25EM）;
  滤镜：棕褐色（1）色 - 旋转（165DEG）对比度（1.5）;
}

由于这些样式的一部分很常见，因此我们还可以在模糊元素#blur上添加.basase类，以避免重复并减少我们编写的代码量。

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

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

。根据 {
  变换：转换（ - 。25EM，-.25EM）;
  滤镜：棕褐色（1）色 - 旋酸盐（165DEG）对比度（1.5）Blur（var（-r，0））;
}

我们这里有一个不同的问题。由于.base层具有转换，因此尽管DOM顺序，它现在位于.Midl层的顶部。最简单的修复？在.midl元素上添加z index：2！

我们仍然有另一个更微妙的问题：在.Midl元素上设置的模糊背景的半透明部分下方仍然可以看到.base元素。我们不想看到下面的.base层文本的尖锐边缘，但是我们是因为模糊会导致像素接近边缘变成半透明的像素。

根据我们在文本层的父母身上有哪种背景，这是一个可以通过少量或大量精力来解决的问题。

如果我们只有坚实的背景，则通过将.Midl元素上的背景色设置为相同的值来解决问题。幸运的是，这恰好是我们的情况，因此我们不会讨论其他情况。也许在另一篇文章中。

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

我们在Firefox中取得了不错的成绩！剩下要做的就是添加顶部.grey层，其样式与Chrome版本完全相同！

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

可悲的是，这样做并不能产生我们想要的结果，如果我们还将中间层文本完全透明（通过将其alpha -a：0）使中间层文本完全透明，那么我们只会看到其背景（在固体白色顶部使用模糊的元素#blur）夹在文本区域：

问题是我们看不到.grey层！由于设置了z索引：2，中间层.MIDL现在还是在顶层（.grey One）上方，尽管有DOM顺序。解决方案？设置z索引：3上的.grey层！

 。灰色的 {
  z索引：3;
  过滤器：灰度（1）不透明度（.25）;
}

我真的不喜欢一层给出z索引，但是，嘿，这很努力，而且有效！我们现在有一个不错的Firefox解决方案：

将我们的解决方案组合到跨浏览器中

我们从Firefox代码开始，因为还有更多：

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

身体{显示：网格; }

文章 {
  网格区域：1/1；
  位置：中心；
  填充：.5em;
  颜色：HSLA（25，100％，55％，var（-a，1））;
  字体：900 21VW/ 1.25草书；
}

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

。根据 {
  变换：转换（ - 。25EM，-.25EM）;
  滤镜：棕褐色（1）色 - 旋酸盐（165DEG）对比度（1.5）Blur（var（-r，0））;
}

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

。灰色的 {
  z索引：3;
  过滤器：灰度（1）不透明度（.25）;
}

额外的z索引声明不会影响铬的结果，并且视觉#blur元素也不会影响。为了在Chrome中起作用的唯一缺少的是背景滤波器和.midl元素上的蒙版声明：

背景过滤器：模糊（5px）;
-webkit面具：线性级别（红色，红色）文本；

由于我们不希望在Firefox中应用背景过滤器，也不希望背景在Chrome中应用，因此我们使用@supports：

 $ r：5px;

/ *与以前相同 */

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

.midl {
  -a：0;
  z索引：2;
  / *需要在@supports内部重置，以免将其应用于Firefox */
  背景过滤器：Blur（$ r）;
  / * Firefox中无效的值，无论如何都没有应用，无需重置 */
  -webkit面具：线性级别（红色，红色）文本；
  
  @supports（背景：-moz -element（#blur））{ / * for Firefox * /
    背景：-moz -element（#blur）#fff;
    背景剪辑：文字；
    背景过滤器：无；
  }
}

这为我们提供了跨浏览器解决方案！

虽然在两个浏览器中的结果并不相同，但它仍然非常相似，对我来说足够了。

一个元素的解决方案呢？

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

首先，Firefox解决方案要求我们至少具有两个元素，因为我们使用一个元素（由其ID引用）作为另一个元素。

其次，虽然其余三层的第一个想法（无论如何，这是我们唯一需要的铬解决方案）是，其中一个可能是实际元素，而其他两个则可能是伪造的，但在这种特殊情况下，它并不那么简单。

对于Chrome解决方案，每个层都有至少一个特性，它也会不可逆地影响任何儿童及其可能拥有的任何伪造物。对于.base和.grey层，这就是过滤器属性。对于中间层，这是掩模属性。

因此，尽管拥有所有这些元素并不是很漂亮，但如果我们希望玻璃晶状体效应也可以在表情符号上起作用，看起来我们没有更好的解决方案。

如果我们只想对纯文本产生玻璃晶状体影响 - 图片中没有表情符号 - 只需两个元素即可实现，其中只需要一个元素才能用于镀铬溶液。另一个是#blur元素，我们只需要在Firefox中。

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

我们使用.TEXT元素的两个伪群来创建基础层（以::之前）和其他两个层的组合（带有::后面）。在这里有帮助的是，随着表情符号的图像，我们不需要过滤器：灰度（1），而是我们可以控制颜色值的饱和成分。

这两个伪堆在另一个伪造的顶部，底部的一个（::前）被相同的量偏移，并且具有与#Blur元素相同的颜色。该颜色值取决于一个标志 - -f，有助于我们控制饱和度和alpha。对于#blur元素和伪元素和:: pseudo（-f：1）之前，饱和度为100％，alpha为1。对于pseudo（-f：0）之后的:: ::饱和度为0％，而alpha为.25。

 $ r：5px;

％text {// #blur和两个.text pseudos使用
  -f：1;
  网格区域：1/1； //堆栈pseudos，绝对定位的#base忽略了
  填充：.5em;
  颜色：HSLA（345，calc（var（-f）*100％），55％，calc（.25 .75*var（-f）））;
  内容：attr（data-text）;
}

文章{字体：900 21VW/ 1.25草书}

#blur {
  位置：绝对；
  底部：100VH;
  过滤器：Blur（$ r）;
}

#blur，.text :: {
  变换：翻译（ - 。125EM，-.125EM）;
  @extend％text;
}

。文本 {
  显示：网格；
	
  ＆：：后 {
    -f：0;
    @extend％text;
    z索引：2;
    背景过滤器：Blur（$ r）;
    -webkit面具：线性级别（红色，红色）文本；

    @supports（背景：-moz -element（#blur））{
      背景：-moz -element（#blur）#fff;
      背景剪辑：文字；
      背景过滤器：无；
    }
  }
}

将跨浏览器解决方案应用于我们的用例

这里的好消息是我们的特殊用例，在该情况下，我们只对链接图标产生玻璃效果效果（不在整个链接上，包括文本）实际上简化了一点一点。

我们使用以下哈巴狗生成结构：

 - 让数据= {
 - 主：{ico：'？'，色调：200}， 
 - 注意：{iCo：'？？️'，色调：260}，， 
 - 活动：{ico：'？'，色调：320}， 
 - 发现：{ico：'？'，色调：30}
 - };
 - 令e = object.entries（data）;
 - 令n = e.length;

导航
   -  for（让i = 0; i <n i e .ico a.item .hue deg span.icon.tint span.icon.midl span.icon.grey><p>它产生了下面的HTML结构：</p>
<pre rel="HTML" data-line=""> 
  <a class="'item'href" hue>
    <span class="'图标tint'id">？</span>
    <span class="'图标色调'aria-hidded">？</span>
    <span class="'iCon" midl>？</span>
    <span class="'图标灰色'aria-hidded">？</span>
    家
  </a>
  

我们可能可以用伪造代替这些跨度的一部分，但是我觉得它更加一致，更容易，所以跨度三明治！

值得注意的一件事是，我们对每个项目都有一个不同的模糊图标层（因为每个项目都有自己的图标），因此我们将.Midl元素的背景设置为样式属性。如果我们添加或删除数据对象的条目（从而更改菜单项的数量），以这种方式进行操作可以避免对CSS文件进行任何更改。

当我们第一次CSS-ED The Nav Bar时，我们几乎具有相同的布局和风化的样式。唯一的区别是，现在我们在项目网格的顶部单元格中没有伪造。我们有跨度：

跨度{
  网格区域：1/1； / *将所有表情符号彼此堆叠在一起 */
  字体大小：4em; / *凸起表情符号大小 */
}

对于表情符号图标本身，我们也不需要从跨浏览器版本中进行许多更改，尽管有一些lttle。

首先，我们使用最初选择的转换和滤网链，而不是使用链接伪造而不是跨度。从那以后，我们也不需要颜色：hsla（）声明，因为我们只有表情符号在这里，所以只有alpha频道才是重要的。为.base和.grey层保留的默认值是1。因此，我们不在设置一个颜色值，而只有alpha，-a，通道很重要，我们将其更改为.midl层上的0，我们将其直接设置为颜色：透明。我们也只需要在Firefox情况下的.midl元素上设置背景色，因为我们已经在样式属性中设置了背景图像。这导致了解决方案的以下适应：

 .base { / * mono emoji版本 * /
  变换：translate（.375em，-.25em）旋转（22.5DEG）;
  滤镜：棕褐色（1）色调旋转（var（-hue））饱和（3）Blur（var（-r，0））;
}

.midl { / *中间，透明表情符号版本 * /
  颜色：透明； / *所以看不到 */
  背景过滤器：模糊（5px）;
  -webkit mask：线性级别（红色0 0）文本;
  
  @supports（背景：-moz -element（#b））{
    背景色：#FFF;
    背景剪辑：文字；
    背景过滤器：无；
  }
}

就是这样 - 我们对此NAV栏具有不错的图标玻璃效果！

只有一件事要照顾 - 我们一直不希望这种效果；仅在：悬停或：焦点状态。因此，我们将使用一个标志，即正常状态为0，在：悬停或：焦点状态中为1，以控制不透明度并转换.base跨度的不透明度。这是我在早期文章中详细介绍的一种技术。

 $ t：.3s;

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

。根据 {
  转换： 
    翻译（calc（var（-hl）*。375EM），calc（var（-hl）* - 。25EM）） 
    旋转（calc（var（-hl）*22.5DEG））;
  不透明度：var（-hl）;
  过渡：变换$ t，不透明度$ t;
}

当图标悬停或聚焦时，可以在下面的交互式演示中看到该结果。

使用SVG图标怎么样？

在完成CSS表情符号版本所需的一切之后，我自然而然地问自己这个问题。普通的SVG方式是否比跨度三明治更有意义，这不是很简单吗？好吧，虽然这确实更有意义，尤其是因为我们没有表情符号，但可悲的是代码不少，而且也不是更简单。

但是，我们将在另一篇文章中详细介绍！

以上是CSS中的图标玻璃塑料效应的详细内容。更多信息请关注PHP中文网其他相关文章！