丰富您设计的10个CSS3效果库

jopen 10年前

Magic CSS3 Animations

Magic CSS3 Animations是一个CSS3动画包，拥有一些特效可以你的Web项目中免费使用。拥有像金光闪闪，角度，旋转，炸弹等特殊效果。使用简单，大部分的动画是跨浏览器兼容。

Animate.css

Animate.css是一个现成的CSS3的动画特效库。这个库拥有60个不同的动画效果。Once animate.min.css is included into your <head> document, you just need to add the animated class plus the name of the needed animation. Example with the Flash animation, the element class would be: class="animated flash".

Liffect

liffect是一个在线的列表动画生成工具，能够帮助你针对一个ul列表来生成动画效果，你可能会经常的看到如下的动画类型：

  • fadeIn
  • zoomIn
  • zoomOut
  • slideTop
  • slideDown
  • pageTop
  • pageRight
  • ...

所有的以上动画特效，都可以使用liffect轻松的生成。这个工具依赖jQuery和CSS3的动画来生成以上所有的特效。最重要的是能够根据你的特效选择自动生成HTML，CSS和javascript代码。而且提供了其它的选项来有效的控制动画，例如，延迟，CSS前缀等等。相信你能更加精细的控制动画的效果。

 
Effeckt.css

EFFECKT.CSS是一个集合了众多新鲜而又实用的的CSS/jQuery动画效果，这些都适用于网站或是移动APP的网页，比如一些AJAX弹出框动画、菜单动画、图片标题展示等等，这些特效动画都能给你的网站提升一定用户体验，而且简单实用。
Read the 9 goals of Effeckt.css and watch the project’s 22-second video on 油Tube to get a glimpse of Effeckt.css’s might bring int the future.
 

Animatable

该工具用于创建CSS3动画，创建的动画可以在任何平台或设备（包括Android、BlackBerry、iOS 和WebOS等）中的现代浏览器中运行。即便你不熟悉CSS，该工具也能帮助你创建多场景的CSS3动画。


Fancy Input

Fancy Input 这款 jQuery  插件不只是关注外观，同时在交互方面通过 CSS3 特性让文本输入域变得更有趣，更有吸引力。
 


Morf.js

Morf.js 提供了一组 JavaScript 方法用于加速 CSS3 的各种转换效果，支持的方法都在上图中，无需编写 CSS3 代码。

 

Easing Functions

Easing functions is something different from the reset. It's a generator to create different easing transition. You can specifies the speed of animation progresses to make it more realistic. You will get a CSS version too if it's possible to make it with CSS, otherwise, you will get a javascript version.


Hover.css

Hover.css 是一个利用CSS3创建动画鼠标悬停效果的集合。适用于任何Html元素，如按钮，图像等。
所有Hover.css效果利用一个单一的元素（在必要的一些伪元素的帮助），是自包含的，因此您可以轻松地复制和粘贴。

CSS3 Animations Plugin

CSS3 Animations plugin uses the great new features in CSS3 especially Animations. This plugin can animate your site with minimal effort. Just choose the animation effect what you like /you can choosey 35 different animations / and use it in your element in CSS. Animation may take place during a hover on an element of the mouse to display or hide elements but can run as from the beginning. It is up to you when the animation makes.
There are two different versions - Development (72kb in size) and a Minified (45kb in size) version.