(⊙ˍ⊙)哦? ElementPlus 官网导航栏有点意思，来看看咋实现的

前端嘟老板
8,273 阅读9分钟

前言

哈喽大家好！我是嘟老板，由于项目需要，最近访问 ElementPlus 官网比较频繁，偶然间发现顶部导航栏挺有意思，类似模糊半透明的像素效果，感兴趣的小伙伴可以去瞅瞅。今天我们来实现下类似效果，看看涉及到哪些 CSS 的奇妙用法。

阅读本文您将收获：

  1. 实现 ElementPlus 官网导航栏同款样式。
  2. 了解实现过程中应用的 CSS 属性详细用法。
  3. 等等...

实现过程

ElementPlus 导航栏效果如下：

image.png

接下来，我们基于 Vue3 + Scss，逐步复刻，不过无需关注框架，重点在 CSS。

页面结构

先搭建页面结构，大致包含以下内容：

  • container：容器元素，包裹 header 和 content 元素。
  • header: 顶部栏，absolute 布局，相对于 container 元素，置顶。
  • content: 内容元素，宽高等同 container，可滚动。

布局示意简图：

image.png

以下是 Vue 页面代码：

<template>
  <div class="css-backdrop-filter">
    <h1>仿 ElementPlus 官网导航栏模糊背景效果</h1>
    <div class="container">
      <div class="header" />
      <div class="content">
        我是正文内容我是正文内容我是正文内容我是正文内容我是正文内容我是正文内容我是正文内容我是正文内容我是正文内容我是正文内容我是正文内容我是正文内容我是正文内容我是正文内容我是正文内容我是正文内容我是正文内容我是正文内容我是正文内容我是正文内容我是正文内容我是正文内容我是正文内容我是正文内容我是正文内容我是正文内容我是正文内容我是正文内容我是正文内容我是正文内容我是正文内容我是正文内容我是正文内容我是正文内容
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
h1 {
  text-align: center;
}

.container {
  width: 500px;
  height: 300px;
  position: relative;
  overflow: auto;
  margin: 0 auto;
  border: 1px solid var(--el-color-primary);

  .header {
    position: absolute;
    width: 100%;
    height: 100px;
  }

  .content {
    width: 100%;
    height: 100%;
    font-size: 30px;
  }
}
</style>

效果如截图所示，由于没有给 header 设置背景，background-color 默认 transport（透明），所以目前看不到 header 元素。

image.png

模糊滤镜

我们可以通过给 header 元素后面的区域添加滤镜，实现模糊效果。

可以使用 backdrop-filter 属性，添加模糊滤镜。

header 类选择器添加一行 CSS：backdrop-filter: blur(4px);。

.header {
    position: absolute;
    width: 100%;
    height: 100px;
    backdrop-filter: blur(4px);
}

这里借助滤镜函数 blur 实现了模糊效果。

backdrop-filter 属性还可以接受多个滤镜函数，以空格分隔，实现更丰富的视觉效果。比如 ElementPlus 就用了饱和度函数 - saturate(50%)，不过本人审美有限，就不多做处理了，简单一点。

目前效果如下：

image.png

类像素效果

现在该实现类像素效果了，我们先分析下样式:

image.png

结合上图可以发现，整个背景可以拆分成无数个重复的小正方形，其中每个正方形的中心有个透明的圆点，其余部分为黑色。

假设每个正方形区域都是一张图片，实现类似的效果至少要用到以下 CSS 属性：

background-repeat 和 background-size 设置都好说，重点在于 background-image 的图片怎么整，可以简单粗暴的设计一个图片放上去，但很显然，我们不会这样做。

这就要用到径向渐变 - radial-gradient了，径向渐变可以创建从中心点向外辐射的渐变效果，可以是圆形或椭圆形，而且 radial-gradient() 函数的结果是一种特殊的 <image> 类型，正好可以作 background-image 的值。

.header {
    position: absolute;
    width: 100%;
    height: 100px;
    background-image: radial-gradient(transparent 1px, black 1px);
    background-size: 4px 4px;
    backdrop-filter: saturate(50%) blur(4px);
}

header 类选择器新增两行代码：

background-image: radial-gradient(transparent 1px, black 1px);
background-size: 4px 4px;

其中 radial-gradient(transparent 1px, black 1px) 会创建一个特殊的图片对象，中心是一个直径 2px 的透明圆，其余部分为黑色。

效果如下：

image.png

效果已基本还原，若不满足你的预期，可适当调整对应属性。

CSS 属性探究

接下来我们仔细聊聊 radial-gradient 和 backdrop-filter 两个属性。

径向渐变 - radial-gradient

介绍

radial-gradient 是一个函数，用于创建一个由中心向外辐射的渐变图像，可以包含两种或多种渐进过度的颜色。渐变的形状可以是圆形或椭圆形，取决于函数中指定的参数。

径向渐变没有内在尺寸，它的显示效果完全取决于其被应用到的元素的大小，会根据容器的尺寸自动调整渐变的尺寸。

径向渐变属于图像类型，radial-gradient 函数的返回结果是一种特殊的 <image> 类型，因此只能赋值给接受图像类型的CSS属性上，如 background-image，用于只接受颜色类型的属性时不生效，如 background-color。

语法

radial-gradient 函数接受以下参数：

  • radial-shape：渐变形状，可选圆形（circle） 或 椭圆形（ellipse），默认 ellipse。
  • radial-size：渐变形状的大小，可直接指定或使用关键字，默认最远角（farthest-corner）。
    • 直接指定：
      • 若 radial-shape 为 圆形（circle），可指定一个<length> 值，表示圆的半径。
      • 若 radial-shape 为 椭圆形（ellipse），可指定两个 <length-percentage> 值，分别表示椭圆的水平半径和垂直半径。其中，百分比值相对于渐变框在相应维度（水平或垂直）上的大小来计算。
    • 关键字：

      • closest-side：若渐变的结束形状是圆形，则将与容器距离渐变中心点最近的边相切；若结束形状是椭圆形，则会与距离渐变中心点最近的垂直/水平边相切。

        image.png

      • closest-corner：渐变的结束形状会与容器距离渐变中心点最近的一个角相交。

        image.png

      • farthest-side：若渐变的结束形状是圆形，则会与容器距离渐变中心点最远的边相切；若结束形状是椭圆形，则会与距离渐变中心点最远的垂直/水平边相切。

        image.png

      • farthest-corner：默认值，渐变的结束形状会与容器距离渐变中心点最远的一个角相交。

        image.png

  • position：渐变的位置，默认 center。
  • color-stop-list：色标列表，设置渐变的颜色值和对应的位置，包含一组或多组 [色标] [色标位置]，每组之间以逗号分隔，例如 transparent 50px, black 100%。色标位置可以设置1个或2个值，其中2个值表示在两个位置上声明两个颜色相同的色标。

示例

基本了解了 radial-gradient 参数，来几个示例感受一下径向渐变的魅力。

简单渐变

渐变中心点居中，颜色从蓝到透明再到红。

.radial-gradient {
  background-image: radial-gradient(blue 0%, transparent 20%, red 40%);
}

image.png

非居中渐变

渐变中心点在坐标 x: 40px，y: 40px 的位置，颜色从蓝到红。

.radial-gradient {
  background-image: radial-gradient(
    farthest-corner at 40px 40px,
    blue 0%,
    red 100%
  );
}

image.png

设置渐变尺寸

中心点在 x: 25%，y: 75% 位置，渐变尺寸设为最近边 closest-side，颜色从蓝到红再到黄。

.radial-gradient {
  background-image: radial-gradient(
    circle closest-side at 25% 75%,
    blue 10%,
    red 50%,
    yellow
  );
}

image.png

背景滤镜 - backdrop-filter

介绍

backdrop-filter 属性可以给元素后面的区域添加视觉效果，如模糊效果或颜色偏移。其作用范围是元素后面的所有内容，包括其他元素。但前提是元素本身或者它的背景要有一定的透明度，若元素完全不透明，背后元素的效果无法透过元素显示出来。

语法

backdrop-filter 属性可赋以下两种值：

  • none：没有滤镜

  • filter-function-list：以空格分隔的滤镜函数 或要应用到背景上的 SVG 滤镜。

    介绍几种常用的滤镜函数：

    • blur()：模糊图像，接受一个长度值作为参数，表示模糊的半径，如 blur(4px)，参数值越大，图像越模糊。
    • opacity()：改变图像透明度，接受一个数字或百分比作为参数，表示转化的数值，0% 表示完全透明，100% 表示保留原图像的效果。
    • saturate()：超饱和或去饱和，接受一个数字或百分比作为参数，表示转化的数值，0% 的值是完全不饱和，100% 表示保留原图像的效果。
    • brightness()：改变亮度，接受一个数字或百分比作为参数，若参数值小于100%，图像将变暗；若参数值大于100%，图像将变亮。
    • grayscale()：灰度转换，接受一个数字或百分比作为参数，表示转换值，转换值为0%时，保留原图像的效果；转换值为100%时，图像将完全转换为灰度，所有颜色信息将被去除。
    • ...

结语

本文重点介绍了仿 ElementPlus 官网导航栏效果的实现过程，详细讲述了应用到的 CSS 属性，如径向渐变、backdrop-filter 等，旨在帮助同学们加深对于相关 CSS 属性的了解及应用理解。希望对您有所帮助！相关代码已上传至 GitHub，欢迎 star。

如您对文章内容有任何疑问或想深入讨论，欢迎评论区留下您的问题和见解。

技术简而不凡，创新生生不息。我是 嘟老板，咱们下期再会。

往期干货

avatar
文章
阅读
粉丝