全国服务热线:400-6566-535 广州热线:020-82105691 客服QQ:858560031
后台演示 猪八戒 阿里巴巴商铺 手机版
网络营销电子商务建站知识编程知识行业资讯SEO知识常见问题网络安全
您当前位置: 首页 > 软件下载 > Animate.css让添加CSS动画像喝水一样容易?

Animate.css让添加CSS动画像喝水一样容易?

时间:2015-10-16 作者:七想网络

 

软件工具简介

 



animate.css是一堆很酷的,有趣的,跨浏览器的动画效果库,你可以随意在你的项目中使用。用在你想要突出的任何地方,如主页,滑块,这像喝水一样容易,迷死人了。

用法


在您的网站上使用animate.css,只要简单地把样式表插入到文档中的<HEAD>中,并为需要动画的元素添加一个CSS类名即可,以及动画的名称。就是这样!你就有了一个CSS动画效果。超强!

<head>
  <link rel="stylesheet" href="animate.min.css">
</head>


注* 示例

<h1 class="animated bounceOut">Animate.css</h1>


当与jQuery结合起来,你可以自己决定何时启用这些动画,通过jQuery动态添加使用动画,你可以做的事情更多:

$('#yourElement').addClass('animated bounceOutLeft');


你还可以检测动画结束事件:

$('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);


注:jQuery.one() 最多执行事件处理一次。点击此处了解详情。


您可以更改动画的持续时间,增加延迟或改变显示次数:

#yourElement {
  -vendor-animation-duration: 3s;
  -vendor-animation-delay: 2s;
  -vendor-animation-iteration-count: infinite;
}


注意:一定要在CSS恬当的的前缀(webkit, moz等)代替“vendor”

自定义Build(构建)


Animate.css支持Grunt ,您可以很容易地创建自定义Build流程。首先,你需要Grunt和其他依赖关系:

$ cd path/to/animate.css/
$ sudo npm install


接下来,运行grunt watch以更改和编译您的自定义生成文件。例如你只需要一部分动画效果,只需编辑 animate-config.json 文件,并选择你需要使用的动画。

"attention_seekers": {
  "bounce": true,
  "flash": false,
  "pulse": false,
  "shake": true,
  "swing": true,
  "tada": true,
  "wobble": true
}



官网地址: http://daneden.github.io/animate.css/


 

软件下载

 

软件名 下载地址
Animate.css让添加CSS动画像喝水一样容易?Animate.css让添加CSS动画像喝水一样容易?

 

准备开展业务? 立即创建网站 成为代理商
网络营销
  1. 企业网站如何做好网站优化与推广工作?
  2. 中小企业怎样做网络营销 广州七想网络...
  3. 网络营销并不神秘,七想网络带您揭开秘...
  4. 透过优衣库事件 看网络营销?
  5. QQ营销推广技巧?
  6. 中小企业网站如何推广才有效果呢?