前言

我們?cè)谔幚韴D片時(shí)，經(jīng)常使用的一個(gè)功能就是濾鏡，它能使一張圖像呈現(xiàn)各種不同的視覺效果。

在 CSS 中，也有一個(gè)filter屬性，讓我們能用 CSS 代碼為元素指定各種濾鏡效果，比如模糊、灰度、明暗度、顏色偏移等。

CSS filter的基礎(chǔ)使用非常簡(jiǎn)單，CSS 標(biāo)準(zhǔn)里包含了一些已實(shí)現(xiàn)預(yù)定義效果的函數(shù)（下面blur、brightness、contrast等），我們可以通過指定這些函數(shù)的值來實(shí)現(xiàn)想要的效果：

/* 使用單個(gè)濾鏡 （如果傳入的參數(shù)是百分?jǐn)?shù)，那么也可以傳入對(duì)應(yīng)的小數(shù)：40% --> 0.4）*/
filter: blur(5px);
filter: brightness(40%);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);

/* 使用多個(gè)濾鏡 */
filter: contrast(175%) brightness(3%);

/* 不使用任何濾鏡 */
filter: none;

官方demo：MDN

濾鏡在日常開發(fā)中是很常見的，比如使用drop-shadow給不規(guī)則形狀添加陰影；使用blur來實(shí)現(xiàn)背景模糊，以及毛玻璃效果等。

下面我們將進(jìn)一步使用CSS filter實(shí)現(xiàn)一些動(dòng)畫效果，讓網(wǎng)站交互更加酷炫，同時(shí)也加深對(duì)CSS filter的理解。一起開始吧！

（下面要使用到的動(dòng)畫和偽類知識(shí)，在《CSS的N個(gè)編碼技巧》中都有詳細(xì)的介紹，這里就不重復(fù)了，有需要的朋友可以前往查看哦。）

電影效果

濾鏡中的brightness用于調(diào)整圖像的明暗度。默認(rèn)值是1；小于1時(shí)圖像變暗，為0時(shí)顯示為全黑圖像；大于1時(shí)圖像顯示比原圖更明亮。

我們可以通過調(diào)整 背景圖的明暗度 和 文字的透明度 ，來模擬電影謝幕的效果。

<div class="container">
  <div class="pic"></div>
  <div class="text">
    <p>如果生活中有什么使你感到快樂，那就去做吧</p>
    <br>
    <p>不要管別人說什么</p>
  </div>
</div>

.pic{
    height: 100%;
    width: 100%;
    position: absolute;
    background: url('./images/movie.webp') no-repeat;
    background-size: cover;
    animation: fade-away 2.5s linear forwards;    //forwards當(dāng)動(dòng)畫完成后，保持最后一幀的狀態(tài)
}
.text{
    position: absolute;
    line-height: 55px;
    color: #fff;
    font-size: 36px;
    text-align: center;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    opacity: 0;
    animation: show 2s cubic-bezier(.74,-0.1,.86,.83) forwards;
}
    
@keyframes fade-away {    //背景圖的明暗度動(dòng)畫
    30%{
        filter: brightness(1);
    }
    100%{
        filter: brightness(0);
    }
}
@keyframes show{         //文字的透明度動(dòng)畫
    20%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

模糊效果

在下面的單詞卡片中，當(dāng)鼠標(biāo)hover到某一張卡片上時(shí)，其他卡片背景模糊，使用戶焦點(diǎn)集中到當(dāng)前卡片。

html結(jié)構(gòu)：

<ul class="cards">
    <li class="card">
      <p class="title">Flower</p>
      <p class="content">The flowers mingle to form a blaze of color.</p>
    </li>
    <li class="card">
      <p class="title">Sunset</p>
      <p class="content">The sunset glow tinted the sky red.</p>
    </li>
    <li class="card">
      <p class="title">Plain</p>
      <p class="content">The winds came from the north, across the plains, funnelling down the valley. </p>
    </li>
 </ul>

實(shí)現(xiàn)的方式，是將背景加在.card元素的偽類上，當(dāng)元素不是焦點(diǎn)時(shí)，為該元素的偽類加上濾鏡。

.card:before{
    z-index: -1;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border-radius: 20px;
    filter: blur(0px) opacity(1);
    transition: filter 200ms linear, transform 200ms linear;
}
/*
     這里不能將濾鏡直接加在.card元素，而是將背景和濾鏡都加在偽類上。
     因?yàn)椋冈丶恿藶V鏡，它的子元素都會(huì)一起由該濾鏡改變。
     如果濾鏡直接加在.card元素上，會(huì)導(dǎo)致上面的文字也變模糊。
*/

//通過css選擇器選出非hover的.card元素，給其偽類添加模糊、透明度和明暗度的濾鏡 

.cards:hover > .card:not(:hover):before{    
  filter: blur(5px) opacity(0.8) brightness(0.8);
}

//對(duì)于hover的元素，其偽類增強(qiáng)飽和度，尺寸放大

.card:hover:before{
  filter: saturate(1.2);  
  transform: scale(1.05);
}

褪色效果

褪色效果可以打造出一種懷舊的風(fēng)格。下面這組照片墻，我們通過sepia濾鏡將圖像基調(diào)轉(zhuǎn)換為深褐色，再通過降低飽和度saturate 和色相旋轉(zhuǎn)hue-rotate 微調(diào)，模擬老照片的效果。

.pic{
    border: 3px solid #fff;
    box-shadow: 0 10px 50px #5f2f1182;
    filter: sepia(30%) saturate(40%) hue-rotate(5deg);
    transition: transform 1s;
}
.pic:hover{
    filter: none;
    transform: scale(1.2) translateX(10px);
    z-index: 1;
}

灰度效果

怎樣讓網(wǎng)站變成灰色？在html元素上加上filter: grayscale(100%)即可。

grayscale(amount)函數(shù)將改變輸入圖像灰度。amount 的值定義了灰度轉(zhuǎn)換的比例。值為 100% 則完全轉(zhuǎn)為灰度圖像，值為 0% 圖像無變化。若未設(shè)置值，默認(rèn)值是 0。

融合效果

要使兩個(gè)相交的元素產(chǎn)生下面這種融合的效果，需要用到的濾鏡是blur和contrast。

<div class="container">
  <div class="circle circle-1"></div>
  <div class="circle circle-2"></div>
</div>

.container{
  margin: 50px auto;
  height: 140px;
  width: 400px;
  background: #fff;   //給融合元素的父元素設(shè)置背景色
  display: flex;
  align-items: center;
  justify-content: center;
  filter: contrast(30);    //給融合元素的父元素設(shè)置contrast
}
.circle{
  border-radius: 50%;
  position: absolute;
  filter: blur(10px);    //給融合元素設(shè)置blur
}
.circle-1{
  height: 90px;
  width: 90px;
  background: #03a9f4;
  transform: translate(-50px);
  animation: 2s moving linear infinite alternate-reverse;
}
.circle-2{
  height: 60px;
  width: 60px;
  background: #0000ff;
  transform: translate(50px);
  animation: 2s moving linear infinite alternate;
}
 @keyframes moving {    //兩個(gè)元素的移動(dòng)
  0%{
    transform: translate(50px)
  }
  100%{
    transform: translate(-50px)
  }
}

實(shí)現(xiàn)融合效果的技術(shù)要點(diǎn)：

contrast濾鏡應(yīng)用在融合元素的父元素（.container）上，且父元素必須設(shè)置background。
blur濾鏡應(yīng)用在融合元素（.circle）上。

blur設(shè)置圖像的模糊程度，contrast設(shè)置圖像的對(duì)比度。當(dāng)兩者像上面那樣組合時(shí)，就會(huì)產(chǎn)生神奇的融合效果，你可以像使用公式一樣使用這種寫法。

在這種融合效果的基礎(chǔ)上，我們可以做一些有趣的交互設(shè)計(jì)。

加載動(dòng)畫：

html和css如下所示，這個(gè)動(dòng)畫主要通過控制子元素.circle的尺寸和位移來實(shí)現(xiàn)，但是由于父元素和子元素都滿足 “融合公式” ，所以當(dāng)子元素相交時(shí)，就出現(xiàn)了融合的效果。

<div class="container">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>

.container {
  margin: 10px auto;
  height: 140px;
  width: 300px;
  background: #fff;       //父元素設(shè)置背景色
  display: flex;
  align-items: center;
  filter: contrast(30);   //父元素設(shè)置contrast
}
.circle {
  height: 50px;
  width: 60px;
  background: #1aa7ff;
  border-radius: 50%;
  position: absolute;
  filter: blur(20px);    //子元素設(shè)置blur
  transform: scale(0.1);
  transform-origin: left top;
}
.circle{
  animation: move 4s cubic-bezier(.44,.79,.83,.96) infinite;
}
.circle:nth-child(2) {
  animation-delay: .4s;
}
.circle:nth-child(3) {
  animation-delay: .8s;
}
.circle:nth-child(4) {
  animation-delay: 1.2s;
}
.circle:nth-child(5) {
  animation-delay: 1.6s;
}
@keyframes move{     //子元素的位移和尺寸動(dòng)畫
  0%{
    transform: translateX(10px) scale(0.3);
  }
  45%{
    transform: translateX(135px) scale(0.8);
  }
  85%{
    transform: translateX(270px) scale(0.1);
  }
}

酷炫的文字出場(chǎng)方式：

主要通過不斷改變letter-spacing和blur的值，使文字從融合到分開：

<div class="container">
  <span class="text">fantastic</span>
</div>

.container{
  margin-top: 50px;
  text-align: center;
  background-color: #000;
  filter: contrast(30);
}
.text{
  font-size: 100px;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  letter-spacing: -40px;
  color: #fff;
  animation: move-letter 4s linear forwards;  //forwards當(dāng)動(dòng)畫完成后，保持最后一幀的狀態(tài)
}
@keyframes move-letter{
  0% {
    opacity: 0;
    letter-spacing: -40px;
    filter: blur(10px);
  }
  25% {
    opacity: 1;
  }
  50% {
    filter: blur(5px);
  }
  100% {
    letter-spacing: 20px;
    filter: blur(2px);
  }
}

水波效果

filter還可以通過 URL 鏈接到 SVG 濾鏡元素，SVG濾鏡元素MDN 。

下面的水波紋效果就是基于 SVG 的feTurbulence濾鏡實(shí)現(xiàn)的，原理參考了《說說SVG的feTurbulence濾鏡》和《SVG feTurbulence濾鏡深入介紹》，有興趣的朋友可以深入閱讀。

feTurbulence濾鏡借助Perlin噪聲算法模擬自然界真實(shí)事物那樣的隨機(jī)樣式。它接收下面5個(gè)屬性：

baseFrequency表示噪聲的基本頻率參數(shù)，頻率越高，噪聲越密集。
numOctaves就表示倍頻的數(shù)量，倍頻的數(shù)量越多，噪聲看起來越自然。
seed屬性表示feTurbulence濾鏡效果中偽隨機(jī)數(shù)生成的起始值，不同數(shù)量的seed不會(huì)改變?cè)肼暤念l率和密度，改變的是噪聲的形狀和位置。
stitchTiles定義了Perlin噪聲在邊框處的行為表現(xiàn)。
type屬性值有fractalNoise和turbulence，模擬隨機(jī)樣式使用turbulence。

在這個(gè)例子，兩個(gè)img標(biāo)簽使用同一張圖片，將第二個(gè)img標(biāo)簽使用scaleY(-1)實(shí)現(xiàn)垂直方向的鏡像翻轉(zhuǎn)，模擬倒影。

并且，對(duì)倒影圖片使用feTurbulence濾鏡，通過動(dòng)畫不斷改變feTurbulence濾鏡的baseFrequency值實(shí)現(xiàn)水紋波動(dòng)的效果。

<div class="container">
  <img src="images/moon.jpg">
  <img src="images/moon.jpg" class="reflect">
</div>

<!--定義svg濾鏡，這里使用的是feTurbulence濾鏡-->
<svg width="0" height="0">
    <filter id="displacement-wave-filter">
    
      <!--baseFrequency設(shè)置0.01 0.09兩個(gè)值，代表x軸和y軸的噪聲頻率-->  
      <feTurbulence baseFrequency="0.01 0.09">
        
        <!--這是svg動(dòng)畫的定義方式，通過動(dòng)畫不斷改變baseFrequency的值，從而形成波動(dòng)效果-->
        <animate attributeName="baseFrequency"
        dur="20s" keyTimes="0;0.5;1" values="0.01 0.09;0.02 0.13;0.01 0.09"
        repeatCount="indefinite" ></animate>
        
      </feTurbulence>
      <feDisplacementMap in="SourceGraphic" scale="10" /> 
    </filter>
</svg>

.container{
   height: 520px;
   width: 400px;
   display: flex;
   clip-path: inset(10px);
   flex-direction: column;
}
img{
  height: 50%;
  width: 100%;
}
.reflect {
  transform: translateY(-2px) scaleY(-1);
  //對(duì)模擬倒影的元素應(yīng)用svg filter
  //url中對(duì)應(yīng)的是上面svg filter的id
  filter: url(#displacement-wave-filter);  
}

抖動(dòng)效果

在上面的動(dòng)畫改變的是baseFrequency值，下面我們通過改變seed的值，實(shí)現(xiàn)文字的抖動(dòng)效果。

<div>
  <p class="shaky">Such a joyful night!</p>
</div>
<svg width="0" height="0">
    <filter id="displacement-text-filter">
    
      <!--定義feTurbulence濾鏡-->
      <feTurbulence baseFrequency="0.02" seed="0">
      
       <!--這是svg動(dòng)畫的定義方式，通過動(dòng)畫不斷改變seed的值，形成抖動(dòng)效果-->
        <animate attributeName="seed"
        dur="1s" keyTimes="0;0.5;1" values="1;2;3"
        repeatCount="indefinite" ></animate>
      </feTurbulence>
      <feDisplacementMap in="SourceGraphic" scale="10" /> 
    </filter>
  </svg>

.shaky{
  font-size: 60px;
  filter: url(#displacement-text-filter);   //url中對(duì)應(yīng)的是上面svg filter的id
}

參考

《CSS的N個(gè)編碼技巧》：https://juejin.cn/post/6924206099193135111

《說說SVG的feTurbulence濾鏡》：https://zhuanlan.zhihu.com/p/366438535

《【CSS】水滴動(dòng)畫｜水滴融合效果》：https://www.bilibili.com/video/av584118838/

《你所不知道的 CSS 濾鏡技巧與細(xì)節(jié)》：https://www.cnblogs.com/coco1s/p/7519460.html

《SVG feTurbulence濾鏡深入介紹》：https://www.zhangxinxu.com/wordpress/2020/10/svg-feturbulence

最后

如果你覺得這篇內(nèi)容對(duì)你挺有啟發(fā)，我想邀請(qǐng)你幫我個(gè)小忙：

點(diǎn)個(gè)「喜歡」或「在看」，讓更多的人也能看到這篇內(nèi)容
我組建了個(gè)氛圍非常好的前端群，里面有很多前端小伙伴，歡迎加我微信「sherlocked_93」拉你加群，一起交流和學(xué)習(xí)
關(guān)注公眾號(hào)「前端下午茶」，持續(xù)為你推送精選好文，也可以加我為好友，隨時(shí)聊騷。

點(diǎn)個(gè)喜歡支持我吧，在看就更好了

巧用CSS filter，讓你的網(wǎng)站更加酷炫！