国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

binta / 3453人閱讀

摘要:柔化邊緣使用高斯模糊來柔化文本水邊效果的邊緣看起來有點扎眼。組合兩者把模糊和位移進行組合,可以獲得更令人愉悅的效果在之前的高斯模糊下面添加復(fù)合線。創(chuàng)建動畫回到文件并添加關(guān)鍵幀,如下所示。動畫停止會停留在最后一個關(guān)鍵幀上。

翻譯:瘋狂的技術(shù)宅
原文:https://www.creativebloq.com/...

本文首發(fā)微信公眾號:jingchengyideng
歡迎關(guān)注,每天都給你推送新鮮的前端技術(shù)文章

自21世紀(jì)初以來,SVG就存在了,但仍有一些有趣的方法去用它。在本教程中,重點將放在 SVG 的濾鏡上 —— 但不只是將它們應(yīng)用于 SVG 圖像,我將向你展示如何將它們應(yīng)用于任何常規(guī)頁面的內(nèi)容上。

實際上我們是通過告訴 CSS 濾鏡所擁有的 ID,然后再把濾鏡應(yīng)用于 SVG 的方式來實現(xiàn)。使用同樣的方法,濾鏡也可以用于常規(guī)文本。關(guān)于這一點的好處在于,你可以輕松的為文本添加一些出彩的特效,以前只能通過使用 Photoshop 濾鏡并保存為圖像來實現(xiàn)。使用SVG濾鏡,文本仍然是可訪問并可選的,因為它只是頁面上的常規(guī)文本元素。

這里的代碼將為文本創(chuàng)建一個置換貼圖,這個貼圖還包含一個 alpha 貼圖,使其看起來像水一樣,并符合我們頁面的主題。然后創(chuàng)建另一個濾鏡,使菜單顯示為水斑點,它們會稍微粘在一起,但會隨著它們向遠處移動而分開。這也是為了和特定頁面的主題保持一致,并展示了將 SVG 濾鏡用于其他內(nèi)容的兩種創(chuàng)造性方法。

從FileSilo下載本教程的源碼

01. 開始

首先,你需要從上面的鏈接下載項目文件。之后將項目文件夾 start 拖到代碼 IDE 上,然后打開 index.html 頁面。你將會看到一些已經(jīng)寫好的頁面內(nèi)容。接下來創(chuàng)建標(biāo)題部分,這里將包含受 SVG 濾鏡影響的標(biāo)題。在 body 標(biāo)簽內(nèi)添加代碼。

Underwater Adventure Park

02. 完成標(biāo)題

現(xiàn)在標(biāo)題已完成,所有文本都已就緒。如果你此刻在瀏覽器中查看頁面,將看到一個帶有一些文本的圖像。當(dāng)前標(biāo)題仍然是沒有樣式的,接下來為它設(shè)置樣式并應(yīng)用 SVG 濾鏡。

Experience the Ocean
Like Never Before

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!

03. 創(chuàng)建一個 SVG 濾鏡

SVG 代碼可以添加到頁面的任何位置,但是因為它不會被用戶直接看到,所以最好將它放在閉合 body 標(biāo)簽之前的最底部。 SVG 濾鏡產(chǎn)生一些波紋效果。請注意,濾鏡具有 ID —— 這使 CSS 能夠把它應(yīng)用到頁面上的另一個元素。


        
            
        
04. 隱藏 SVG

現(xiàn)在轉(zhuǎn)到 page.css 文件,我們的新 CSS 會添加到所有其它CSS代碼的頂部。這里的 SVG 被設(shè)置為根本不顯示在頁面上。為 h2 標(biāo)記設(shè)置相對應(yīng)的字體的字體。

svg {
    display: none;
}
h2 {
    font-size: 5.5vw;
    font-family: "Crete Round", serif;
}
05. 加入 headline

line-height 設(shè)置為零,因為稍后標(biāo)題將被加上動畫效果,所以控制頁面上的縮放很重要。它設(shè)定了 padding 值,使其周圍能夠有適量的空間,顏色也會改變。

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

SVG 將用于替換標(biāo)題文本

在完成 headline 類后,下一行將 SVG 中的 displacementFilter ID應(yīng)用于文本。 translate3d 確保用硬件加速去處理文本。把 scale 稍微改變一點,以確保當(dāng)發(fā)生位移時看起來是正確的。

    filter: url(#displacementFilter);
    transform: translate3d(0, 0, 0);
    transform: scaleY(1.8) rotateY(-2deg);
}
07. 替換它

現(xiàn)在文本被替換了

如果在此階段測試濾鏡,則波紋效果會完全取代文本。這很容易解決。回到 index.html 頁面中的濾鏡代碼。這樣將應(yīng)用波紋和源圖形(即文本),并將其應(yīng)用為位移濾鏡。嘗試改變波紋的頻率和振幅。

08. 柔化邊緣

使用高斯模糊來柔化文本

水邊效果的邊緣看起來有點扎眼。這可以用高斯模糊來解決。在置換貼圖后面添加代碼。當(dāng)你刷新頁面時,它確實模糊了文本,但位移也消失了。同樣這些問題可以在實現(xiàn)效果的過程中被修復(fù)。

09. 組合兩者

把模糊和位移進行組合,可以獲得更令人愉悅的效果

在之前的高斯模糊下面添加復(fù)合線。你將看到會把模糊和位移效果結(jié)合在一起,并且還為文本創(chuàng)建了水潤的半透明效果。它的邊緣已經(jīng)在某種程度上變得柔和了,但是這還不夠。如果能把最初的模糊效果加入到這里效果會很好。

10. 合并模糊

通過合并操作,它看起來會更好

合并操作使前面的效果與模糊效果合并。現(xiàn)在看上去與背景圖像很搭,就好像光線穿過了水面一樣。對于文本來說它仍然是可選擇的,并且是頁面的一部分,這點和在 Photoshop 中作出的效果完全不一樣。


                
                
            
11. 創(chuàng)建動畫

回到 page.css 文件并添加關(guān)鍵幀,如下所示。這將會把字體大小從零垂直寬度擴展到 5.5 垂直寬度。把它應(yīng)用于標(biāo)題后,文本會在屏幕上放大并被放置到位。隨著文本的移動,位移也會隨著長度的變化而變化,產(chǎn)生水紋效果。

@keyframes scaler {
    from {
        font-size: 0vw;
    }
    to {
        font-size: 5.5vw;
    }
}
12. 更改 h2 樣式

替換 h2 以引入一些動畫

之前在步驟 4 中添加了 h2 樣式。使用下面這段新代碼替換舊代碼,這段代碼將為標(biāo)題添加四秒的 CSS 動畫。動畫停止會停留在最后一個關(guān)鍵幀上。保存文件并在瀏覽器中測試,檢查文本是否到位。

h2 {
    line-height: 0;
    font-size: 0vw;
    animation-name: scaler;
    animation-duration: 4s;
    animation-fill-mode: forwards;
    font-family: "Crete Round", serif;
}
13. 添加導(dǎo)航

接下來讓我們用另外一個 SVG 濾鏡創(chuàng)建一個水斑動畫。將以下導(dǎo)航內(nèi)容添加到正文代碼的最頂部,也就是本教程第一步中開始的標(biāo)題之前。這將在一個圓內(nèi)創(chuàng)建一個看上去像漢堡

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/116032.html

相關(guān)文章

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<