這是一個利用CSS3的動畫屬性實現的結合lowpoly（低多邊形風格）的效果，主要利用了CSS3 transform屬性的rotate旋轉，translate移動，scale縮放，CSS代碼部分非常簡單，唯一有趣的是 nth-of-type選取器的使用，這裡UI設計師小夥伴不用望而卻步，CSS部分完全可以拿來複用並根據自己的要求隨意改變參數（所有不能複用的SVG動畫代碼都是耍流氓），然後，UI設計師再搭配上自己熟悉的AI利器，就可以完美的實現下面的效果了。
分步驟拆解：
1. 低多邊形風格的圖片的製作
我的原圖是下面這種：
隨手從電腦上找了一張背景圖，然後藉助一個神器 Image Triangulator，不得不感慨，這個工具真是太好用了，各位設計師需要做的只是在圖片上打點（我是為了測試，很粗糙的添加了頂點，如果需要得到很出彩的效果，需要在明暗分隔的邊緣精細添加）。
然後匯出的pdf格式的檔案，就可以用AI開啟了。
2. 圖片的處理
這裡在AI裡需要一步重要的操作， “釋放剪下蒙版” ，如果不進行這步操作，產生的SVG代碼裡會有大量的路徑裁剪遮罩標籤 <clipPath> 以及polygon的clip-path屬性。
解除裁剪路徑後選中圖形就可以看到此時圖片已經由一個個三角形色塊組成了。
匯出SVG代碼可以看到密密麻麻的多邊形標籤 <polygon fill="" points=""/> 。
Image Triangulator產生lowpoly風格的圖片；AI處理，釋放剪下蒙版
此處需注意，這個軟體產生的PDF是帶未處理的底圖的，SVG檔案裡有 <img> 標籤，所以邊緣那裡可以多加幾個點，或者截取掉一部分，防止邊緣出現鏤空。
3. 線上產生的低多邊形背景圖片的處理
如果需要的僅是一個背景圖，建議使用網站 qrohlf.com/trianglify-generator/ ，可以自訂尺寸、顏色和晶格大小，支援產生SVG格式。比如下面這種：
利用這個線上工具產生的圖片不處理的話裡面會是 <path> 路徑標籤，並且有描邊屬性，需要在AI裡處理一下，全選，去掉所有的描邊屬性。此時，再匯出的SVG檔案就是對應的多邊形標籤 <polygon> 了。
截止到這一步，我們的圖形處理部分就已經結束了，剩下的是動畫效果的實現
4. CSS3動畫
先說一下動畫實現的初步設想。我希望這些已經產生的多邊形片段進行旋轉、位移和尺寸的變化，這對CSS來說，也是很容易實現的一個效果，但我需要的是散布的不同效果，位移的方向不同，距離不同，縮放不同，可我這種JavaScript渣渣又不會寫隨機函數，還好CSS3提供了一個強大的選取器 nth-of-type(an+b) ，利用它，我可以賦予不同的多邊形片段不同的動畫屬性值。
簡單瞭解一下nth-of-type(an+b)，n從0開始取值，依次加1，所以你會得到第a+b個，2a+b個，3a+b個……元素。
比如，我希望我的 <polygon> 多邊形分成6組，每組設定不同的動畫屬性，我的寫法如下：
polygon:nth-of-type(6n+1){transform: translate(x , y) scale() rotate();}
這是順序為6n+1（即1,7,13,19……）的多邊形的動畫效果，同理，下一組為polygon:nth-of-type(6n+2)，即選擇了第2,8,14,20……個多邊形，依次向後推，直到polygon:nth-of-type(6n+6)
現在附上全部的代碼及注釋
結合下面的全部代碼說一下：
<html><head><style>/*以下為可複用的CSS代碼部分*/.cover{position: absolute;width: 800px; height: 445px; top: 20%;left: 20%;z-index: 2;}/*cover和svg的寬高位置都重合，唯一不同的是z-index屬性*/svg {position: absolute;width: 800px; height: 445px; top: 20%;left: 20%;overflow: visible;z-index: 1;}polygon{transition:all 1s ease;transform-origin: 50% 50%; }/*以下為設定的6組動畫效果*/.cover:hover + svg #lowpoly polygon:nth-of-type(6n+1){transform: translate(-400% , -400%) scale(1.5) rotate(100deg);opacity: .3}.cover:hover + svg #lowpoly polygon:nth-of-type(6n+2){transform: translate(800% , -400%) scale(1.1) rotate(200deg);opacity: .4;}.cover:hover + svg #lowpoly polygon:nth-of-type(6n+3){transform: translate(-800% , 400%) scale(1.2) rotate(200deg);opacity: .3;}.cover:hover + svg #lowpoly polygon:nth-of-type(6n+4){transform: translate(-400% , 800%) scale(1.4) rotate(200deg);opacity: .4}.cover:hover + svg #lowpoly polygon:nth-of-type(6n+5){transform: translate(400% , 400%) scale(1.3) rotate(100deg);opacity: .3}.cover:hover + svg #lowpoly polygon:nth-of-type(6n+6){transform: translate(800% , 400%) scale(1.2) rotate(200deg);opacity: .3}</style></head><body><p class="cover"></p><!--定義的觸發地區--><svg><g id="lowpoly">……此處為若干<polygon>標籤 即需要自行替換的部分</g></svg></body></html>
由於SVG在執行動畫效果後碎成滿屏，如果我們的動畫要設定成滑鼠移入破碎，滑鼠移出複原的效果，需要一個地區來進行動作的觸發，這就是我們定義cover的意義，且層級屬性要高於SVG屬性。
關於動畫效果的觸發，我用的是 :hover 滑鼠經過，需要其他觸發事件可以求助前端攻城獅。
svg的 overflow 屬性一定要定義為可見 visible ，以確動畫效果後超出svg尺寸的部分可見。
關於polygon的動畫屬性的設定，這種 transition:all 1s ease 表示所有的動畫時間為1s，緩動效果。 transform-origin: 50% 50% 定義了變換的原點為每個元素自己的center。
關於6組不同的動畫效果，我設定了位移translate，縮放scale，選擇rotate以及透明度opacity的變化。
這裡X軸和Y軸的位移，建議自己劃定一個範圍，值越大，擴散度越高，比如我的X和Y方向都是-800%~800%。另外關於旋轉的角度，rotate()，為了符合物理規律，位移的路徑越遠的旋轉的角度更大，反之亦然。
如果你想設定更多的不同的效果，只需要改nth-of-type(an+b)中n的係數a就可以了。
如果懶得修改嘗試，UI設計師在套用這個模板時，只需要把自己製作（或者自動產生）的 <polygon> 標籤進行替換就可以。比如我們試一下把那張背景圖套用進去，就能輕鬆得到下面這種動畫效果。
知識點總結
1.關於低多邊形lowpoly風格圖片的製作（重點為自己製作任意圖形）
2.CSS3選取器nth-of-type(an+b)的使用
【相關推薦】
1. CSS3免費視頻教程
2. 教你用CSS繪製標準的圓形圖案
3. 用css實現文本超鏈文字右邊加一個箭頭表徵圖
4. 關於H5和CSS3表單驗證的使用教程
5. CSS3完成一個方框圓角效果的代碼教程
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
