CSS碎片实现

看到了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>

三角形

　　当然，也可以裁剪图片。例子如下：<pre><b><img class='beauty' src="image/card-head.jpg" alt="" />
.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碎片拼图的实现。
　　完

CSS碎片实现

推荐阅读更多精彩内容