這是一個利用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格式。比如下面這種：