看到了CSS碎片拼圖這個效果毙死，覺得效果十分贊珠移，打算學習一下硫眨。
在查看源代碼之前，思路是大概是運用animation進行各種變換尝胆，通過改變元素background-color來實現陰影的變化丧裁。并猜想是否可以通過svg來實現整個圖形的運動與變換。
以下均在window下搜狗瀏覽器的高速模式下操作含衔。f12打開調試工具煎娇，首先看到console中說明CSS的dpi并不對應這屏幕的dpi，所以使用dppx為單位贪染。查看資料發(fā)現這應該是針對移動端的頁面的缓呛，暫時不深入研究。有關資料：dpi杭隙，分辨率哟绊。
單位‘dppx’
頁面的主要結構是一個容器包含30個
<div class="shard-wrap">，這里出現了偽元素寺渗。有關資料：偽元素與偽類匿情、偽元素用法兰迫。
偽元素
animation來實現了每一塊三角形閃爍的效果汁果。
偽元素
shimmer
實現CSS碎片拼圖效果最重要的屬性是clip-path，這個屬性實現了圖形的裁剪效果玲躯。在效果中通過使用clip-path: polygon(x1 y1, x2 y2, x3 y3,...)來獲得所需三角形据德。例子如下：<pre><b><div class="triangle"></div>
.triangle{
width: 100px; height: 100px; background-color: #0AA;
clip-path: polygon(0 100%, 50% 0, 100% 100%);
-webkit-clip-path: polygon(0 100%, 50% 0, 100% 100%);
}
</b></pre>
三角形
.beauty{
width: 100px; height: 100px;
clip-path: polygon(0 100%, 50% 0, 100% 100%);
-webkit-clip-path: polygon(0 100%, 50% 0, 100% 100%);
}
</b></pre>
三角圖片
夏威夷烏鴉
clip-path還有一個隱藏屬性善玫，當作用于同一個元素的clip-path的坐標結構相同時，像clip-path:polygon(x1 y1, x2 y2, x3 y3)與clip-path:polygon(x4 y4, x5 y5, x6 y6)密强，它們內部都是3組坐標茅郎，結構相同，此時或渤，元素的animation能產生連貫的效果系冗。例子如下：<pre><b><img class='beauty' src="image/card-head.jpg" alt="" />.beauty{
width: 200px; height: 200px;
transition: all 1s;
clip-path: polygon(0 100%, 50% 0, 100% 100%);
-webkit-clip-path: polygon(0 100%, 50% 0, 100% 100%);
}
.beauty:hover{
clip-path: polygon(0 0%, 100% 0, 50% 50%);
-webkit-clip-path: polygon(0 0%, 100% 0, 50% 50%);
}</b></pre> 本來想逆向出這種效果的實現，結果發(fā)現作者已經給出了超具體的流程薪鹦，具體可參閱CSS碎片拼圖的實現掌敬。
完
