CSS滤镜

滤镜

参考文章： CSS3 filter(滤镜) 属性

基本使用

这里就学习一下常用的函数，以后用到其他的再补充。

• none： 默认值，没有效果
• blur(px) ：给图像设置高斯模糊，值越大越模糊，默认值0，参数可以是css长度值，不支持百分比
• contrast(%) ：调整图像的对比度。值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。若没有设置值，默认是1。

实例

小球穿梭动画

地址： 小球穿梭放大loading动画

还是没太理解，有没有大佬解释一下😂

简单例子

上面那个例子有点难理解，自己写了个简单例子如下

初始代码

<div class="main">
     <div class="first"></div>
     <div class="second"></div>
 </div>

 .main{
      width: 100%;
      height: 100%;
      background: black;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;

      //添加滤镜
     // filter: blur(4px) contrast(8);
  }

  .first{
      width: 50px;
      height: 50px;
      background: #ffffff;
      border-radius: 50%;
      position: absolute;
  }

  .second{
      width: 30px;
      height: 30px;
      background: red;
      border-radius: 50%;
      position: absolute;
      left: 140px;
  }

没加滤镜是是这样的

添加滤镜后

添加动画
在上面的基础上，可以给红色小球添加一个动画

.main {
  width: 100%;
  height: 100%;
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;

  //添加滤镜
  filter: blur(4px) contrast(8);
}

.first {
  width: 50px;
  height: 50px;
  background: #ffffff;
  border-radius: 50%;
  position: absolute;
}

.second {
  width: 30px;
  height: 30px;
  background: red;
  border-radius: 50%;
  position: absolute;
  left: 100px;
  animation: move 5s infinite linear;
}

@keyframes move {
  0% {
    transform: translateX(20px);
    opacity: 1;
  }

  25% {
    transform: translateX(70px);
    opacity: 0;
  }

  50% {
    transform: translateX(130px);
    opacity: 1;
  }

  75% {
    transform: translateX(70px);
    opacity: 0;
  }

  100% {
    transform: translateX(20px);
    opacity: 1;
  }
}

用动态录制的效果有点问题，实际效果还是可以的

补充

backdrop-filter

最近看大佬的文章，发现还有一个backdrop-filter，两者的区别如下：

• filter：该属性将模糊或颜色偏移等图形效果应用于元素。
• backdrop-filter：该属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。 它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。

注意两者之间的差异，filter 是作用于元素本身，而 backdrop-filter 是作用于元素背后的区域所覆盖的所有元素

推荐文章

backdrop-filter,让你的网站熠熠生”毛’

实例

<div class="bg">
    <div>Normal</div>
    <div class="g-filter">filter</div>
    <div class="g-backdrop-filter">backdrop-filter</div>
</div>

.bg {
    background: url(image.png);
    
    & > div {
        width: 300px;
        height: 200px;
        background: rgba(255, 255, 255, .7);
    }
    .g-filter {
        filter: blur(6px);
    }
    .g-backdrop-filter {
        backdrop-filter: blur(6px);
    }
}

实例
这个属性可以用来实现毛玻璃效果

<div class="main">
     <img src="../image/11.webp" class="image" />
 </div>

.main {
  width: 100%;
  height: 100%;
  //图片居中
  display: flex;
  justify-content: center;
  align-items: center;
  //背景图片
  background-image: url('../image/11.webp');

   &::before{
        position: absolute;
        content: '';
        width: 380px;
        height: 280px;
        backdrop-filter: blur(10px);
        z-index: 0;
    }

  .image {
    width: 60%;
    height: 40%;
    position: relative;
    z-index: 1;
  }
}