电脑技术网——专业手机电脑知识平台,关注科技、手机、电脑、智能硬件
HTMLCSSHTML5Bootstrap

CSS3如何让反之亦然图片lowpoly动画效果的构建互动

2021-01-27 22:00:03 出处:[ 菜菜电脑网 ] 人气:次阅读
本篇文章主要简述了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代码里可能会有大量的路径拼接的移动标签 <clipPath> 以及polygon的clip-path属性。

无罪释放剪切路径后选入图形就可以认出此时图片已经由一个个三角形色块组合成了。

等价SVG代码可以看着密密麻麻的多边形标签 <polygon fill="" points=""/>

Image Triangulator转化成lowpoly风格的图片;AI解决问题,拘押剪切蒙版

此处需注意,这个软件转化成的PDF是上头Pardosa的底图的,SVG文件里有 <img> 标签,所以边缘那里可以多加在几个点,或者除此以外掉一部分,能避免边缘经常出现镂空。

3. 在线填充的较差多边形背景图片的处理事件

如果需的仅是一个背景图,可以自定义尺寸、颜色和晶格大小,拥护降解SVG格式。比如下面这种:

利用这个在线工具降解的图片不妥善处理的话里面可能会是 <path> 路径标签,并且有描边属性,所需在AI里处理过程一下,全选,替换成所有的描边属性。此时,再假定的SVG文件就是对应的多边形标签 <polygon> 了。

月份到这一步,我们的图形处理部分就已经中止了,都已的是动画效果的借助

4. CSS3动画

先说是一下动画构建的初步设想。我决心这些已经填充的多边形碎片开展翻转、侧向和尺寸的变化,这对CSS来说,也是很较难意味着的一个效果,但我能够的是隐匿的有所不同效果,轴向的方向不同,距离不尽相同,放大并不相同,可我这种JavaScript渣渣又才会写就随机函数,刚才CSS3缺少了一个强劲的选择器 nth-of-type(an+b) ,利用它,我可以象征性各不相同的多边形碎片完全相同的动画属性值。

恰当探究一下nth-of-type(an+b),n从0开始q,依次赞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><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设计师在套用这个模板时,只必须把自己制作(或者自动填充)的 <polygon> 标签展开更换就可以。比如我们试一下把那张背景图套用外面,就能精采取得下面这种动画效果。

知识点总结

1.关于较高多边形lowpoly风格图片的制作(重点为自己制作取值图形)

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

以上就是CSS3如何让假定图片lowpoly动画效果的借助于交友的简要内容,更多商量追捧php中文网其它方面文章!

关于我们 - 广告合作 - 联系我们 - 免责声明 - 网站地图 - 投诉建议 - 在线投稿

©CopyRight 2008-2020 caicaipc.com Inc All Rights Reserved.
菜菜电脑网 版权所有 联系QQ:173533152