CSS3导航栏和磨砂玻璃效果学习教程

导航栏对于任何被围攻的网站来说都不陌生，但磨砂玻璃可就不常见了。简单地说，毛玻璃可以通过适当的方法使图像或背景变得模糊。该产品对用户的眼睛非常有效。

本节主题：使用CSS3制作类似下图的导航栏和磨砂玻璃效果。

导航栏呈梯形。

背景区域的冻结玻璃效果。

导航栏和毛玻璃效果分享在一篇文章里是有原因的。因为这两个成果的实现离不开一个重要的理念。

用文字描述一下：设置父元素的位置：relative，其伪元素（之后或之前）设置其位置：absolute，设置top、bottom、left、right为0，伪元素被占用。整个元素空间，最后设置 z-index 将背景放置在父元素后面。

特殊代码如下。

.container {
  position: relative;
}

.container::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
　z-index: -1;
}

这是什么意思？别担心，我将在接下来的两个实际示例中解释这段代码的含义。

文本结构：

1。导航栏

　　1.1：平行四边形导航栏

　　1.2：梯形导航栏

2。磨砂玻璃效果

3。结论

4.参考文章

1.导航栏

1.1：平行四边形导航栏

制作平行四边形的思路：为了生成平行四边形，我们使用CSS3 2D变形的skew()倾斜属性，因为我们只在水平方向倾斜，我们使用skew()时需要注意第二个参数为0，否则x和y方向会倾斜，这不是我们想要的结果。或者使用 skewX()。具体代码实现如下。

• 博客园
• 首页
• 新文
• 联系方式
• 订阅
• 在重要部分在这些大代码中。构造平行四边形时，需要考虑以下几点：

  1。设置相对于元素li，然后设置伪元素四个方向的absolute和LRBT的位置。原因是我们需要设置与li元素相关的伪元素，并让伪元素填充整个li元素的空间，从而使为伪元素设置的背景覆盖整个li元素。最重要的是，在伪元素上设置 skewX() 只会倾斜伪元素，而不会倾斜父元素的文本。

  2。设置 z 索引：-1。如果您没有在此处将 z-index 值设置为负值，您将看不到 li 元素中的文本。因为absolute会增加自身元素的level，所以伪元素的z-index应该是-1，所以level位于li元素之后。

  3。使用 skewX() 函数将伪元素（不是 li 元素）旋转 25 度。请务必键入字符后缀以避免浏览器兼容性问题。

  4。当伪元素和伪类一起使用时，必须先考虑伪类，然后考虑伪元素。如果像这样设置 li::after:hover 是没有效果的。正确的写法是：li:hover::after。

  样本结果如下。

  

  （旋转状态）

  1.2：楼梯导航栏

  楼梯导航栏实现思路：导航楼梯使用三个CSS3 3D变换属性：view（），rotateX（）和change - background。

  perspective() 用于设置用户与元素 3D 空间的 Z 平面之间的距离。值越小，用户距离3D空间中的Z平面越近，视觉效果会越明显；反之，该值越大，用户距离3D空间的Z平面越近。 Z空间越远，视觉效果越小。

  rateX() 用于在 3D 空间中旋转 x 轴。你可以想象一下，你在高中学到的直角空间坐标系和旋转x轴是一样的。

  transform-origin 用于定义元素旋转中心点的位置。

  特殊属性的使用可以查看相关文档，这里不再讨论。特定的代码实现如下：

  • 博客garden
  • homePage
  • newnewessays
  • contact
  • subscriber

    　　在上面的代码中，仅显示重要的部分。注意以下问题：

    1。前四个问题在概念上与制作平行四边形导航栏类似。特别是，对伪元素设置perspective()和rotateX()，只会对伪元素进行3D处理并在空间中旋转X轴，不会对父元素文本进行处理。文本仍将按照默认结果显示。如果在父元素上设置perspective()和rotateX()，它们将影响后续的子元素。也就是说，所有子元素（包括文本）都将被旋转。文本是滚动的，导致阅读困难。这个逻辑应该不难理解。

    2。用于控制梯形向左倾斜还是向右倾斜的属性是变换的原点。梯形不倾斜：底部。左倾：左下；向右倾斜：右下角。

    示例结果如下：

    

    （反转状态）

    （向左倾斜）

    （向右倾斜）

    2.冷玻璃应用 ❀：冷玻璃使用 CSS3 中的背景-size，过滤器装配规则。

    background-size 属性用于指定背景图像的大小。标签的功能之一是扩展背景图像以适合整个容器。不过使用该功能的要求是需要设置足够大的图像，否则背景图像会失真。

    fiter滤波器中的blur()用于对图像进行高斯模糊处理。它只接受一个值。值越大，模糊效果越明显。

    在张新旭老师的冷玻璃应用文章中（参考文章中会提供链接），给出了冷玻璃应用的效果，但是有一个小问题：如果我们添加一篇背景图片。 、dim() 会将文本一起变暗，这会导致用户体验不佳。当然，在背景图不需要文字的情况下，张鑫旭大师的方案还是不错的。

    特殊代码如下：

    我的名字是Uncle-Keith！

    body {
      background: url("../images/family-one.jpg") no-repeat center center fixed;
      -moz-background-size: cover;
      -o-background-size: cover;
      -webkit-background-size: cover;
      background-size: cover;
    }
    
    .rascal {
      position: relative;
      background: rgba(255, 255, 255, 0.3);
      overflow: hidden;
    }
    .rascal::after {
      z-index: -1;
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: url("../images/family-one.jpg") no-repeat center center fixed;
      -moz-background-size: cover;
      -o-background-size: cover;
      -webkit-background-size: cover;
      background-size: cover;
      -webkit-filter: blur(20px);
      filter: blur(20px);
      margin: -30px;
    }

    在上面的代码中，有几个问题需要注意：

    1。同样，这里使用了相对父元素和绝对伪元素，并设置了TBLR和z-index。使用该方法的关键是对伪元素进行遮蔽(observation)，这样不会影响父元素中文本的效果。

    2。您需要为背景图像添加背景尺寸属性。这是为了使图像适合屏幕的整个宽度。此外，该属性需要添加两次。一种是在 body 组件上，另一种是在伪组件上。将其添加到伪元素的原因是我们希望blur()能够处理与背景图像相同的模糊图像。如果你在伪组件中给背景设置了继承，那么它只会继承父容器，而流氓容器是一个白色背景的容器，所以结果和我们的不一样。下图展示了使用background:inherit;的磨砂玻璃效果。以伪单位表示。

    这不是我们要找的磨砂玻璃效果。所以伪元素的背景纹理应该与背景图像相同。

    3。为伪元素设置正确的背景后，我们需要使用负边缘值来柔化边缘。

    如你所见，磨砂玻璃上的blur()效果有点过分了。具有模糊效果的圆圈延伸到容器之外。溢出设置：对父元素隐藏可以剪切溢出部分。最后一个例子如下。

    最终结果看起来很自然。

    3。结论

    这三个例子有一个共同的概念：将偏置、视图、旋转和CSS3效果过滤器设置为伪元素，并将相对父元素设置为伪元素。 ，所以伪元素的宽度和高度填充了父元素的整个区域，最后伪元素的z-index被设置为负值。这样做的好处是不会影响父容器中的文本。

    特殊代码如下：

    .container {
      position: relative;
    }
    
    .container::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
    　z-index: -1;
    }