CSS3实现一个炫酷的lowpoly动画实例-css教程-PHP中文网

首页

web前端

css教程

CSS3实现一个炫酷的lowpoly动画实例

零下一度

May 13, 2017 pm 01:08 PM

本篇文章主要介绍了CSS3实现任意图片lowpoly动画效果实例，这是一个利用CSS3的动画属性实现的结合lowpoly（低多边形风格）的效果，主要利用了CSS3 transform属性的rotate旋转，translate移动，scale缩放

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

分步骤拆解：

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

我的原图是下面这种：

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

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

2. 图片的处理

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

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

导出SVG代码可以看到密密麻麻的多边形标签 c32be6ae7b55b2e3b096b12a7e719a36 。

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

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

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

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

利用这个在线工具生成的图片不处理的话里面会是 98953a78f52873edae60a617ec082494 路径标签，并且有描边属性，需要在AI里处理一下，全选，去掉所有的描边属性。此时，再导出的SVG文件就是对应的多边形标签 6f1cb7f8499a7e0f625f982868cbc44d 了。

截止到这一步，我们的图形处理部分就已经结束了，剩下的是动画效果的实现

4. CSS3动画

先说一下动画实现的初步设想。我希望这些已经生成的多边形碎片进行旋转、位移和尺寸的变化，这对CSS来说，也是很容易实现的一个效果，但我需要的是散布的不同效果，位移的方向不同，距离不同，缩放不同，可我这种JavaScript渣渣又不会写随机函数，还好CSS3提供了一个强大的选择器 nth-of-type(an+b) ，利用它，我可以赋予不同的多边形碎片不同的动画属性值。

简单了解一下nth-of-type(an+b)，n从0开始取值，依次加1，所以你会得到第a+b个，2a+b个，3a+b个……元素。

比如，我希望我的 6f1cb7f8499a7e0f625f982868cbc44d 多边形分成6组，每组设定不同的动画属性，我的写法如下：

polygon:nth-of-type(6n+1){transform: translate(x , y) scale() rotate();}

这是顺序为6n+1（即1,7,13,19……）的多边形的动画效果，同理，下一组为polygon:nth-of-type(6n+2)，即选择了第2,8,14,20……个多边形，依次向后推，直到polygon:nth-of-type(6n+6)

现在附上全部的代码及注释

结合下面的全部代码说一下：

<html>
<head>
<style>
/*以下为可复用的CSS代码部分*/
.cover{
position: absolute;
width: 800px;   
height: 445px;  
top: 20%;
left: 20%;
z-index: 2;
}
/*cover和svg的宽高位置都重合，唯一不同的是z-index属性*/
svg {
position: absolute;
width: 800px;   
height: 445px;      
top: 20%;
left: 20%;
overflow: visible;
z-index: 1;
}
polygon{
transition:all 1s ease;
transform-origin: 50% 50%;           
}
/*以下为设定的6组动画效果*/
.cover:hover + svg #lowpoly polygon:nth-of-type(6n+1){
transform: translate(-400% , -400%) scale(1.5) rotate(100deg);
opacity: .3
}
.cover:hover + svg #lowpoly polygon:nth-of-type(6n+2){
transform: translate(800% , -400%) scale(1.1) rotate(200deg);
opacity: .4;
}
.cover:hover + svg #lowpoly polygon:nth-of-type(6n+3){
transform: translate(-800% , 400%) scale(1.2) rotate(200deg);
opacity: .3;
}
.cover:hover + svg #lowpoly polygon:nth-of-type(6n+4){
transform: translate(-400% , 800%) scale(1.4) rotate(200deg);
opacity: .4
}
.cover:hover + svg #lowpoly polygon:nth-of-type(6n+5){
transform: translate(400% , 400%) scale(1.3) rotate(100deg);
opacity: .3
}
.cover:hover + svg #lowpoly polygon:nth-of-type(6n+6){
transform: translate(800% , 400%) scale(1.2) rotate(200deg);
opacity: .3
}
</style></head>
<body><p class="cover"></p><!--定义的触发区域-->
<svg>
<g id="lowpoly">
……此处为若干<polygon>标签 即需要自行替换的部分
</g>
</svg></body></html>

由于SVG在执行动画效果后碎成满屏，如果我们的动画要设置成鼠标移入破碎，鼠标移出复原的效果，需要一个区域来进行动作的触发，这就是我们定义cover的意义，且层级属性要高于SVG属性。

关于动画效果的触发，我用的是 :hover 鼠标经过，需要其他触发事件可以求助前端攻城狮。

svg的 overflow 属性一定要定义为可见 visible ，以确动画效果后超出svg尺寸的部分可见。

关于polygon的动画属性的设定，这种 transition:all 1s ease 表示所有的动画时间为1s，缓动效果。 transform-origin: 50% 50% 定义了变换的原点为每个元素自己的center。

关于6组不同的动画效果，我设定了位移translate，缩放scale，选择rotate以及透明度opacity的变化。

这里X轴和Y轴的位移，建议自己划定一个范围，值越大，扩散度越高，比如我的X和Y方向都是-800%~800%。另外关于旋转的角度，rotate()，为了符合物理规律，偏移的路径越远的旋转的角度更大，反之亦然。

如果你想设定更多的不同的效果，只需要改nth-of-type(an+b)中n的系数a就可以了。

如果懒得修改尝试，UI设计师在套用这个模板时，只需要把自己制作（或者自动生成）的 6f1cb7f8499a7e0f625f982868cbc44d 标签进行替换就可以

知识点总结

1.关于低多边形lowpoly风格图片的制作（重点为自己制作任意图形）

2.CSS3选择器nth-of-type(an+b)的使用

【相关推荐】

1. 特别推荐：“php程序员工具箱”V0.1版本下载

2. 免费css在线视频教程

3. php.cn独孤九贱（2）－css视频教程

以上是CSS3实现一个炫酷的lowpoly动画实例的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

@KeyFrames vs CSS过渡：有什么区别？May 14, 2025 am 12:01 AM

@keyframesandCSSTransitionsdifferincomplexity:@keyframesallowsfordetailedanimationsequences,whileCSSTransitionshandlesimplestatechanges.UseCSSTransitionsforhovereffectslikebuttoncolorchanges,and@keyframesforintricateanimationslikerotatingspinners.

使用页面CMS进行静态站点内容管理May 13, 2025 am 09:24 AM

我知道，我知道：有大量的内容管理系统选项可用，而我进行了几个测试，但实际上没有一个是一个，y＆＃039;知道吗？怪异的定价模型，艰难的自定义，有些甚至最终成为整个＆

链接HTML中CSS文件的最终指南May 13, 2025 am 12:02 AM

链接CSS文件到HTML可以通过在HTML的部分使用元素实现。1)使用标签链接本地CSS文件。2)多个CSS文件可通过添加多个标签实现。3)外部CSS文件使用绝对URL链接，如。4)确保正确使用文件路径和CSS文件加载顺序，优化性能可使用CSS预处理器合并文件。

CSS Flexbox与网格：全面评论May 12, 2025 am 12:01 AM

选择Flexbox还是Grid取决于布局需求：1)Flexbox适用于一维布局，如导航栏；2)Grid适合二维布局，如杂志式布局。两者在项目中可结合使用，提升布局效果。

如何包括CSS文件：方法和最佳实践May 11, 2025 am 12:02 AM

包含CSS文件的最佳方法是使用标签在HTML的部分引入外部CSS文件。1.使用标签引入外部CSS文件，如。2.对于小型调整，可以使用内联CSS，但应谨慎使用。3.大型项目可使用CSS预处理器如Sass或Less，通过@import导入其他CSS文件。4.为了性能，应合并CSS文件并使用CDN，同时使用工具如CSSNano进行压缩。

Flexbox vs Grid：我应该学习两者吗？May 10, 2025 am 12:01 AM

是的，youshouldlearnbothflexboxandgrid.1）flexboxisidealforone-demensional，flexiblelayoutslikenavigationmenus.2）gridexcelstcelsintwo-dimensional，confffferDesignssignssuchasmagagazineLayouts.3）blosebothenHancesSunHanceSlineHancesLayOutflexibilitibilitibilitibilitibilityAnderibilitibilityAndresponScormentilial anderingStruction

轨道力学（或我如何优化CSS KeyFrames动画）May 09, 2025 am 09:57 AM

重构自己的代码看起来是什么样的？约翰·瑞亚（John Rhea）挑选了他写的一个旧的CSS动画，并介绍了优化它的思维过程。

CSS动画：很难创建它们吗？May 09, 2025 am 12:03 AM

CSSanimationsarenotinherentlyhardbutrequirepracticeandunderstandingofCSSpropertiesandtimingfunctions.1)Startwithsimpleanimationslikescalingabuttononhoverusingkeyframes.2)Useeasingfunctionslikecubic-bezierfornaturaleffects,suchasabounceanimation.3)For

See all articles