动画利器animate.css
使用过CSS3编写动画的同学一定感叹CSS3的强大,但是也会感到书写的麻烦。每次都要计算动画的各个参数,十分麻烦。有没有一个库能封装一些常用的CSS3动画效果。答案是肯定的,animate.css就是一个很好的CSS库,github地址:https://github.com/daneden/animate.css 。下面我们一起来看一看如何使用它。
点击上面的链接,就可以看到一个很简约的页面,其实这个页面就是animate.css的API 文档。在页面中间的下拉框中选择一个动画类,再点击旁边的按钮,就可以看到上方的文字上的动画。
那么,我们在实际的开发中又该如何使用animate.css。比如我有一个div需要使用bounce动画。那么就可以如下面的方法来编写:
<div id="animate-1" class="animated">演示bounce动画</div>
注意class=“animated” 是调用动画必备的,然后就在需要的时候调用:
$('.animate-1').addClass('bounce');
这样,就可以看到动画了。我简单试了一下,这些动画在移动平台上也是可以用的。
动画利器animate.css的更多相关文章
- css3动画和animate.css动画库使用
CSS3动画 css3动画可以分为两种.transition过渡动画和keyframes关键帧动画 过渡动画 第一种叫过渡(transition)动画,就是从初始状态过渡到结束状态这个过程中所产生的动 ...
- 微信网页动画---swiper.animate.css
项目需要,自己写了个demo <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- CSS3动画框架 Animate.css
CSS3的动画应用越来越多了,Animate.css一个从名字上就知道干什么的动画框架. github上的访问地址:http://daneden.github.io/animate.css/ 使用方法 ...
- vue 动画框架Animate.css @keyframes
<script src="vue.js"></script> <link rel="stylesheet" href=" ...
- css 动画类库Animate.css
地址为:http://daneden.github.io/animate.css/ 源码地址为:https://github.com/daneden/animate.css 简单的使用方法: Anim ...
- CSS--使用Animate.css制作动画效果
一 使用Animate.css动画 // 通过@import引入外部CSS资源; // 引入线上图片及JS文件; // 通过更改CSS类名生成不同类型的CSS3动画; <!DOCTYPE h ...
- Animate.css介绍
Animate.css简介 animate.css 动画库,预设了抖动(shake).闪烁(flash).弹跳(bounce).翻转(flip).旋转(rotateIn/rotateOut).淡入淡出 ...
- animate.css(第三方动画使用方法)
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px Monaco; color: #a5b2b9 } animation 语法: animatio ...
- css3动画简介以及动画库animate.css的使用
在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...
随机推荐
- Linux IPC 共享内存
共享内存 共享内存(shared memory)是最简单的Linux进程间通信方式之一. 使用共享内存,不同进程可以对同一块内存进行读写. 由于所有进程对共享内存的访问就和访问自己的内存空间一样,而不 ...
- BigDecimal的使用举例,包括阶乘的相加求法思路
对于高精度要求或者运算数较大的的计算,应该使用bigdecimal类实现 import java.math.BigDecimal; public class TestSysin { public st ...
- jdk 动态代理 数据连接池
package com.itheima.datasource; import java.io.PrintWriter; import java.lang.reflect.InvocationHandl ...
- ubuntu14.04.2安装 YouCompleteme
1 安装git ,按照这篇文章安装 http://www.cnblogs.com/or2-/p/4350252.html 2 安装编译需要的各种包 sudo apt-get install build ...
- Jquery 客户端验证
Jquery 客户端验证 //引入js文件 validate.js <html> <head> <title>jqueryValidateDemo</titl ...
- dt4.0上传图片总是压缩解决办法,为什么我设置了不压缩图片,程序还是压缩呢?
即使后台设置也解决不了图片被压缩的厄运如图: 解决办法: 这个是上传控件名称和版本号 这个是文件的路径 在文档中找到 compress: 把windth和height后面的1600 改成更大的数值就可 ...
- 合唱队(华为OJ)
描述 计算最少出列多少位同学,使得剩下的同学排成合唱队形 说明: N位同学站成一排,音乐老师要请其中的(N-K)位同学出列,使得剩下的K位同学排成合唱队形. 合唱队形是指这样的一种队形:设K位同学从左 ...
- Python用户交互以及数据类型
一.用户交互与格式化输出 1.用户交互 1.1什么是用户交互 程序等待用户输入的数据,程序执行完毕后为用户反馈信息. 1.2为何程序要与用户交互 为了让计算机像人类一样与用户交互 1.3使用方式 在p ...
- form提交
方法一:利用form的onsubmit()函数(经常使用) <script type="text/javascript"> function validateForm( ...
- 关于jqeury中attr()和prop()方法
在平时工作中老会被一样的问题困住,浪费时间,这里做一个简要笔记. 在使用jquery给元素设置属性的时候,如果是一般的div,p等正常元素设置属性的话,使用attr()足以,但是在给拥有checked ...