整理一些有用的前端资源
- Animate.css
http://daneden.github.io/animate.css/ - CSS3 Animation
一个非常简单易用的动效工具http://css3gen.com/css3-animation/ - CSS Animate
如果你觉得上面的工具还无法做出你想要的动效,那么可以看看CSS Animate这个工具。它能让你设置更多的动效参数 http://cssanimate.com - Magic Animations
Magic Animations与Animate.css十分类似,也是一个预定义了一系列动效的CSS库。但与Animate.css的最大区别可能是,它定义的那些动效更炫也更酷一些,如果你的网站也很新潮,那可以考虑使用这个CSS动效库。http://www.minimamente.com/example/magic_animations/ - Single Element CSS Spinners
一组非常漂亮的可用于加载的CSS3动效。http://projects.lukehaas.me/css-loaders/ - Odometer
用来给数字作动效的,比如通过它你可以很好地呈现网站人数的增加,倒计时等与数字相关的动画效果。http://github.hubspot.com/odometer/docs/welcome/ - Hover.css
提供了大量的Hover效果,包括2D变换,图标变换,背景变换等等。而且几乎可以应用于所有元素,包括链接,按钮,logo,SVG甚至图片等等。http://ianlunn.github.io/Hover/ - hint.css
为HTML元素添加提示的纯CSS库。虽然Hint体积非常小,但是我们仍然做到了可自定义,比如大小,颜色和动画。它不需要一行代码,提示是通过添加data属性创建的。 http://kushagragour.in/lab/hint/
- AniJS
一个通过JavaScript控制的动效库。它允许你通过它的链式语法来定义动效。比如下面这个例子:当用户点击时这个元素会沿Y轴翻转。http://anijs.github.io - Sanbbt.js
它非常小巧只有5K,所以可以被用在移动应用中。而且它也支持链式语法,你可以很方便地写出复杂的动效组合。http://daniel-lundin.github.io/snabbt.js/ - Bounce.js
Bounce.js是一个能够生成CSS3动效的小工具,它是用JavaScript编写的,提供了一个Web界面 http://bouncejs.com - modaal
Modaal是一个创建弹出窗口的jQuery插件。提供丰富的功能。 http://humaan.com/modaal/ - flipside
这是一个能过渡到对话框的按钮。它最酷的地方在于过渡动画,点击按钮的不同部分,动画效果是不一样的。Flipside并不是一个正式的库,但是我们喜欢这种效果所以还是分享了出来。如果你想使用,GitHub上有源码。 http://lab.hakim.se/flipside/ - select2
选择控件的样式在不同的浏览器之间仍然是一个烦人的问题。不过幸好有Select2这样的插件处理这样的问题。这个库还有一些额外的功能,比如搜索,无限滚动以及对IE8的支持 https://select2.github.io/ - vex
一个很小的jQuery 插件,可以实现3D动效的弹出对话框堆叠效果。压缩后只有2kb,所以不会给项目造成任何负担。有多个主题,你也可以自己添加自定义效果。 http://github.hubspot.com/vex/docs/welcome/ - atrament.js
网页绘画板 https://github.com/jakubfiala/atrament.js