翻譯：瘋狂的技術宅
自21世紀初以來，SVG就存在了，但仍有一些有趣的方法去用它。在本教程中，重點將放在 SVG 的過濾器上 —— 但不只是將它們應用於 SVG 影象，我將向你展示如何將它們應用於任何常規頁面的內容上。
實際上我們是通過告訴 CSS 過濾器所擁有的 ID，然後再把過濾器應用於 SVG 的方式來實現。使用同樣的方法，過濾器也可以用於常規文字。關於這一點的好處在於，你可以輕鬆的為文字新增一些出彩的特效，以前只能通過使用 Photoshop 濾鏡並儲存為影象來實現。使用SVG過濾器，文字仍然是可訪問並可選的，因為它只是頁面上的常規文字元素。
這裡的程式碼將為文字建立一個置換貼圖，這個貼圖還包含一個 alpha 貼圖，使其看起來像水一樣，並符合我們頁面的主題。然後建立另一個過濾器，使選單顯示為水斑點，它們會稍微粘在一起，但會隨著它們向遠處移動而分開。這也是為了和特定頁面的主題保持一致，並展示了將 SVG 過濾器用於其他內容的兩種創造性方法。
01. 開始
首先，你需要從上面的連結下載專案檔案。之後將專案資料夾 **start ** 拖到程式碼 IDE 上，然後開啟 index.html 頁面。你將會看到一些已經寫好的頁面內容。接下來建立標題部分，這裡將包含受 SVG 過濾器影響的標題。在 body 標籤內新增程式碼。
<div class="bg">
<div class="middle">
<h2 class="headline">Underwater
Adventure Park</h2>
<div class="intro_block">
複製程式碼02. 完成標題
現在標題已完成，所有文字都已就緒。如果你此刻在瀏覽器中檢視頁面，將看到一個帶有一些文字的影象。當前標題仍然是沒有樣式的，接下來為它設定樣式並應用 SVG 過濾器。
<h3 class="subhead">Experience the Ocean
<br>Like Never Before</h3>
<p class="intro">Underwater
Adventure Park is an experience
unlinke anything you have ever
had. Travel to the depths of
the Ocean and walk among the
Sea Life!</p>
</div>
</div>
</div>
複製程式碼03. 建立一個 SVG 過濾器
SVG 程式碼可以新增到頁面的任何位置，但是因為它不會被使用者直接看到，所以最好將它放在閉合 body 標籤之前的最底部。 SVG 過濾器產生一些波紋效果。請注意，過濾器具有 ID —— 這使 CSS 能夠把它應用到頁面上的另一個元素。
<svg xmlns="http://www.w3.org/2000/svg">
<filter id="displacementFilter">
<feTurbulence type="turbulence"
baseFrequency="0.004" numOctaves=
"2" result="turbulence" />
</filter>
</svg>
複製程式碼04. 隱藏 SVG
現在轉到 page.css 檔案，我們的新 CSS 會新增到所有其它CSS程式碼的頂部。這裡的 SVG 被設定為根本不顯示在頁面上。為 h2 標記設定相對應的字型的字型。
svg {
display: none;
}
h2 {
font-size: 5.5vw;
font-family: 'Crete Round', serif;
}
複製程式碼05. 加入 headline
把 line-height 設定為零，因為稍後標題將被加上動畫效果，所以控制頁面上的縮放很重要。它設定了 padding 值，使其周圍能夠有適量的空間，顏色也會改變。
.headline {
line-height: 0;
display: inline-block;
padding: 70px;
color: #ccffff;
複製程式碼06. 完成 headline
SVG 將用於替換標題文字
在完成 headline 類後，下一行將 SVG 中的 displacementFilter ID應用於文字。 translate3d 確保用硬體加速去處理文字。把 scale 稍微改變一點，以確保當發生位移時看起來是正確的。
filter: url(#displacementFilter);
transform: translate3d(0, 0, 0);
transform: scaleY(1.8) rotateY(-2deg);
}
複製程式碼07. 替換它
現在文字被替換了
如果在此階段測試過濾器，則波紋效果會完全取代文字。這很容易解決。回到 index.html 頁面中的過濾器程式碼。這樣將應用波紋和源圖形（即文字），並將其應用為位移過濾器。嘗試改變波紋的頻率和振幅。
<feDisplacementMap in2="turbulence" in="
SourceGraphic" scale="30" xChannelSelector="R"
yChannelSelector="G" result="disp" />
複製程式碼08. 柔化邊緣
使用高斯模糊來柔化文字
水邊效果的邊緣看起來有點扎眼。這可以用高斯模糊來解決。在置換貼圖後面新增程式碼。當你重新整理頁面時，它確實模糊了文字，但位移也消失了。同樣這些問題可以在實現效果的過程中被修復。
<feGaussianBlur in="SourceGraphic"
stdDeviation="15" result="blr" />
複製程式碼09. 組合兩者
把模糊和位移進行組合，可以獲得更令人愉悅的效果
在之前的高斯模糊下面新增複合線。你將看到會把模糊和位移效果結合在一起，並且還為文字建立了水潤的半透明效果。它的邊緣已經在某種程度上變得柔和了，但是這還不夠。如果能把最初的模糊效果加入到這裡效果會很好。
<feComposite in="blr" in2="disp" operator="in" result="comp" />
複製程式碼10. 合併模糊
通過合併操作，它看起來會更好
合併操作使前面的效果與模糊效果合併。現在看上去與背景影象很搭，就好像光線穿過了水面一樣。對於文字來說它仍然是可選擇的，並且是頁面的一部分，這點和在 Photoshop 中作出的效果完全不一樣。
<feMerge result="final">
<feMergeNode in="blr" />
<feMergeNode in="comp" />
</feMerge>
複製程式碼11. 建立動畫
回到 page.css 檔案並新增關鍵幀，如下所示。這將會把字型大小從零垂直寬度擴充套件到 5.5 垂直寬度。把它應用於標題後，文字會在螢幕上放大並被放置到位。隨著文字的移動，位移也會隨著長度的變化而變化，產生水紋效果。
@keyframes scaler {
from {
font-size: 0vw;
}
to {
font-size: 5.5vw;
}
}
複製程式碼12. 更改 h2 樣式
替換 h2 以引入一些動畫
之前在步驟 4 中新增了 h2 樣式。使用下面這段新程式碼替換舊程式碼，這段程式碼將為標題新增四秒的 CSS 動畫。動畫停止會停留在最後一個關鍵幀上。儲存檔案並在瀏覽器中測試，檢查文字是否到位。
h2 {
line-height: 0;
font-size: 0vw;
animation-name: scaler;
animation-duration: 4s;
animation-fill-mode: forwards;
font-family: 'Crete Round', serif;
}
複製程式碼13. 新增導航
接下來讓我們用另外一個 SVG 濾鏡建立一個水斑動畫。將以下導航內容新增到正文程式碼的最頂部，也就是本教程第一步中開始的標題之前。這將在一個圓內建立一個看上去像漢堡?的選單圖示。
<nav class="menu">
<input type="checkbox" href="#" class=
"menu-open" name="menu-open" id="menu-
open" />
<label class="menu-open-button"
for="menu-open">
<span class="hamburger
hamburger-1"></span>
<span class="hamburger
hamburger-2"></span>
<span class="hamburger
hamburger-3"></span>
</label>
複製程式碼14. 完成導航
現在新增其餘的導航元素。我們使用 Font Awesome 開源圖示庫，該庫已被新增到 head 部分，以便使用該庫的CDN連結。每個選單圓形元素都有一個圖示。
<a href="#" class="menu-item"> <i class="fa
fa-car"></i> </a>
<a href="#" class="menu-item"> <i
class="fa fa-ship"></i> </a>
<a href="#" class="menu-item"> <i
class="fa fa-map"></i> </a>
<a href="#" class="menu-item"> <i
class="fa fa-suitcase"></i> </a>
</nav>
複製程式碼15. 新增新過濾器
接著為這個效果新增另一個過濾器。在SVG中，在先前新增的過濾器標記程式碼的後面新增以下程式碼。這裡的效果用和前面非常相似的方式建立起來。這將使選單看起來像粘稠的液體一樣分開。
<filter id="shadowed-blob">
<feGaussianBlur in="SourceGraphic"
result="blur" stdDeviation="20" />
<feColorMatrix in="blur" mode=
"matrix" values="1 0 0 0 0 0 1 0 0
0 0 0 1 0 0 0 0 0 18 -7"
result="blob" />
<feGaussianBlur in="blob"
stdDeviation="3" result="shadow" />
<feColorMatrix in="shadow" mode=
"matrix" values="0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0 1 -0.2"
result="shadow" />
複製程式碼16. 完成過濾器
此處新增了過濾器的剩餘部分，這將完成選單項上的效果。並新增液體斑點效果。新增完程式碼後儲存檔案，然後切換到 'design.css' 檔案。
<feOffset in="shadow" dx="0" dy="2"
result="shadow" />
<feComposite in2="shadow" in="blob"
result="blob" />
<feComposite in2="blob"
in="SourceGraphic" result="mix" />
</filter>
複製程式碼17.應用過濾器
CSS 程式碼也可以新增到其它檔案中，但是為了將所有導航 CSS 放在同一個地方，我們還是把下面的程式碼寫到 design.css 中。這裡的過濾器會被用於選單，這是一個固定的選單，會始終顯示在螢幕上。
.menu {
filter: url(“#shadowed-blob");
position: fixed;
padding-top: 20px;
padding-left: 80px;
width: 650px;
height: 150px;
box-sizing: border-box;
font-size: 20px;
text-align: left;
}
複製程式碼18. 使選單工作
當選單開啟時，選單圖示被設定為不可見。然後建立每個選單項的懸停元素，以便當使用者將滑鼠懸停在上面時進行更改。當選單項返回其原始位置時，選單的每個子項都會有 0.4 秒的變換時間。
.menu-open {
display: none;
}
.menu-item:hover {
background: #47959f;
color: #b2f0f8;
}
.menu-item:nth-child(3), .menu-item:nth-
child(4), .menu-item:nth-child(5), .menu-
item:nth-child(6) {
transition-duration: 400ms;
}
複製程式碼19. 新增選單圖示
更改選單圖示的 z-index 以將其置於頂部
通過更改其 z-index，選單圖示高於其他元素。當使用者將滑鼠懸停在選單上時，選單會滑出，單擊選單後其上的三條橫線會變為 “X”，表示收起選單。
.menu-open-button {
z-index: 2;
transition-timing-function: cubic-
bezier(0.175, 0.885, 0.32, 1.275);
transition-duration: 400ms;
transform: scale(1.1, 1.1) translate3d
(0, 0, 0);
cursor: pointer;
}
.menu-open-button:hover {
transform: scale(1.2, 1.2) translate3d
(0, 0, 0);
}
複製程式碼20.移動元素
第一個選單項實際上是選單的第三個子項，因為它前面還有一個核取方塊和漢堡包樣式的圖示。新增這一項可使第一個選單元素在使用者單擊選單後移動到位。每個選單元素都會以稍長的時間移出。
.menu-open:checked + .menu-open-button {
transition-timing-function: linear;
transition-duration: 400ms;
transform: scale(0.8, 0.8) translate3d
(0, 0, 0);
}
.menu-open:checked ~ .menu-item {
transition-timing-function: cubic-
bezier(0.165, 0.84, 0.44, 1);
}
.menu-open:checked ~ .menu-item:nth-child(3) {
transition-duration: 390ms;
transform: translate3d(110px, 0, 0);
}
複製程式碼21.解決剩下的動作
以不同的速度移動選單元素以獲得更加流暢的效果
剩餘的選單元素以不同的速度移出來。這使得選單元素能夠在動畫的早期階段粘在一起，在這裡用了 SVG 濾鏡提供的斑點液體外觀。新增下列程式碼後儲存檔案並在瀏覽器中檢視完成的結果。
.menu-open:checked ~ .menu-item:nth-child(4) {
transition-duration: 490ms;
transform: translate3d(220px, 0, 0);
}
.menu-open:checked ~ .menu-item:nth-child(5) {
transition-duration: 590ms;
transform: translate3d(330px, 0, 0);
}
.menu-open:checked ~ .menu-item:nth-child(6) {
transition-duration: 690ms;
transform: translate3d(440px, 0, 0);
}
複製程式碼歡迎關注京程一燈公眾號：京程一燈，獲取更多前端乾貨。
