动画库animate.css的用法
简介
animate.css是一个来自国外的 CSS3 动画库,它预设了引起弹跳(bounce)、摇摆(swing)、颤抖(wobble)、抖动(shake)、闪烁(flash)、翻转(flip)、旋转(rotate)、淡入淡出(fade)、滑动(Sliding)、光速(lightspeed)、缩放变焦(Zoom)、翻滚(roll)等多达 70 多种动画效果,借助 animate.css 能够很方便、快速的制作 常见的动画效果。当然animate.css只兼容支持 CSS3 animate 属性的浏览器,他们分别是:IE10+、Firefox、Chrome、Opera、Safari。
使用方法
1、引入文件
<link rel="stylesheet" href="animate.min.css">
2、在html中调用
<h1 class="animated bounceOut">Animate.css</h1>
给元素加上class属性,animated是必须加的,bounceOut是动画效果的名称。
也可以使原生JS或得Jquery动态添加使用动画,只要在需要动画的元素的class上加对应的动画名称即可,比如
$(function(){
$('#jqhtml').addClass('animated bounce');
});
animate.css 的默认设置也许有些时候并不是我们想要的,所以你可以重新设置,比如:
```
#jqhtml{
animate-duration: 2s; //动画持续时间
animate-delay: 1s; //动画延迟时间
animate-iteration-count: 2; //动画执行次数
}
```
示例
以下是前端库为大家收集的特效
66种基于animate.css的CSS消息提示动画效果
基于magnific-popup.js和animate.css的响应式lightbox特效
基于Animate.css的炫酷jQuery消息通知框插件
SVG文字动画特效插件AnimatedLetters
基于Animate.css的jQuery全屏幻灯片插件
下载地址
http://www.jqhtml.com/910.html
最新文章
- Nginx基本使用
- Query Designer:变量注意事项
- C语言 多线程测试
- C#访问非托管内存
- css3多列显示
- Visual Studio图片注释image-comments扩展
- Eclipse + Idea + Maven + Scala + Spark +sbt
- 四位数码管SH5461AS的问题,arduino学习实测.
- C# 学习之旅(3) --- 会说话的简易计算器
- 12天学好C语言——记录我的C语言学习之路(Day 9)
- 10_控制线程_线程让步yield
- MVC5 Controller简要创建过程(2):由ControllerFactory创建Controller
- 舒适的路线 (code[vs] 1001)
- SSH整合(一)hibernate+spring
- python基础——正则表达式
- 25. leetcode 217. Contains Duplicate
- Java课程设计——博客作业教学数据分析系统(201521123082 黄华林)
- android studio gradle 打jar 包 (混淆+第三方库包)
- jqgrid 插件的使用
- 手动实现一个虚拟DOM算法