小图标大动画

原创文章 分类: 教程 版权:
1503 12 25 3
2017-03-21
11.4

      通常情况下,我们一提到图标,往往联想到的是它的设计规范,比如尺寸,颜色线性或着多色等等。那么,今天要来介绍一下我们经常用的图标icon动画效果的展示,在一个界面里动画确实不宜过多,但是某些“小物件”的动效确实能起到带动整个页面的效果。那么这些小物件是什么,可以是按钮输入框等小组件,甚至可以更小到图标的动画设计。随着技术到不断完善和更新,很多特效得以实践运用,这里整理了一些图标的动画,借给各位UI童鞋们参考。

PS:这并不是什么实际教程,这类文章的意义就是——“看看”(捂脸)。

这些图标动画是基于mo.js制作的一组炫酷图标动画特效,它们使用font-awesome作为图标【你可以自己制作一套字体图标,然后这些动画就交给强大的MO吧】,采用SVG技术,在用户点击图标时产生各种炫酷的图标动画特效。

Image title

Image title

Image title

Image title

Image title

Image title

Image title

Image title

这是抽取了其中一些,眼睛看累了就去预览下方地址查看完整页面,小图标能迸发出大设计,在这个模版化日益严重的时代,需要什么样的理念去设计呢,这是一个目前大部分设计师都会面临的一个大难题。

预览地址:https://jiangly1.github.io/h5/icons/index.html

这些图标是可以直接应用到项目的, PC兼容性是在IE10+,移动端更加梅闻啼。

再来一波彩蛋吧,爆破关闭特效,ps:这是真的登录,基于SVG和CSS3,不是动效软件制作的展示!

Image title

预览地址:https://jiangly1.github.io/h5/caidan/index.html


尾言

哈哈,没有什么,只是持续发布最新H5动效CODE分享......。










蒋小鱼

科学与艺术的结合-UI设计

118粉丝/8关注

SVG矢量图动画效果文字动效设计

蒋小鱼

蒋小鱼

科学与艺术的结合-UI设计

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2017 UI.CN