搜索
首页web前端css教程CSS3实现一个炫酷的lowpoly动画实例

本篇文章主要介绍了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
css怎么隐藏元素但不占空间css怎么隐藏元素但不占空间Jun 01, 2022 pm 07:15 PM

两种方法:1、利用display属性,只需给元素添加“display:none;”样式即可。2、利用position和top属性设置元素绝对定位来隐藏元素,只需给元素添加“position:absolute;top:-9999px;”样式。

原来利用纯CSS也能实现文字轮播与图片轮播!原来利用纯CSS也能实现文字轮播与图片轮播!Jun 10, 2022 pm 01:00 PM

怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯CSS也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助!

css3如何实现鼠标点击图片放大css3如何实现鼠标点击图片放大Apr 25, 2022 pm 04:52 PM

实现方法:1、使用“:active”选择器选中鼠标点击图片的状态;2、使用transform属性和scale()函数实现图片放大效果,语法“img:active {transform: scale(x轴放大倍数,y轴放大倍数);}”。

css3什么是自适应布局css3什么是自适应布局Jun 02, 2022 pm 12:05 PM

自适应布局又称“响应式布局”,是指可以自动识别屏幕宽度、并做出相应调整的网页布局;这样的网页能够兼容多个不同的终端,而不是为每个终端做一个特定的版本。自适应布局是为解决移动端浏览网页而诞生的,能够为使用不同终端的用户提供很好的用户体验。

css3动画效果有变形吗css3动画效果有变形吗Apr 28, 2022 pm 02:20 PM

css3中的动画效果有变形;可以利用“animation:动画属性 @keyframes ..{..{transform:变形属性}}”实现变形动画效果,animation属性用于设置动画样式,transform属性用于设置变形样式。

css3怎么设置动画旋转速度css3怎么设置动画旋转速度Apr 28, 2022 pm 04:32 PM

在css3中,可以利用“animation-timing-function”属性设置动画旋转速度,该属性用于指定动画将如何完成一个周期,设置动画的速度曲线,语法为“元素{animation-timing-function:速度属性值;}”。

css3线性渐变可以实现三角形吗css3线性渐变可以实现三角形吗Apr 25, 2022 pm 02:47 PM

css3线性渐变可以实现三角形;只需创建一个45度的线性渐变,设置渐变色为两种固定颜色,一个是三角形的颜色,另一个为透明色即可,语法“linear-gradient(45deg,颜色值,颜色值 50%,透明色 50%,透明色 100%)”。

一文了解CSS3中的新特性 ::target-text 选择器一文了解CSS3中的新特性 ::target-text 选择器Apr 12, 2022 am 11:24 AM

本篇文章带大家一起深入了解一下CSS3中的新特性::target-text 选择器,聊聊该选择器的作用和使用方法,希望对大家有所帮助!

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

将Eclipse与SAP NetWeaver应用服务器集成。

MinGW - 适用于 Windows 的极简 GNU

MinGW - 适用于 Windows 的极简 GNU

这个项目正在迁移到osdn.net/projects/mingw的过程中,你可以继续在那里关注我们。MinGW:GNU编译器集合(GCC)的本地Windows移植版本,可自由分发的导入库和用于构建本地Windows应用程序的头文件;包括对MSVC运行时的扩展,以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

WebStorm Mac版

WebStorm Mac版

好用的JavaScript开发工具