相信做UI設(shè)計(jì)的童鞋們,經(jīng)常會(huì)看到帶有波浪形狀的網(wǎng)頁背景設(shè)計(jì),通常會(huì)配合平面化設(shè)計(jì)風(fēng)格一起使用,會(huì)讓整體看起來更活潑。
你知道這種波浪效果是怎么做的嗎?今天就給你介紹一個(gè)波浪背景制作神器——Svg Wave !
Svg Wave 能調(diào)整波浪的波峰數(shù)量、波浪層數(shù)和高度,也有自定義顏色或是使用漸層色效果,具有非常高的可自定義性。
如果你不確定怎么做比較好看,隨機(jī)按鈕點(diǎn)一下就會(huì)立即產(chǎn)生某個(gè)樣式,在 Svg Wave 能將波浪圖輸出為 SVG 或 PNG 格式(SVG 直接給出源碼),若你覺得開發(fā)網(wǎng)頁時(shí)使用單色背景看起來太過單調(diào),Svg Wave 是個(gè)不錯(cuò)的選擇。
Svg Wave
網(wǎng)站鏈接:https://svgwave.in/
使用教學(xué)
開啟 Svg Wave 網(wǎng)站后會(huì)看到波浪背景范例,從「Color」選取顏色或「Gradient」以兩個(gè)顏色產(chǎn)生漸層色效果,Svg Wave 可實(shí)時(shí)預(yù)覽顏色。
漸層色是蠻有活力的選項(xiàng),選擇兩個(gè)顏色就能產(chǎn)生漸變效果。
上方的 Waves、Layers 分別代表波浪的數(shù)量和層數(shù),直接以拖曳方式調(diào)整就會(huì)實(shí)時(shí)呈現(xiàn)在網(wǎng)頁上,調(diào)整 Height 可選擇不同的浪高,看起來整體感覺又會(huì)不太一樣。
如果想知道在深色背景呈現(xiàn)效果,點(diǎn)選 Svg Wave 右上角的圖標(biāo)可切換深色模式。
最后,點(diǎn)選右下角「Export」選擇要匯出為 SVG 或 PNG 格式,如果是 SVG 會(huì)直接給出源碼。
值得一試的三個(gè)理由:
可在線制作波浪圖網(wǎng)頁背景圖片
自定義波峰數(shù)量、波浪層數(shù)和高度并實(shí)時(shí)預(yù)覽
產(chǎn)生 SVG 或 PNG 圖片格式
云和數(shù)據(jù)作為一個(gè)深耕IT職業(yè)教育多年的教育者,目前的課程涵蓋云計(jì)算、大數(shù)據(jù)、人工智能、虛擬現(xiàn)實(shí)、軟件工程、用戶體驗(yàn)設(shè)計(jì)、網(wǎng)絡(luò)安全、電子商務(wù)等八大方向,結(jié)合企業(yè)實(shí)際用人需求,只為培養(yǎng)更多高端IT技術(shù)人才。
聲明:除云和數(shù)據(jù)原創(chuàng)文章外,分享和轉(zhuǎn)載的文章皆為促進(jìn)IT技術(shù)的傳播,并不代表本微信贊同其觀點(diǎn)和對(duì)真實(shí)性負(fù)責(zé),僅做交流學(xué)習(xí)使用,非商業(yè)用途。如有文章或圖片的原作者有異議或涉及版權(quán)問題,請(qǐng)立即聯(lián)系我們,我們將在第一時(shí)間進(jìn)行改正或刪除,確保您的權(quán)益,謝謝支持!
Copyright ? 2013-2021 河南云和數(shù)據(jù)信息技術(shù)有限公司 豫ICP備14003305號(hào) ISP經(jīng)營許可證:豫B-20160281