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

資訊專欄INFORMATION COLUMN

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

binta / 3478人閱讀

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

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

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

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

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

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

從FileSilo下載本教程的源碼

01. 開始

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

Underwater Adventure Park

02. 完成標(biāo)題

現(xiàn)在標(biāo)題已完成,所有文本都已就緒。如果你此刻在瀏覽器中查看頁(yè)面,將看到一個(gè)帶有一些文本的圖像。當(dāng)前標(biāo)題仍然是沒(méi)有樣式的,接下來(lái)為它設(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)建一個(gè) SVG 濾鏡

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


        
            
        
04. 隱藏 SVG

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

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

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

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

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

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

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

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

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

08. 柔化邊緣

使用高斯模糊來(lái)柔化文本

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

09. 組合兩者

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

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

10. 合并模糊

通過(guò)合并操作,它看起來(lái)會(huì)更好

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


                
                
            
11. 創(chuàng)建動(dòng)畫

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

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

替換 h2 以引入一些動(dòng)畫

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

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)航

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

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

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

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<