一步步教你用 CSS 爲 SVG 添加濾鏡

時間  2019-12-05
標籤 步步 css svg 添加 欄目 CSS 简体版
原文   原文鏈接
翻譯：瘋狂的技術宅
原文： https://www.creativebloq.com/...

本文首發微信公衆號：jingchengyideng
歡迎關注，天天都給你推送新鮮的前端技術文章css

clipboard.png

自21世紀初以來，SVG就存在了，但仍有一些有趣的方法去用它。在本教程中，重點將放在 SVG 的濾鏡上 —— 但不僅是將它們應用於 SVG 圖像，我將向你展現如何將它們應用於任何常規頁面的內容上。html

實際上咱們是經過告訴 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 濾鏡。segmentfault

<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 值，使其周圍可以有適量的空間，顏色也會改變。ide

.headline {
    line-height: 0;
    display: inline-block;
    padding: 70px;
    color: #ccffff;

06. 完成 headline

clipboard.png

SVG 將用於替換標題文本svg

在完成 headline 類後，下一行將 SVG 中的 displacementFilter ID應用於文本。 translate3d 確保用硬件加速去處理文本。把 scale 稍微改變一點，以確保當發生位移時看起來是正確的。

filter: url(#displacementFilter);
    transform: translate3d(0, 0, 0);
    transform: scaleY(1.8) rotateY(-2deg);
}

07. 替換它

clipboard.png

如今文本被替換了

若是在此階段測試濾鏡，則波紋效果會徹底取代文本。這很容易解決。回到 index.html 頁面中的濾鏡代碼。這樣將應用波紋和源圖形（即文本），並將其應用爲位移濾鏡。嘗試改變波紋的頻率和振幅。

<feDisplacementMap in2="turbulence" in="
SourceGraphic" scale="30" xChannelSelector="R" 
yChannelSelector="G" result="disp" />

08. 柔化邊緣

clipboard.png

使用高斯模糊來柔化文本

水邊效果的邊緣看起來有點扎眼。這能夠用高斯模糊來解決。在置換貼圖後面添加代碼。當你刷新頁面時，它確實模糊了文本，但位移也消失了。一樣這些問題能夠在實現效果的過程當中被修復。

<feGaussianBlur in="SourceGraphic" 
stdDeviation="15" result="blr" />

09. 組合二者

clipboard.png

把模糊和位移進行組合，能夠得到更使人愉悅的效果

在以前的高斯模糊下面添加複合線。你將看到會把模糊和位移效果結合在一塊兒，而且還爲文本建立了水潤的半透明效果。它的邊緣已經在某種程度上變得柔和了，可是這還不夠。若是能把最初的模糊效果加入到這裏效果會很好。

<feComposite in="blr" in2="disp" operator="in" result="comp" />

10. 合併模糊

clipboard.png

經過合併操做，它看起來會更好

合併操做使前面的效果與模糊效果合併。如今看上去與背景圖像很搭，就好像光線穿過了水面同樣。對於文原本說它仍然是可選擇的，而且是頁面的一部分，這點和在 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 樣式

clipboard.png

替換 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. 添加菜單圖標

clipboard.png

更改菜單圖標的 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.解決剩下的動做

clipboard.png

以不一樣的速度移動菜單元素以得到更加流暢的效果

剩餘的菜單元素以不一樣的速度移出來。這使得菜單元素可以在動畫的早期階段粘在一塊兒，在這裏用了 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);
}

本文首發微信公衆號：jingchengyideng

歡迎掃描二維碼關注公衆號，天天都給你推送新鮮的前端技術文章

歡迎掃描二維碼關注公衆號，天天都給你推送新鮮的前端技術文章

歡迎繼續閱讀本專欄其它高贊文章：

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程