动画利器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 ...
随机推荐
- axios拦截器搭配token使用
在了解到cookie.session.token的作用后学习token的使用 cookie是随着url将参数发送到后台,安全性最低,并且大小受限,不超过4kb左右,它的数据保存在客户端 session ...
- IPM的修炼之路
总结了一下最近一年半来看到的产品经理方面的素养资料. 产品经理: 必备素质:市场洞察,抽象概括,创新想象,心思细腻,热爱产品,具备一定的企业家精神等. 是通才:市场,项目,设计,管理,用户,统计,心理 ...
- jQuery Validate使用说明
jQuery Validate 导入 js 库 <script src="./jquery-validation/lib/jquery-1.8.3.js" type=&quo ...
- Java之通过反射机制选择servlet中的对应的方法
此方法用于在对Javaee开发中的通过对应的名称而选择servlet中的对应的方法 注:主要代码如下 protected void doGet(HttpServletRequest req, Http ...
- node.js 模块和其下载资源的镜像设置
以前安装 electron 时总是失败,然后就在淘宝镜像上下载好相应版本的文件放到用户目录来解决问题. 后来研究发现 npm 不仅可以设置 node.js 模块仓库的代理, 同样可以设置像 elect ...
- SEO搜索引擎
搜索引擎 搜索引擎(Search Engine)是指根据一定的策略.运用特定的计算机程序从互联网上搜集信息,在对信息进行组织和处理后,为用户提供检索服务,将用户检索相关的信息展示给用户的系统.搜索引擎 ...
- Linux 两组信号对比
博客逐步迁移到,独立博客,原文地址 http://www.woniubi.cn/two_groups_signal_difference/ 之前看信号的时候,没有太注意不同信号的对比.今天再次看到的时 ...
- Strut2_声明式异常处理
Service 往外抛异常 public List<Category> list() throws SQLException{ Connection conn = DB.createCon ...
- Coppermine-1.5.46 (Ubuntu 16.04.1)
平台: Ubuntu 类型: 虚拟机镜像 软件包: coppermine-1.5.46 commercial content management coppermine media sharing ...
- .net 控制器调用外部链接传参方法
public class RequestHelper { /// <summary> /// 发起post请求 /// </summary> /// <typeparam ...