滤镜

参考文章： 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;
  }
}

0 条评论