摘要:柔化邊緣使用高斯模糊來(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)添加代碼。
03. 創(chuàng)建一個(gè) SVG 濾鏡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 BeforeUnderwater Adventure Park is an experience unlinke anything you have ever had. Travel to the depths of the Ocean and walk among the Sea Life!
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
摘要:最近推出了新版的,并希望能夠在瀏覽器中檢測(cè)到新加入的深色模式。能夠?qū)?yè)面容器上的邊框陰影進(jìn)行更新,使其在使用深色模式時(shí)不太透明。利用使用為按鈕創(chuàng)建不同的樣式和交互我們可以利用為深色和淺色主題的按鈕創(chuàng)建不同的樣式和懸停交互。 翻譯:瘋狂的技術(shù)宅原文:https://www.creativebloq.com/... 本文首發(fā)微信公眾號(hào):jingchengyideng歡迎關(guān)注,每天都給你...
摘要:經(jīng)過(guò)一番研究,我收集了個(gè)最好的庫(kù),你可以用在自己的項(xiàng)目中。該庫(kù)于年月首次推出,目前仍有近名參與者開發(fā)。超過(guò)的,是一個(gè)動(dòng)畫庫(kù),可以處理屬性單個(gè)轉(zhuǎn)換或任何屬性,以及對(duì)象。對(duì)智能設(shè)備的方向作出反應(yīng)的視差引擎快速創(chuàng)建漂亮的動(dòng)畫。 翻譯:瘋狂的技術(shù)宅原文:https://blog.bitsrc.io/11-jav... 當(dāng)我想要在網(wǎng)上找一個(gè)簡(jiǎn)潔的 Javascript 動(dòng)效庫(kù)時(shí),總是發(fā)現(xiàn)很多推...
摘要:通過(guò)面試者的答案可以得知他都知道哪些開發(fā)語(yǔ)言。這個(gè)問(wèn)題的答案能夠知道求職者有沒(méi)有可靠的資源,這些資源在未來(lái)開展項(xiàng)目時(shí)可能會(huì)派上用場(chǎng)。對(duì)這個(gè)問(wèn)題的誠(chéng)實(shí)回答可以幫助面試官為求職者提供合適的團(tuán)隊(duì)。 翻譯:瘋狂的技術(shù)宅原文:https://www.indeed.com/hire/i... 不管你是面試官還是求職者,里面的思路都能讓你獲益匪淺。 你用 CSS 多久了? 解析: 這個(gè)問(wèn)題可以讓面...
摘要:翻譯瘋狂的技術(shù)宅原文許多前端開發(fā)人員都在用為他們的網(wǎng)站設(shè)計(jì)樣式。一些人喜歡在中添加一些自己偏好的樣式,我也一樣。我認(rèn)為這是令人難以置信和奇怪的。不同的瀏覽器為表單元素和按鈕設(shè)置了不同的邊框樣式。這種風(fēng)格的問(wèn)題是它的特異性低。 翻譯:瘋狂的技術(shù)宅原文:https://medium.freecodecamp.o... 許多前端開發(fā)人員都在用 Normalize 為他們的網(wǎng)站設(shè)計(jì)樣式。一些...
閱讀 2277·2023-04-25 23:15
閱讀 1941·2021-11-22 09:34
閱讀 1563·2021-11-15 11:39
閱讀 970·2021-11-15 11:37
閱讀 2166·2021-10-14 09:43
閱讀 3504·2021-09-27 13:59
閱讀 1515·2019-08-30 15:43
閱讀 3479·2019-08-30 15:43