首页

关于

5个能够有效帮助你快速创建超棒CSS3动画效果的类库

如果你开发前端特效的话,肯定会首选javascript类库,例如,jQuery,使用它能够帮助你快速的帮助你生成兼容性相对良好的动画特效。或者,如果你对于兼容性没有太多的要求的话,你可以考虑使用性能更加优良的CSS3动画特效。大家可能还记得我们以前介绍过的 animate.css, Easingsliffect三个超棒的CSS3动画类库吧。今天我们这里总结了5款有效帮助你生成CSS3动画效果的类库和工具,希望大家喜欢!

Animate.css

5个能够有效帮助你快速创建超棒CSS3动画效果的类库

Liffect

5个能够有效帮助你快速创建超棒CSS3动画效果的类库

Easings

5个能够有效帮助你快速创建超棒CSS3动画效果的类库

Animatable

5个能够有效帮助你快速创建超棒CSS3动画效果的类库

Morf

5个能够有效帮助你快速创建超棒CSS3动画效果的类库

使用以上的CSS3动画类库可以帮助你快速的实现基于CSS3的动画,如果你有其它CSS3动画类库,请留言与我们分享 !

标签: css, css3, 动画, 特效, liffect, animate.css, animatable, morf.js

阅读更多

超酷的CSS3列表动画特效在线生成工具 - liffect

超酷的CSS3列表动画特效在线生成工具 - liffect

在线调试  在线演示

还记得我们曾经介绍过的开源CSS3动画CSS文件animate.css吗?使用它能够帮助你快速的编码CSS3动画效果。当然,如果你不喜欢自己编写CSS3动画效果代码的话,今天我们将介绍的另外一个在线代码生成工具 liffect肯定会成为你的最爱。

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

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

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

这里我们使用PageTop效果生成如下代码:

HTML

<ul…

标签: css, css3, 动画, 特效, liffect

阅读更多

使用javascript开发超棒的动画文字书写效果

使用javascript开发超棒的动画文字书写效果

在线演示  本地下载

今天我们将介绍一个来自script-tutorialsjavascript教程,在这个教程中,我们将介绍如何使用javascript来生成一个动画的文字书写效果。相信大家一定会喜欢!

HTML

    <div id="letter"></div>
<img id="inkwell1" src="inkwell1.gif" alt="inkwell1" />
<img id="inkwell2" src="inkwell2.gif" alt="inkwell2" />

<div id="letter_src">
A man named Grant once foi|und a box of old Papers…

标签: javascript, 动画, 动画文字书写, 文字书写, writing animation

阅读更多

【简报】一款使用静态图片生成动画的jQuery插件:JZoopraxiscope

使用静态图片制作动画的插件:JZoopraxiscope

在线演示

今天介绍的是一个帮助大家使用静态图片制作动画电影的jQuery插件  -  JZoopraxiscope

JZoopraxiscope是一个jQuery插件,灵感来自于第一台电影投影机。除了jQuery,同时也使用了jQuery UI并要求所有的帧都是水平放置的单一图片中。你只需要通过调用一个定义图片尺寸和帧的方法就可以让它开始正常工作了。 JZoopraxiscope 还提供了播放和停止按钮。虽然听起来比较复杂,但是只要你有足够多的灵感和创造力,你能将它发挥到极致。使用它不仅美化了你的页面,还更加的更突出了你的web页面内容和效果。还等什么,快来试试吧!

标签: 简报, jQuery, jQuery插件, 动画, animation, jquery ui, JZoopraxiscope

阅读更多

分享一个Javascript的keyframe动画类库 - Rekapi

分享一个Javascript的keyframe动画类库 - Rekapi

在线演示  在线调试 

今天我们带给大家一个javascript的keyframe动画类库 - Rekapi,使用这个类库你可以方便的构建基于<canvas>和DOM的动画效果。

什么是keyframe?

keyframe是一个使用指定时间点来定义状态的动画技巧。动画都被渲染成frame来显示到屏幕,keyframe允许你定义关键的点来支持动画变化动作。 

主要特性

  • 基于俩个js类库UnderscoreShifty 
  • 支持浏览器:IE7/8/9,现代浏览器
  • 支持node.js
  • Rekapi是对Kapi的重写,但不相同
  • 文档很全
Rekapi并不提供给你任何动画的功能,你可以自由的使用你喜欢的任何技术来生成动画。

标签: 动画, canvas, css3, rekapi

阅读更多

分享一个CSS3和jQuery实现的模糊显示效果 - 帮助你的访问用户更好的阅读内容

日期:2011/12/20  来源:GBin1.com

分享一个CSS3和jQuery实现的模糊显示效果 - 帮助你的访问用户更好的阅读内容

在线演示  本地下载

这个教程将实现一个页面部分内容突出显示效果, 大家可能经常见到一些页面组成内容比较多,可能会分散用户的关注点,使用部分内容突出显示,而模糊其它内容会使得用户能够比较专著的阅读页面中自己关心或者感兴趣的内容,今天这个突出内容显示效果就是为了解决这个问题而设计的。

在这个教程中,我们使用了CSS3的transition属性,所以你需要使用现代浏览器来浏览效果,比如:Safari和Chrome。

HTML标签

以下HTML标签包含了页面中需要显示的众多内容块:

<section class="ib-container" id="ib-container">
<article>
<header>
<h3><a href="#">Some…

标签: HTML, CSS, Javascript, JQuery, css3悬浮模糊效果, jQuery模糊悬浮, 模糊, 动画, box阴影, 文字阴影, blur, css3, transition, jquery, box shadow, text shadow, articles, scale, transform, animation

阅读更多

分享10个jQuery实现的超酷动态特效教程和插件

日期:2011/12/01  来源:GBin1.com

使用jQuery可以帮助你快速的实现一些非常酷的动态特效,有些时候能帮助你提高用户体验,有时候能够帮助你似的网站更加炫酷。例如在GBin1首页使用的标题宽度变化效,可以有效的帮助用户提高阅读的便利性,一个好的前端人员,应该时时刻刻站在用户的角度看待UI设计。

今天这里我们收集了10个使用特别动态效果的教程,希望大家能够喜欢,如果你能给我们留言,我们将会非常高兴的!

相关教程: 分享10个超酷的jQuery动画教程

1. 动态的标题背景特效

在这个教程中,作者介绍了如何使用jQuery来使你的标题背景动起来,这样使得你的网站更具有活力

分享10个jQuery实现的超酷动态特效教程和插件

在线演示

2. jQuery的 DJ英雄

使用jQuery实现的一个DJ英雄

分享10个jQuery实现的超酷动态特效教程和插件

3. jQuery API

jQuery文档中自带的一个动画应用的例子,如果你仔细研究的话,你会发现其中的奥秘。

分享10个jQuery实现的超酷动态特效教程和插件

4.一个自动移动的视差背景效果

帮助你生成一个视差的背景动画效果

分享10个jQuery实现的超酷动态特效教程和插件

标签: 动画, animation, jquery动画, jquery animation, 动画插件, 动画特效, jquery特效插件, jquery动态特效教程, jquery动态教程

阅读更多

标签

© Copywrite by gbin1.com, all rights reserved.