资讯专栏INFORMATION COLUMN

走在 SVG + Low Poly 的路上

Flink_China / 494人阅读

摘要:那强大在哪呢,大家通过下面的图来感受一下。但手绘的时候尤其要小心,三角形的顶点要对齐。制作成之后,在使用的时候要注意,三角形之间是会有缝隙的,尽量放在同一色系的背景之上,这样会显得不明显。

随着 SVG 的发展,艺术家和设计师们把越来越多传统设计行业的东西引入了前端, low poly 就是其中之一。那 low poly 强大在哪呢,大家通过下面的图来感受一下。

恰巧我们产品 Logo 也用了部分 low poly 的手法,下面是我做的 demo 。

https://jsfiddle.net/windwhinny/j4997b3a

现在制作 low poly 最好的方法,就是手绘,虽然有一些工具可以将普通图片制作成 low poly,但效果往往都不怎么理想。设计师手绘可以保证图片突出的内容(比如眼睛)可以得到精细的绘制,这点计算机是很难把握的。但手绘的时候尤其要小心,三角形的顶点要对齐。

制作成 svg 之后,在使用的时候要注意,三角形之间是会有缝隙的,尽量放在同一色系的背景之上,这样会显得不明显。

动画的原理蛮简单的,就是把元素按照一定的顺序做放大/缩小的动画,动画的 time function 可以参考我之前的一篇文章 新时代前端必备神器 Snap.svg 之弹动效果,然后每个元素动画之间延迟个零点几秒就行了。

再然后就是性能问题了,对于移动产品来说,这个量级的动画肯定是有些吃力的。而对于桌面浏览器来说,也不适合放在 DOM 复杂的页面里,宣传页之类的页面倒是比较合适。

文章内容来自 https://css-tricks.com/polylion/

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/111028.html

相关文章

  • 走在 SVG + Low Poly 路上

    摘要:那强大在哪呢,大家通过下面的图来感受一下。但手绘的时候尤其要小心,三角形的顶点要对齐。制作成之后,在使用的时候要注意,三角形之间是会有缝隙的,尽量放在同一色系的背景之上,这样会显得不明显。 随着 SVG 的发展,艺术家和设计师们把越来越多传统设计行业的东西引入了前端, low poly 就是其中之一。那 low poly 强大在哪呢,大家通过下面的图来感受一下。 showImg(ht...

    王笑朝 评论0 收藏0
  • JDK11新特性解读

    摘要:千呼万唤,于正式发布版本即,也就是官方推荐可以广泛使用的版本,其中发布了包括等个新特性,让我们一睹为快。一新特性一览二发布计划日期阶段说明对进入阶段的变化会应用越来越严格的审查。我们需要支持以保持竞争力并与最新标准保持同步。 千呼万唤,JDK11于2018-09-25正式发布GA版本(GA即General Availability,也就是官方推荐可以广泛使用的版本),其中发布了包括ZG...

    piglei 评论0 收藏0
  • Python 入门演示

    摘要:集合的长度向集合中添加元素集合的交并差对称差字典用来生成。用数组做参数可以在定义时指定参数的默认值模块中使用关键词来导入模块。表示继承自类函数用来初始化对象表示对象自身,类似于里面。 简单的数学运算 整数相加,得到整数: 2 + 2 4 浮点数相加,得到浮点数: 2.0 + 2.5 4.5 整数和浮点数相加,得到浮点数: 2 + 2.5 4.5 变量赋值 Python...

    I_Am 评论0 收藏0
  • 【轻松集赞】写了个涉嫌混淆微信官方服务小程序

    摘要:吃饱喝足,两个人扶着腰走在路上炫腹还是女盆友的提醒说,你不是会小程序吗,能不能写一个点赞的小程序来用。哎还真是,我自己撸一个也是阔以的,说不定还能给其他人用。比较适合想要练手小程序和的童鞋全部的代码还请移步我的欢迎和。 showImg(https://segmentfault.com/img/remote/1460000015245489?w=530&h=153); 发生背景:    ...

    xiao7cn 评论0 收藏0
  • 你知道SVG Sprites是什么吗,还在用css sprite就太low

    摘要:它是基于,由联盟进行开发的。是一种采用来描述二维图形的语言这个大家都知道,那么元素是什么呢单纯翻译的话,是符号的意思,然我的理解是元素用来定义一个图形模板对象,它可以用一个元素实例化。 showImg(https://segmentfault.com/img/bVbhAl9?w=1278&h=722);   大家好,这里是@IT·平头哥联盟,我是首席填坑官——苏南(South·Su),...

    fevin 评论0 收藏0

发表评论

0条评论

Flink_China

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<