动画库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
动画库animate.css的用法的更多相关文章
- 强大的CSS3动画库animate.css
今天要给大家介绍一款强大的CSS3动画库animate.css,animate.css定义了大概50多种动画形式,包括淡入淡出,文字飞入.左右摇摆动画等等.使用animate.css也非常简单,你可以 ...
- css3动画简介以及动画库animate.css的使用
在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...
- 转: css3动画简介以及动画库animate.css的使用
~~~ transition animation 和 animate.css 在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城 ...
- 【转载】css3动画简介以及动画库animate.css的使用
原文地址:http://www.cnblogs.com/2050/p/3409129.html 在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好. ...
- 如何使用动画库animate.css
animate.css是一个CSS3动画库,里面预设了抖动(shake).闪烁(flash).弹跳(bounce).翻转(flip).旋转(rotateIn/rotateOut).淡入淡出(fadeI ...
- CSS动画库——animate.css的使用
Animate.css是一款强大的CSS3动画库 官网地址:https://daneden.github.io/animate.css/ 使用方法如下所示: (1)下载animate.css 下载地址 ...
- 使用CSS3动画库animate.css
IE9及更早版本的IE浏览器都不支持css3动画 谷歌浏览器.火狐浏览器.IE10+浏览器以及移动端浏览器等这些都支持css3动画 animate.css内置了很多典型的css3动画 用法 1 ...
- 动画库Animate.css
笔记分享: 用法:到官网(http://daneden.github.io/animate.css/),下载animate.min.css文件.点击这里 1.首先引入animate css文件 < ...
- CSS3动画库——animate.css
初见animate.css的时候,感觉很棒,基本上很多常用的CSS3动画效果都帮我们写好了,所以想要哪一种效果直接就可以拿过来用,甚是方便: 效果展示官网:http://daneden.github. ...
随机推荐
- mui switch 开关js控制打开 & Cannot read property 'toggle' of null
//打开开关 mui('#mySwitch').switch().toggle(); //小开关打开异常的情况解决办法$(".mui-switch-handle").attr(&q ...
- 【转载】JSTL和EL的使用
使用JSTL前的准备 想要使用JSTL,首先需要给工程导入JSTL的包(JSTL.jar和standard.jar). JSTL标签库 在JSTL中分为以下五个标签 核心标签 格式化标签 SQL标签 ...
- elasticsearch重建索引
1.重建索引 一个field的设置是不能被修改的,如果要修改一个Field,那么应该重新按照新的mapping,建立一个index,然后将数据批量查询出来,重新用bulk api写入index中 批量 ...
- 递归、作用域、生命周期(day09)
数组可以作为形式参数使用 数组做形式参数的时候真正的形式参数并 不是数组而是一个可以作为数组使用的 变量 数组形式参数里包含的存储区都不是被调用 函数提供的 声明数组形式参数的时候可以省略中括号 里的 ...
- request.getScheme()、 request.getServerName() 、 request.getServerPort() 、 request.getContextPath()
<% String basePath = request.getScheme() + "://" + request.getServerName() + ":&qu ...
- node源码详解(五)
本作品采用知识共享署名 4.0 国际许可协议进行许可.转载保留声明头部与原文链接https://luzeshu.com/blog/nodesource5 本博客同步在https://cnodejs.o ...
- python项目开发:用RabbitMQ实现异步RPC
程序要求: 1. 用Rabbit MQ实现RPC 1. 可以异步地执行多条命令 2. 可以对一次性对多个机器执行命令 程序效果: --->run dir host1 host2 .... --- ...
- 2019-04-16 sql tran and try catch :
begin try begin tran tran_addresource -- 标记事务的开始 delete rp insert into Cube.ResourcePool(ResourceTyp ...
- QT的creator中图示
不同的开发工具显示class和相关的用不同的图标表示.但大同小异.但对于QT的creator中图示确实不太好分.看图一目了然.
- elasticsearch 权威指南入门阅读笔记(一)
相关文档 esapi:https://es.xiaoleilu.com/010_Intro/10_Installing_ES.html https://esdoc.bbossgroups.co ...