一 關於filter

首先看一下官方對於CSS的filter屬性的定義：

CSS屬性將模糊或顏色偏移等圖形效果應用於元素。濾鏡通常用於調整影象，背景和邊框的渲染。

本文主要講的是filter中的一個屬性：hue-rotate。官方定義是：

給影象應用色相旋轉。“angle”一值設定影象會被調整的色環角度值。值為0deg，則影象無變化。若值未設定，預設值是0deg。該值雖然沒有最大值，超過360deg的值相當於又繞一圈。

本文主要是通過一些demo和思考來講述其強大和便捷之處。

二 程式碼差異

首先來寫一個帶有hover特效的button元件吧～程式碼如下：

<button class="btn btn-primary">primary</button>
<button class="btn btn-primary-filter">primary-filter</button>
 

.btn{
  padding: 4px 15px;
  outline: none;
  border: none;
  border-radius: 3px;
  margin: 10px 20px;
  cursor: pointer;
  color: #fff;
  background: #1890ff;
  border-color: #1890ff;
  box-shadow: 0 2px 0 rgba(0,0,0,.045);
}
.btn-primary:hover{
  background-color: #096dd9;
  border-color: #096dd9;
  color: #fff; 
}
.btn-primary-filter:hover{
  filter: hue-rotate(15deg);
}
 

效果如下：

<a href="https://sm.ms/image/CG3pI65XRWOrNA4" target="_blank"><img src="https://i.loli.net/2020/12/01/CG3pI65XRWOrNA4.gif" ></a>

通過動圖可以看到，兩個button元件的效果基本類似，但是程式碼量是有一定的差距的，目前我們只寫了hover的特效，當我們加上其餘的狀態以後，程式碼量的差距會更大。

開胃菜我們吃的差不多了，我們搞點事情：

我們經常看到進度條，但是更多時候的動畫效果都是通過js實現的，我們這次可以做一個根據進度而時刻變化顏色的進度條，走起走起：

首先我們要有一個進度條：

其次我們要讓它動起來，根據我們的進度保持顏色的遞進變化，程式碼如下：

<div class="main">
  <div class="demo"></div>
</div>

.main{
  margin: 100px auto;
  width: 600px;
  height: 60px;
  position: relative;
}
.demo{
  height: 100%;
  box-sizing: border-box;
  border-radius: 15px 30px 30px 15px;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.22)); // 陰影效果
  background: #fff;
}

.demo::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 100%;
  // 背景顏色給個漸變效果
  background: linear-gradient(to bottom, #7abcff 0%, #00BCD4 44%, #2196F3 100%);
  border-radius: 0px 0px 5px 5px;
  box-shadow: 0 14px 28px rgba(33, 150, 243, 0), 0 10px 10px rgba(9, 188, 215, 0.08);
  animation: charging 5s linear infinite;
  filter: hue-rotate(110deg);
}

@keyframes charging {
  50% {
    box-shadow: 0 14px 28px rgba(0, 150, 136, 0.83), 0px 4px 10px rgba(9, 188, 215, 0.4);
  }

  95% {
    right: 5%;
    filter: hue-rotate(0deg);
    border-radius: 0 0 5px 5px;
    box-shadow: 0 14px 28px rgba(4, 188, 213, .2), 0 10px 10px rgba(9, 188, 215, 0.08);
  }
  100% {
    right: 0%;
    filter: hue-rotate(0deg);
    border-radius: 15px 15px 5px 5px;
    box-shadow: 0 14px 28px rgba(4, 188, 213, 0), 0 10px 10px rgba(9, 188, 215, 0.4);
  }
}

效果如下：

如上，我們這裡有一個小小的暗箱操作，就是我們無法對一個漸變色進行動畫animation，但是我們可以通過hue-rotate的方式，利用濾鏡進行顏色的變化，從而實現當前的效果。

三 總結

舉一反三，該屬性玩得順了的話，其實可以做到很多讓人眼前一亮的效果，最直接的就是我們可以將我們的個人部落格首頁，做根據當前時區和時間而變化的背景色。當然了，安卓手機現在的充電效果也可以做到，但是想要做出來肯定需要一定的css熟練度。我們在使用過程中，通過不斷的調節filter裡面屬性的資料，可以得到差異效果很大的動畫，當然了，好的效果需要不斷的除錯，但是這樣會使我們的業務開發變得更加的有樂趣～

最後，歡迎指正和修改本文～