這是一個利用CSS3的動畫屬性實現(xiàn)的結(jié)合lowpoly(低多邊形風(fēng)格)的效果,主要利用了CSS3 transform屬性的rotate旋轉(zhuǎn),translate移動,scale縮放,CSS代碼部分非常簡單,唯一有趣的是 nth-of-type選擇器的使用,這里UI設(shè)計師小伙伴不用望而卻步,CSS部分完全可以拿來復(fù)用并根據(jù)自己的要求隨意改變參數(shù)(所有不能復(fù)用的SVG動畫代碼都是耍流氓),然后,UI設(shè)計師再搭配上自己熟悉的AI利器,就可以完美的實現(xiàn)下面的效果了。
 
分步驟拆解:
1. 低多邊形風(fēng)格的圖片的制作
我的原圖是下面這種:
 
隨手從電腦上找了一張背景圖,然后借助一個神器 Image Triangulator,不得不感慨,這個工具真是太好用了,各位設(shè)計師需要做的只是在圖片上打點(我是為了測試,很粗糙的添加了頂點,如果需要得到很出彩的效果,需要在明暗分隔的邊緣精細添加)。
 
 

然后導(dǎo)出的pdf格式的文件,就可以用AI打開了。
2. 圖片的處理
這里在AI里需要一步重要的操作, “釋放剪切蒙版” ,如果不進行這步操作,生成的SVG代碼里會有大量的路徑裁剪遮罩標(biāo)簽 <clipPath> 以及polygon的clip-path屬性。
 
釋放剪切路徑后選中圖形就可以看到此時圖片已經(jīng)由一個個三角形色塊組成了。
導(dǎo)出SVG代碼可以看到密密麻麻的多邊形標(biāo)簽 <polygon fill="" points=""/> 。
Image Triangulator生成lowpoly風(fēng)格的圖片;AI處理,釋放剪切蒙版
此處需注意,這個軟件生成的PDF是帶未處理的底圖的,SVG文件里有 <img> 標(biāo)簽,所以邊緣那里可以多加幾個點,或者截取掉一部分,防止邊緣出現(xiàn)鏤空。
3. 在線生成的低多邊形背景圖片的處理
如果需要的僅是一個背景圖,建議使用網(wǎng)站 http://qrohlf.com/trianglify-generator/ ,可以自定義尺寸、顏色和晶格大小,支持生成SVG格式。比如下面這種:
             
新聞熱點
疑難解答