看到了CSS碎片拼圖這個(gè)效果，覺得效果十分贊，打算學(xué)習(xí)一下。
在查看源代碼之前，思路是大概是運(yùn)用animation進(jìn)行各種變換，通過改變元素background-color來實(shí)現(xiàn)陰影的變化。并猜想是否可以通過svg來實(shí)現(xiàn)整個(gè)圖形的運(yùn)動(dòng)與變換。
以下均在window下搜狗瀏覽器的高速模式下操作。f12打開調(diào)試工具，首先看到console中說明CSS的dpi并不對(duì)應(yīng)這屏幕的dpi，所以使用dppx為單位。查看資料發(fā)現(xiàn)這應(yīng)該是針對(duì)移動(dòng)端的頁面的，暫時(shí)不深入研究。有關(guān)資料：dpi，分辨率。
單位‘dppx’
頁面的主要結(jié)構(gòu)是一個(gè)容器包含30個(gè)
<div class="shard-wrap">，這里出現(xiàn)了偽元素。有關(guān)資料：偽元素與偽類、偽元素用法。
偽元素
animation來實(shí)現(xiàn)了每一塊三角形閃爍的效果。
偽元素
shimmer
實(shí)現(xiàn)CSS碎片拼圖效果最重要的屬性是clip-path，這個(gè)屬性實(shí)現(xiàn)了圖形的裁剪效果。在效果中通過使用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還有一個(gè)隱藏屬性，當(dāng)作用于同一個(gè)元素的clip-path的坐標(biāo)結(jié)構(gòu)相同時(shí)，像clip-path:polygon(x1 y1, x2 y2, x3 y3)與clip-path:polygon(x4 y4, x5 y5, x6 y6)，它們內(nèi)部都是3組坐標(biāo)，結(jié)構(gòu)相同，此時(shí)，元素的animation能產(chǎn)生連貫的效果。例子如下：<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> 本來想逆向出這種效果的實(shí)現(xiàn)，結(jié)果發(fā)現(xiàn)作者已經(jīng)給出了超具體的流程，具體可參閱CSS碎片拼圖的實(shí)現(xiàn)。
完
