CSS3实现任意图片lowpoly动画效果实例

这是一个利用CSS3的动画属性实现的结合lowpoly（低多边形风格）的效果，主要利用了CSS3 transform属性的rotate旋转，translate移动，scale缩放，CSS代码部分非常简单，唯一有趣的是 nth-of-type选择器的使用，这里UI设计师小伙伴不用望而却步，CSS部分完全可以拿来复用并根据自己的要求随意改变参数（所有不能复用的SVG动画代码都是耍流氓），然后，UI设计师再搭配上自己熟悉的AI利器，就可以完美的实现下面的效果了。

分步骤拆解：

1. 低多边形风格的图片的制作

我的原图是下面这种：

随手从电脑上找了一张背景图，然后借助一个神器 Image Triangulator，不得不感慨，这个工具真是太好用了，各位设计师需要做的只是在图片上打点（我是为了测试，很粗糙的添加了顶点，如果需要得到很出彩的效果，需要在明暗分隔的边缘精细添加）。

然后导出的pdf格式的文件，就可以用AI打开了。

2. 图片的处理

这里在AI里需要一步重要的操作， “释放剪切蒙版” ，如果不进行这步操作，生成的SVG代码里会有大量的路径裁剪遮罩标签 <clipPath> 以及polygon的clip-path属性。

释放剪切路径后选中图形就可以看到此时图片已经由一个个三角形色块组成了。

导出SVG代码可以看到密密麻麻的多边形标签 <polygon fill="" points=""/> 。

Image Triangulator生成lowpoly风格的图片；AI处理，释放剪切蒙版

此处需注意，这个软件生成的PDF是带未处理的底图的，SVG文件里有 <img> 标签，所以边缘那里可以多加几个点，或者截取掉一部分，防止边缘出现镂空。

3. 在线生成的低多边形背景图片的处理

如果需要的仅是一个背景图，建议使用网站 http://qrohlf.com/trianglify-generator/ ，可以自定义尺寸、颜色和晶格大小，支持生成SVG格式。比如下面这种：