首页风格
门户
博客

GBin1博客视图 - 最近发布的文章-demo

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

阅读更多

使用jQuery timelinr和animate.css创建超酷的CSS动画时间轴特效

使用jQuery timelinr和animate.css创建超酷的CSS动画时间轴特效

在线演示1  在线演示2  本地下载

在过去我们的文章中,我们介绍过很多不错的时间轴插件,使用这些超棒的插件可以帮助你创建动感漂亮的时间轴展示,其中比较不错的插件如下:

使用以上jQuery插件或者类库都可以创建漂亮的时间轴timline特效。

由于在我们的gbtags.com社区开发中,我们需要创建一个简单实用的用户时间轴应用,这里我们选择使用Timelinr来开发,并且为了使得动画过程更加丰富和有趣我们同时使用Animate.css来创建各种不同的CSS动画特效。

需要使用到的第三方插件和CSS类库如下:

Timelinr是一个时间轴的jQuery插件实现,你可以方便的使用它来生成一个动态的时间轴特效,提供了垂直和水平显示方式,并且支持自动播放。

Animate.css是由Dan…

标签: jQuery, timelinr, animate.css, 时间轴, timeline

阅读更多

超棒的跨浏览器纯CSS动画实现 - Animate.css

animate.css

在线演示  本地下载

通常情况下如果需要生成web动画效果的话,我们肯定会考虑使用一些类库或者jQuery的animate方法,那么有什么方便的方法来快速实现动画效果呢?

在今天的这篇文章中,我们将介绍一个超棒的CSS动画实现方式 - Animate.css。这套CSS动画是由来自Manchester, UK的设计师Dan Eden开发和设计的。使用它能够很方便的给你的页面元素添加动画效果。

如何使用?

使用非常简单,首先下载需要的css文件,你可以在下载地址上选择下载全部css,或者使用在线的Create custom build来生成自定义的css。

下载后将animate.css样式表引入你调用的HTML文件即可,如下:

<link rel="stylesheet" type="text/css" href="css/animate.min.css"…

标签: css, css3, css动画, animate.css

阅读更多

超酷HTML5和CSS3实现的登录及其注册功能表单

超酷HTML5和CSS3实现的登录及其注册功能表单

在线演示  本地下载

过去我们开发登录和注册功能大都使用javascript来实现,今天我们介绍的这个登录及其注册表单不走常人路,使用纯CSS3和HTML5来实现同样的功能。

这里我们使用CSS3的伪类:target。我们使用CSS3和图标字体。主要的想法是展示登录表单并且提供一个链接可以转向注册表单。

请大家注意这里只是一个简单的演示,不是所有的浏览器都支持:target,如果你需要在产品环境中使用,你需要使用对应的代码来处理对于老浏览器支持的fallback。

HTML

在html代码中,我们构建俩个表单并且把第二个表单隐藏。如下:

<div id="container_demo" >
<!-- hidden anchor to stop jump http://www.css3create.com/Astuce-Empecher-le-scroll-avec-l-utilisation-de-target#wrap4 …

标签: css3, html5, animate.css, animation, :target

阅读更多

喜欢我们的文章请您与朋友分享:

?ü?à

今日推荐