摘要:柔化邊緣使用高斯模糊來柔化文本水邊效果的邊緣看起來有點扎眼。組合兩者把模糊和位移進行組合,可以獲得更令人愉悅的效果在之前的高斯模糊下面添加復(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)添加代碼。
03. 創(chuàng)建一個 SVG 濾鏡Underwater Adventure Park
02. 完成標(biāo)題現(xiàn)在標(biāo)題已完成,所有文本都已就緒。如果你此刻在瀏覽器中查看頁面,將看到一個帶有一些文本的圖像。當(dāng)前標(biāo)題仍然是沒有樣式的,接下來為它設(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 代碼可以添加到頁面的任何位置,但是因為它不會被用戶直接看到,所以最好將它放在閉合 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
摘要:最近推出了新版的,并希望能夠在瀏覽器中檢測到新加入的深色模式。能夠?qū)撁嫒萜魃系倪吙蜿幱斑M行更新,使其在使用深色模式時不太透明。利用使用為按鈕創(chuàng)建不同的樣式和交互我們可以利用為深色和淺色主題的按鈕創(chuàng)建不同的樣式和懸停交互。 翻譯:瘋狂的技術(shù)宅原文:https://www.creativebloq.com/... 本文首發(fā)微信公眾號:jingchengyideng歡迎關(guān)注,每天都給你...
摘要:經(jīng)過一番研究,我收集了個最好的庫,你可以用在自己的項目中。該庫于年月首次推出,目前仍有近名參與者開發(fā)。超過的,是一個動畫庫,可以處理屬性單個轉(zhuǎn)換或任何屬性,以及對象。對智能設(shè)備的方向作出反應(yīng)的視差引擎快速創(chuàng)建漂亮的動畫。 翻譯:瘋狂的技術(shù)宅原文:https://blog.bitsrc.io/11-jav... 當(dāng)我想要在網(wǎng)上找一個簡潔的 Javascript 動效庫時,總是發(fā)現(xiàn)很多推...
摘要:通過面試者的答案可以得知他都知道哪些開發(fā)語言。這個問題的答案能夠知道求職者有沒有可靠的資源,這些資源在未來開展項目時可能會派上用場。對這個問題的誠實回答可以幫助面試官為求職者提供合適的團隊。 翻譯:瘋狂的技術(shù)宅原文:https://www.indeed.com/hire/i... 不管你是面試官還是求職者,里面的思路都能讓你獲益匪淺。 你用 CSS 多久了? 解析: 這個問題可以讓面...
摘要:翻譯瘋狂的技術(shù)宅原文許多前端開發(fā)人員都在用為他們的網(wǎng)站設(shè)計樣式。一些人喜歡在中添加一些自己偏好的樣式,我也一樣。我認(rèn)為這是令人難以置信和奇怪的。不同的瀏覽器為表單元素和按鈕設(shè)置了不同的邊框樣式。這種風(fēng)格的問題是它的特異性低。 翻譯:瘋狂的技術(shù)宅原文:https://medium.freecodecamp.o... 許多前端開發(fā)人員都在用 Normalize 為他們的網(wǎng)站設(shè)計樣式。一些...
閱讀 2265·2023-04-25 23:15
閱讀 1917·2021-11-22 09:34
閱讀 1546·2021-11-15 11:39
閱讀 955·2021-11-15 11:37
閱讀 2152·2021-10-14 09:43
閱讀 3493·2021-09-27 13:59
閱讀 1506·2019-08-30 15:43
閱讀 3454·2019-08-30 15:43