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


Posted in HTML / CSS onMay 11, 2017

这是一个利用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)的使用  

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
纯CSS3实现3D旋转书本效果
Mar 21 HTML / CSS
7款设计巧妙的css3飘带状3D立体效果的导航菜单和表单窗口
Feb 04 HTML / CSS
用CSS3实现Win8风格的方格导航菜单效果
Apr 10 HTML / CSS
使用css3和jquery实现可伸缩搜索框
Feb 12 HTML / CSS
用CSS3的box-reflect设置文字倒影效果的方法讲解
Mar 07 HTML / CSS
css3翻牌翻数字的示例代码
Feb 07 HTML / CSS
传统HTML页面实现模块化加载的方法
Oct 15 HTML / CSS
基于 HTML5 WebGL 实现的垃圾分类系统
Oct 08 HTML / CSS
HTML5 预加载让页面得以快速呈现
Aug 13 HTML / CSS
HTML5+CSS设置浮动却没有动反而在中间且错行的问题
May 26 HTML / CSS
Html5移动端div固定到底部实现底部导航条的几种方式
Mar 09 HTML / CSS
Css预编语言及区别详解
Apr 25 HTML / CSS
利用纯CSS3实现文字向右循环闪过效果实例(可用于移动端)
Jun 15 #HTML / CSS
css3图片边框border-image的用法
Jun 30 #HTML / CSS
css3 border-radius属性详解
Jul 05 #HTML / CSS
详解纯CSS3制作的20种loading动效
Jul 05 #HTML / CSS
css3模拟jq点击事件的实例代码
Jul 06 #HTML / CSS
css3截图_动力节点Java学院整理
Jul 11 #HTML / CSS
css3过渡_动力节点Java学院整理
Jul 11 #HTML / CSS
You might like
一个可以删除字符串中HTML标记的PHP函数
2006/10/09 PHP
PHP处理大量表单字段的便捷方法
2015/02/07 PHP
PHP实现搜索地理位置及计算两点地理位置间距离的实例
2016/01/08 PHP
用Javascript数组处理多个字符串的连接问题
2009/08/20 Javascript
深入理解JavaScript系列(13) This? Yes,this!
2012/01/18 Javascript
解析js原生方法创建表格效率测试
2013/07/08 Javascript
使用js实现按钮控制文本框加1减1应用于小时+分钟
2013/12/09 Javascript
全屏滚动插件fullPage.js使用实例解析
2016/10/21 Javascript
echarts3 使用总结(绘制各种图表,地图)
2017/01/05 Javascript
Express框架之connect-flash详解
2017/05/31 Javascript
微信小程序实现滴滴导航tab切换效果
2018/07/24 Javascript
解决vue 单文件组件中样式加载问题
2019/04/24 Javascript
微信小程序页面间传值与页面取值操作实例分析
2019/04/30 Javascript
彻底揭秘keep-alive原理(小结)
2019/05/05 Javascript
vue页面切换项目实现转场动画的方法
2019/11/12 Javascript
解决Vue-Router升级导致的Uncaught (in promise)问题
2020/08/07 Javascript
[01:14:34]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第一局
2016/02/28 DOTA
Python 结巴分词实现关键词抽取分析
2017/10/21 Python
python获取命令行输入参数列表的实例代码
2018/06/23 Python
Python PyAutoGUI模块控制鼠标和键盘实现自动化任务详解
2018/09/04 Python
python画图——实现在图上标注上具体数值的方法
2019/07/08 Python
Django 在iframe里跳转顶层url的例子
2019/08/21 Python
python3中使用__slots__限定实例属性操作分析
2020/02/14 Python
IE9下html5初试小刀
2010/09/21 HTML / CSS
H5页面适配iPhoneX(就是那么简单)
2019/12/02 HTML / CSS
如何在Canvas上的图形/图像绑定事件监听的实现
2020/09/16 HTML / CSS
怎样声明一个匿名的内部类
2016/06/01 面试题
房地产还款计划书
2014/01/10 职场文书
关于护士节的演讲稿
2014/05/26 职场文书
财务检查整改报告
2014/11/06 职场文书
春秋淹城导游词
2015/02/11 职场文书
中学生清明节演讲稿
2015/03/18 职场文书
2015教师个人工作总结范文
2015/03/31 职场文书
2015年办公室人员工作总结
2015/05/15 职场文书
放假通知怎么写
2015/08/18 职场文书
小学六年级班主任工作经验交流材料
2015/11/02 职场文书