使用backdrop-filter实现elementui官网的模糊滤镜效果的和毛玻璃效果

最新推荐文章于 2024-03-22 14:35:54 发布

未成年梦想

最新推荐文章于 2024-03-22 14:35:54 发布

阅读量1.8k

点赞数 10

本文链接：https://blog.csdn.net/u014582342/article/details/128031345

版权

javascript 同时被 3 个专栏收录

89 篇文章 2 订阅

订阅专栏

HTML

76 篇文章 2 订阅

订阅专栏

css

20 篇文章 0 订阅

订阅专栏

前置

element-ui官网有一个属性很好看,可以看到,当滚动的时候,文字会被显示白色带阴影背景

你可能有点印象,因为公交车的时候也是类似于这种效果

他们是怎么做的呢?我看到源码使用到了
- backdrop-filter
- background-size
- background-image
- 就实现了,很少的属性,达到了不错的效果,值得学习

element-ui开始

了解backdrop-filter和filter属性

backdrop-filter属性
- 可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。
- 说通俗点就是通过设置A上面的B元素来达到对A模糊或颜色偏移的效果
filter属性
- 将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染。
二者区别
- backdrop-filter作用于元素的背景(不直接作用于元素,而是通过另外一层元素来达到效果)
  - 作用于元素背后的所有元素
- filter直接设置在元素身上
  - 作用于当前元素，并且它的后代元素也会继承这个属性
二者支持的滤镜对比(其实filter可以用的,backdrop-filter都可以用)

filter	backdrop-filter	备注
url	√	√	获取指向SVG过滤器的URI
blur(模糊)	√	√	高斯模糊滤镜
brightness(亮度)	√	√	图像明亮度的滤镜
contrast(对比度)	√	√	图像的对比度滤镜
drop-shadow(阴影)	√	√	图像的阴影滤镜
grayscale(灰度)	√	√	图像灰度滤镜
hue-rotate(色相旋转)	√	√	图像色相滤镜
invert(反色)	√	√	反转滤镜
opacity(透明度)	√	√	透明度滤镜
sepia	√	√	深褐色滤镜
saturate(褐色)	√	√	图像饱和度滤镜

element-ui头部栏就是通过设置blur和saturate属性来达到的

一步步分解

找到官网,复制粘贴代码(以将变量全部转化为具体的值)

.navbar-wrapper {
    position: relative;
    border-bottom: 1px solid #dcdfe6;
    height: 55px;
    background-image: radial-gradient(transparent 1px,#ffffff 1px);
    background-size: 4px 4px;
    backdrop-filter: saturate(50%) blur(4px);
    top: 0;
}

我们重点关注下面几个属性
- background-image: radial-gradient(transparent 1px,#ffffff 1px);
- background-size: 4px 4px;
- backdrop-filter: saturate(50%) blur(4px);

为什么设置background-size和background-image

background-size:设置背景图片大小,这个不用多说
background-image设置背景图片的大小
所以我们如果只设置这二个值会发生什么?为了便于观看,我将background-image换为了一张具体图片,便于查看

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      .wrapper {
        width: 500px;
        height: 300px;
        background: url("../image/26.jpg")
      }
      .content {
        width: 300px;
        height: 150px;
        /* background-image: radial-gradient(transparent 1px, #ffffff 1px); */
        /* background-size: 4px 4px; */
        /* backdrop-filter: saturate(50%) blur(4px); */
        background-image: url('../image/27.jpg');
        background-size: 4px 4px;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <div class="content"></div>
    </div>
  </body>
</html>

初次的时候你可能看到这个效果

是不是觉得这个点点是什么,我们放大看看

原来是一个一个的背景图,因为我们设置了background-size尺寸,然后默认背景会铺满全部的,所以就导致这效果

现在我们讲background-size和background-image换为element-ui上的属性,看看会发生什么

.content {
width: 300px;
height: 150px;

/* 换为element-ui官网的 */
background-image: radial-gradient(transparent 1px, #ffffff 1px);
background-size: 4px 4px;
    
/*backdrop-filter:saturate(50%) blur(4px); */
/* background-image: url('../image/27.jpg');
background-size: 4px 4px; */
}

可以看到,只不过背景被替换为了一个一个的小渐变圆点
- @radial-gradient()

最终

我们最后添加上backdrop-filter样式

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      .wrapper {
        width: 500px;
        height: 300px;
        background: url("../image/26.jpg")
      }
      .content {
        width: 300px;
        height: 150px;
        
        /* 换为element-ui官网的 */
        background-image: radial-gradient(transparent 1px, #ffffff 1px);
        background-size: 4px 4px;
        backdrop-filter:saturate(50%) blur(4px);
        
        /* background-image: url('../image/27.jpg');
          background-size: 4px 4px; */
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <div class="content"></div>
    </div>
  </body>
</html>

你可以对比看看,添加backdrop-filter在这里也就多了一层朦胧的效果
你也可以扩大一点,使得A身上的B元素和A一样宽度,就成了下面这种效果

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      .wrapper {
        width: 500px;
        height: 300px;
        background: url("../image/26.jpg")
      }
      .content {
        width: 500px;
        height: 300px;
        /* 换为element-ui官网的 */
        background-image: radial-gradient(transparent 1px, #ffffff 1px);
        background-size: 4px 4px;
        backdrop-filter:saturate(50%) blur(4px);
        
        /* background-image: url('../image/27.jpg');
          background-size: 4px 4px; */
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <div class="content"></div>
    </div>
  </body>
</html>

毛玻璃效果

可以看到,下面这张gif实现了一个很漂亮的gif,那么做的呢?也是通过backdrop-filter来实现的,由于找不到这张图就源代码,就自己写了下~
在线地址@地址

最终完成效果

先编写一个静态页面

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
      background-color: #000000;
    }
    /* 外层-实现居中 */
    #wrapper{
      width: 40%;
      height: 40%;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
    }
    /* 圆点形状 */
    .dot{
      width: 120px;
      height: 120px;
      border-radius: 50%;
      background-color: #00ffc6;
    }
    .dot-wrapper{
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .dot-wrapper div:nth-of-type(1){
      animation: dotLeft linear infinite 5s;
    }
    .dot-wrapper div:nth-of-type(2){
      align-self: flex-end;
    }
    /* 模糊背景div */
    .mask-wrapper{
      width: 90%;
      height: 70%;
      position: absolute;
      bottom: 0;
      top: 0;
      left: 0;
      right: 0;
      margin: auto;
      border-radius: 10px;
      background-color: rgba(255, 255, 255, .1);/* 透明背景 */
      backdrop-filter: blur(5px);
      box-shadow: -1px 0px rgba(255, 255, 255, .4);
      color: #e9e9e9;
      font-size: 26px;
    }
  </style>
</head>
<body>
  <div id="wrapper">
    <!-- 圆点的 -->
    <div class="dot-wrapper">
      <div class="dot"></div>
      <div class="dot"></div>
    </div>
    <!-- 模糊背景 -->
    <div class="mask-wrapper">
      <div style="background-color:transparent;height: 100%;text-align: center;transform: translateY(40%);">
        梦洁小站
      </div>
    </div>
  </div>
</body>
</html>

添加一点动画

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
      background-color: #000000;
    }
    /* 外层-实现居中 */
    #wrapper{
      width: 40%;
      height: 40%;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
    }
    /* 圆点形状 */
    .dot{
      width: 120px;
      height: 120px;
      border-radius: 50%;
      background-color: #00ffc6;
    }
    .dot-wrapper{
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    @keyframes dotLeft {
      0%{
        transform: translate(0,0);
      }
      50%{
        transform: translate(16px,-16px);
      }
      100%{
        transform: translate(0,0);
      }
    }
    .dot-wrapper div:nth-of-type(1){
      animation: dotLeft linear infinite 5s;
    }
    @keyframes dotRight {
      0%{
        transform: translate(0,0);
      }
      50%{
        transform: translate(-20px,20px);
      }
      100%{
        transform: translate(0,0);
      }
    }
    .dot-wrapper div:nth-of-type(2){
      align-self: flex-end;
      animation: dotRight linear infinite 5s;
    }
    @keyframes maskAni{
      0%{
        transform: translate(0,0);
      }
      25%{
        transform: translate(-4px,6px);
      }
      50%{
        transform: translate(4px,0);
      }
      100%{
        transform: translate(0,0);
      }
    }
    /* 模糊背景div */
    .mask-wrapper{
      width: 90%;
      height: 70%;
      position: absolute;
      bottom: 0;
      top: 0;
      left: 0;
      right: 0;
      margin: auto;
      border-radius: 10px;
      background-color: rgba(255, 255, 255, .1);/* 透明背景 */
      backdrop-filter: blur(5px);
      box-shadow: -1px 0px rgba(255, 255, 255, .4);
      color: #e9e9e9;
      font-size: 26px;
      animation: maskAni linear infinite 5s;
    }
  </style>
</head>
<body>
  <div id="wrapper">
    <!-- 圆点的 -->
    <div class="dot-wrapper">
      <div class="dot"></div>
      <div class="dot"></div>
    </div>
    <!-- 模糊背景 -->
    <div class="mask-wrapper">
      <div style="background-color:transparent;height: 100%;text-align: center;transform: translateY(40%);">
        梦洁小站
      </div>
    </div>
  </div>
</body>
</html>

完成效果

未成年梦想

关注

10
点赞
踩
18

收藏

觉得还不错? 一键收藏
打赏
4
评论
使用backdrop-filter实现elementui官网的模糊滤镜效果的和毛玻璃效果

backdrop-filter属性filter属性二者区别二者支持的滤镜对比(其实filter可以用的,backdrop-filter都可以用)我们重点关注下面几个属性为什么设置background-size和background-image:设置背景图片大小,这个不用多说设置背景图片的大小所以我们如果只设置这二个值会发生什么?为了便于观看,我将换为了一张具体图片,便于查看初次的时候你可能看到这个效果是不是觉得这个点点是什么,我们放大看看可以看到,只不过背景被替换为了一个一个
复制链接

扫一扫