看到了CSS碎片拼图这个效果，觉得效果十分赞，打算学习一下。
在查看源代码之前，思路是大概是运用animation进行各种变换，通过改变元素background-color来实现阴影的变化。并猜想是否可以通过svg来实现整个图形的运动与变换。
以下均在window下搜狗浏览器的高速模式下操作。f12打开调试工具，首先看到console中说明CSS的dpi并不对应这屏幕的dpi，所以使用dppx为单位。查看资料发现这应该是针对移动端的页面的，暂时不深入研究。有关资料：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> 本来想逆向出这种效果的实现，结果发现作者已经给出了超具体的流程，具体可参阅CSS碎片拼图的实现。
完
