CSS3如何分享任何lowpoly动画效果？
这是通过使用CSS3的动画属性组合lowpoly(低多边形样式)的效果。它主要利用了CSS3变换属性的旋转、平移和缩放，CSS代码部分非常简单。唯一有趣的事情是使用了第n种类型的选择器，UI设计人员不必因此而气馁。CSS部分可以复用，参数可以根据自己的要求随意更改(不能复用的SVG动画代码都是耍流氓)，然后，UI设计师用自己熟悉的AI武器就可以完美的实现以下效果。
分步拆卸:
1.制作低多边形风格的图片
我的原图如下:
我从电脑里找到了一张背景图，然后用了一个神器图像三角仪。不得不觉得这个工具真的很好用。设计师需要做的只是在图片上打点(我粗略地添加了顶点是为了测试，如果需要获得辉煌的效果，我需要在明暗分离的边缘小心地添加)。
然后导出的pdf文件就可以用AI打开了。
2.图片处理
这里需要AI中的一个重要操作，“释放裁剪遮罩”。如果不执行这个操作，在生成的SVG代码中会有大量的路径剪辑蒙版标签< clipPath & gt和多边形的裁剪路径属性。
释放裁剪路径后，可以看到图片已经由三角形色块组成。
导出SVG代码时，可以看到密集的多边形标签
图像三角化器生成低多边形风格的图片；人工智能处理，释放剪辑蒙版
这里需要注意的是，该软件生成的PDF包含未处理的底图，而SVG文件包含
3.处理在线生成的低多边形背景图像。
如果只需要一张背景图，可以自定义大小、颜色、点阵大小，支持SVG格式的生成。例如，以下内容:
这个在线工具生成的图片将
至此，我们的图形处理部分已经结束，剩下的就是动画效果的实现了。
4.CSS3动画
先说动画变现的最初想法。我希望这些生成的多边形碎片在旋转、位移、大小上发生变化，这也是CSS容易做到的效果，但是我需要的是分散、不同位移方向、不同距离、不同尺度的不同效果，而我这个JavaScript渣渣写不出随机函数。幸运的是，CSS3提供了一个强大的选择器n-of-type(an+b)，用它我可以给出不同的。
简单看一下n-of-type(an+b)，其中n从0开始，然后加上1，这样就会得到a+b，2a+b和3a+b元素。
例如，我希望我的
polygon:n-of-type(6n+1){ transform:translate(x，y)scale()rotate()；}这是顺序为6n+1(即1，7，13，19)的多边形的动画效果。同样，下一组是polygon:n-of-type(6n+2)，即选择第2、第8、第6544。
现在附上所有的代码和注释。
组合以下所有代码:
& lthtml & gt
& lthead & gt
& ltstyle & gt
/*以下是可重用的CSS代码部分*/
。封面{
位置:绝对；
宽度:800px
身高:445px
top:20%；
左:20%；
z指数:2；
}
/*cover和svg的宽度和高度位置是一致的，唯一的区别是z-index属性*/
svg {
位置:绝对；
宽度:800px
身高:445px
top:20%；
左:20%；
溢出:可见；
z指数:1；
}
多边形{
过渡:所有1的轻松；
变换-原点:50% 50%；
}
/*设置了以下六组动画效果*/
。cover:hover+SVG # low poly polygon:n-of-type(6n+1){
变换:平移(-400%，-400%)缩放(1.5)旋转(100 deg)；
不透明度:. 3
}
。cover:hover+SVG # low poly polygon:n-of-type(6n+2){
变换:平移(800%，-400%)缩放(1.1)旋转(200度)；
不透明度:. 4；
}
。cover:hover + svg #lowpoly多边形:n个类型(6n+3){
变换:平移(-800%，400%)缩放(1.2)旋转(200度)；
不透明度:. 3；
}
。cover:hover + svg #lowpoly多边形:n个类型(6n+4){
变换:平移(-400%，800%)缩放(1.4)旋转(200度)；
不透明度:. 4
}
。cover:hover+SVG # low poly polygon:n-of-type(6n+5){
变换:平移(400%，400%)缩放(1.3)旋转(100 deg)；
不透明度:. 3
}
。cover:hover + svg #lowpoly多边形:n个类型(6n+6){
变换:平移(800%，400%)缩放(1.2)旋转(200度)；
不透明度:. 3
}
& lt/style & gt；& lt/head & gt；
& ltbody & gt& ltp class="cover " >& lt/p & gt；& lt！-定义的触发区域-& gt；
& ltsvg & gt
& ltg id="lowpoly " >
这里有一些
& lt/g & gt；
& lt/SVG & gt；& lt/body & gt；& lt/html & gt；由于SVG在进行动画效果后被破成全屏，如果我们的动画要设置成鼠标移入破，鼠标移出复原的效果，我们需要一个区域来触发动作。这就是定义cover的意义，层次属性高于SVG属性。
至于动画效果的触发，我用的是:悬停鼠标经过，如果需要其他触发事件，可以找前端攻城狮帮忙。
svg的overflow属性必须定义为visible，以确保超出svg大小的部分在动画后可见。
关于多边形动画属性的设置，这个转场:all 1s ease是指所有动画时间都是1s，是慢动作效果。Transform-origin: 50% 50%将变换的原点定义为每个元素的中心。
对于六种不同的动画效果，我设置了平移，缩放比例，选择旋转和改变透明度。
在这里，我建议我为X轴和Y轴的位移定义一个范围。值越大，扩散越高。比如我的X，Y方向是-800%~800%。另外，关于旋转角度，rotate()，为了符合物理规律，偏置路径越远，旋转角度越大，反之亦然。
如果想设置更多不同的效果，只需在n-of-type(an+b)中改变n的系数A即可。
如果你懒得去尝试修改，UI设计师只需要自己制作(或者自动生成)
知识点总结
1.关于用低多边形制作低多边形风格的图片(专注于为自己制作任意图形)
2.在2中使用第n种类型(an+b)。CSS3选择器。