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 响应式媒体查询的示例代码
Sep 25 HTML / CSS
CSS3教程(2):网页边框半径和网页圆角
Apr 02 HTML / CSS
CSS3属性background-size使用指南
Dec 09 HTML / CSS
CSS3实现千变万化的文字阴影text-shadow效果设计
Apr 26 HTML / CSS
css3 flex实现div内容水平垂直居中的几种方法
Mar 27 HTML / CSS
CSS3 中filter(滤镜)属性使用详解
Apr 07 HTML / CSS
HTML5 语义化结构化规范化
Oct 17 HTML / CSS
用html5实现语音搜索框的方法
Mar 18 HTML / CSS
html5使用canvas绘制一张图片
Dec 15 HTML / CSS
用HTML5制作一个简单的桌球游戏的教程
May 12 HTML / CSS
HTML5 解决苹果手机不能自动播放音乐问题
Dec 27 HTML / CSS
HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码
Apr 10 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
php下获取Discuz论坛登录用户名、用户组、用户ID等信息的实现代码
2010/12/29 PHP
PHP生成不同颜色、不同大小的tag标签函数
2013/09/23 PHP
php实现在线通讯录功能(附源码)
2016/05/13 PHP
详谈配置phpstorm完美支持Codeigniter(CI)代码自动完成(代码提示)
2017/04/07 PHP
JavaScript入门教程(8) Location地址对象
2009/01/31 Javascript
javascript小数四舍五入多种方法实现
2012/12/23 Javascript
js弹出层包含flash 不能关闭隐藏的2种处理方法
2013/06/17 Javascript
鼠标焦点离开文本框时验证的js代码
2013/07/19 Javascript
Get中文乱码IE浏览器Get中文乱码解决方案
2013/12/26 Javascript
Flash图片上传组件 swfupload使用指南
2015/03/14 Javascript
js变形金刚文字特效代码分享
2015/08/20 Javascript
使用JQuery在线制作ppt并在线演示源码特效
2015/09/08 Javascript
JS实现可关闭的对联广告效果代码
2015/09/14 Javascript
JavaScript中的闭包
2016/02/24 Javascript
Node.js连接MongoDB数据库产生的问题
2017/02/08 Javascript
JS库之Highlight.js的用法详解
2017/09/13 Javascript
js实现随机点名系统(实例讲解)
2017/10/18 Javascript
Vue.js2.0中的变化小结
2017/10/24 Javascript
JS数组实现分类统计实例代码
2018/09/30 Javascript
JavaScript常见事件处理程序实例总结
2019/01/05 Javascript
js实现文章目录索引导航(table of content)
2020/05/10 Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
2020/09/22 Javascript
[22:07]DOTA2-DPC中国联赛 正赛 iG vs Magma 选手采访
2021/03/11 DOTA
python通过字典dict判断指定键值是否存在的方法
2015/03/21 Python
基于python绘制科赫雪花
2018/06/22 Python
python修改txt文件中的某一项方法
2018/12/29 Python
python新手学习可变和不可变对象
2020/06/11 Python
python 如何停止一个死循环的线程
2020/11/24 Python
css3 响应式媒体查询的示例代码
2019/09/25 HTML / CSS
宝拉珍选官方旗舰店:2%水杨酸精华液,收缩毛孔粗大和祛痘
2018/07/01 全球购物
印尼第一大家居、生活和家具电子商务:Ruparupa
2019/11/25 全球购物
班干部演讲稿
2014/04/24 职场文书
优秀求职信
2014/05/29 职场文书
面试自我评价范文
2014/09/17 职场文书
司法局群众路线教育实践活动开展情况总结
2014/10/25 职场文书
MySQL中一条SQL查询语句是如何执行的
2022/04/08 MySQL