杰晶网络

CSS3实现任意图片lowpoly动画效果实例
网页制作 2024/11/23 佚名
3 2

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

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

分步骤拆解：

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

我的原图是下面这种：

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

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

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

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

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

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

2. 图片的处理

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

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

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

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

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

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

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

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

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

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

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

4. CSS3动画

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

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

比如，我希望我的 <polygon> 多边形分成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><div class="cover"></div><!--定义的触发区域-->
<svg>
<g id="lowpoly">
……此处为若干<polygon>标签 即需要自行替换的部分
</g>
</svg></body></html>

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

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

关于动画效果的触发，我用的是 :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设计师在套用这个模板时，只需要把自己制作（或者自动生成）的 <polygon> 标签进行替换就可以。比如我们试一下把那张背景图套用进去，就能轻松得到下面这种动画效果。

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

知识点总结

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

标签：
CSS3,,lowpoly，CSS3实现lowpoly动画，css3实现lowpoly
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
评论“CSS3实现任意图片lowpoly动画效果实例”
暂无“CSS3实现任意图片lowpoly动画效果实例”评论...
www.imxmx.com 杰晶网络
8,675无损音乐
1,324高清电影
213破解软件
120,141站长资源
一句话新闻
苹果官宣WWDC 2024！预计会有大批AI功能 - 2024/11/23

3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。

苹果官方表示：

在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。

探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。

Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新动态

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网