H5 DIV分割與拼接（動畫拼接）

實現原理：定義容器div，此div中可包含任何內容。然後用這個div可轉殖4個div，插入到父容器中，並隱藏被轉殖div。這個時候，4個div其實是和容器div一模一樣的，每乙個div負責顯示容器div的一部分，便完成了div的拼接。

需要顯示div的某一部分，要用到 webkit 的私有 css 屬性 clip-path，此屬性功能很多，但現在只需要用到它的 polygon 函式，該函式根據頂點座標（可用百分比）連線成路徑，可得到乙個多邊形。

我們現在是把乙個大的div分成了4個小的div，每個小div都是乙個矩形，所以只需要給 polygon 函式4個頂點引數即可：

第乙個：-webkit-clip-path: polygon(0px 0px, 50% 0px, 50% 50%, 0px 50%);

第二個：-webkit-clip-path: polygon(50% 0px, 100% 0px, 100% 50%, 50% 50%);

第三個：-webkit-clip-path: polygon(0px 50%, 50% 50%, 50% 100%, 0px 100%);

第四個：-webkit-clip-path: polygon(50% 50%, 100% 50%, 100% 100%, 50% 100%);

這樣就得到了4個負責顯示不同區域的div，需要注意的是，雖然每個div只顯示出原來的1/4，但div實際大小不會變。

div切割已經完成了，還需要給它們乙個拼接動畫，可以用 js 實現動畫，但還是用css實現比較方便一點。

@keyframes t0 
to }@keyframes t1 
to }@keyframes t2 
to }@keyframes t3 
to }

css的 animation 屬性實現動畫效果，我們讓動畫500毫秒完成，並由快到慢：

animation: t0 .5s ease-out;

animation: t1 .5s ease-out;

animation: t2 .5s ease-out;

animation: t3 .5s ease-out;

全部都完成後，你可能會發現完成拼接之後是這樣的：

明顯有拼接的痕跡，這怎麼行呢？可以說出現這種情況的概率是50%，必須要解決才行。

這是因為我們在切割div時用的是百分比，當螢幕（視窗）畫素為奇數時就會出現這樣的問題，其實解決方法是多樣的，選擇乙個最簡單而且最好的吧。

就是完成拼接後將這4個div移除，顯示出原來隱藏的容易div即可，此方法還解決的dom元素冗餘的問題，實在不能再好。

因為動畫完成需要500毫秒，等 document 載入完成後500毫秒講它們移除：

settimeout(function()

}, 500);

完整**（未重構，搞清楚邏輯即可）：