CSS中的filter(滤镜)属性

共计1967字,阅读大约7分钟。

前言

一直拿它做网页毛玻璃效果,最近才发现它的强大。

本篇随着开发使用慢慢补充效果实例

属性

  1. grayscale灰度
  2. sepia褐色(有种复古的旧照片感觉)
  3. saturate饱和度
  4. hue-rotate色相旋转
  5. invert反色
  6. opacity透明度
  7. brightness亮度
  8. contrast对比度
  9. blur模糊
  10. drop-shadow阴影

实例

一、hue-rotate 色相旋转

当值为零时,色相不在旋转,色彩不会覆盖原图。

样例的ICO图片是透明,可以看出有色彩覆盖。

如果你细心发现,这篇文章旁边的头像就是这个效果的简洁版。

图片[1] | Web Stack | CSS中的filter(滤镜)属性 | 一个栈
样式
<!DOCTYPE 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">
  <link rel="stylesheet" href="./style.css">
  <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
  <title>发光波纹按钮</title>
</head>
<body>

  <a href="#" class="pulse">
    <ion-icon name="finger-print-outline"></ion-icon>
  </a>
  <a href="#" class="pulse" style="filter: hue-rotate(120deg);">
    <ion-icon name="ribbon-outline"></ion-icon>
  </a>
  <a href="#" class="pulse" style="filter: grayscale()">
    <ion-icon name="megaphone-outline"></ion-icon>
  </a>

</body>
</html>
body{
  height: 100vh;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9rem;
  background: #333;
}

.pulse ion-icon{
  font-size: 35px;
  position: absolute;
  padding: 7px;
}
.pulse{
  width: 3rem;
  color: #fff;
  transition: all .5s ease;
  background: #35D1E6;
}
.pulse,
.pulse::before,
.pulse::after{
  content: "";
  display: grid;
  grid-area: 1/1;
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: 0 0 0 0 #35D1E633;
  animation: pulsing 3s linear infinite var(--s,0s);
}
.pulse::before{
  --s:1s;
}
.pulse::after{
  --s:2s;
}
.pulse:hover{
  background: #35D1E633;
  color: #ffffff99;
}
@keyframes pulsing {
  to{
    box-shadow: 0 0 0 6rem #0000;
  }
}

二、blur 模糊效果

这个属性不在赘述,因为柒拾柒雅舍大量运用了模糊效果,比如侧边栏板块和你现在看的文章板块。

这里提一下 想要一个好的模糊效果,建议先给div上一个半透明颜色。

三、invert 反色

图片[2] | Web Stack | CSS中的filter(滤镜)属性 | 一个栈
BBC滤镜既视感1

四、sepia 复古褐色

图片[3] | Web Stack | CSS中的filter(滤镜)属性 | 一个栈
BBC滤镜既视感2

五、未完待续

温馨提示:本文最后更新于2022-07-12 14:29:37,某些文章具有时效性,若有错误或已失效,请在下方留言或联系雅舍站长
© 版权声明
THE END
有所帮助就支持一下吧
点赞15当赏 分享
箴言区 抢沙发
头像
达瓦里希请发言...
提交
头像

昵称

取消
昵称表情代码图片