Animate.css介绍
Animate.css简介
animate.css 动画库,预设了抖动(shake)、闪烁(flash)、弹跳(bounce)、翻转(flip)、旋转(rotateIn/rotateOut)、淡入淡出(fadeIn/fadeOut)等多达 60 多种动画效果,几乎包含了所有常见的动画效果。
Animate.css下载
Animate.css动画演示
Animate模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 引用animate文件 -->
<link rel="stylesheet" href="css/animate.min.css"/>
</head>
<body> </body>
</html>
- 添加一个动画
<!-- animated类似与全局变量,定义动画持续时间 -->
<!-- bounce具体动画的名称 -->
<div class="animated bounce">
Animate.css
</div>
- 定义播放次数
<!-- infinite定义动画无限播放 -->
<div class="animated bounce infinite">
Animate.css
</div>
- 通过JavaScript或jQuery添加Animate动画
<div>
Animate.css
</div>
<!-- 在线引用jQuery文件 -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!-- 通过jQuery添加animate动画 -->
<script>
$('div').addClass('animated bounce');
</script>
- 添加定时器,5秒后删除animate无限播放效果
<div>
Animate.css
</div>
<!-- 在线引用jQuery文件 -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!-- 通过JavaScript或jQuery添加animate动画 -->
<script>
$('div').addClass('animated bounce infinite');
setTimeout(function(){
$("div").removeClass("infinite");
},5000)
</script>
Animate.css介绍的更多相关文章
- animate.css的使用
前面的话 animate.css是一个使用CSS3的animation制作的动画效果的CSS集合,里面预设了很多种常用的动画,且使用非常简单.本文将详细介绍animate.css的使用 引入 anim ...
- React 系列教程 1:实现 Animate.css 官网效果
前言 这是 React 系列教程的第一篇,我们将用 React 实现 Animate.css 官网的效果.对于 Animate.css 官网效果是一个非常简单的例子,原代码使用 jQuery 编写,就 ...
- python 全栈开发,Day58(bootstrap组件,bootstrap JavaScript 插件,后台模板,图表插件,jQuery插件库,Animate.css,swiper,运行vue项目)
一.bootstrap组件 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 组件和插件的区别? 插件:一个功能,比如js文件 组件:html css js 组件包含插件 面 ...
- 强大的CSS3动画库animate.css
今天要给大家介绍一款强大的CSS3动画库animate.css,animate.css定义了大概50多种动画形式,包括淡入淡出,文字飞入.左右摇摆动画等等.使用animate.css也非常简单,你可以 ...
- wow.js+animate.css——有趣的页面滚动动画
今天偶然间发现了一个使用特别简单的页面动画效果,还挺不错的,玩了一个上午,现在介绍一下这个滚动动画: 一.使用方法: 1.下载animate.css 2.下载wow.js 3.引用文件,像这样: &l ...
- vue与animate.css的结合使用
在vue项目中,由于页面需要动画效果,使用动画其实有多种方式,可以使用vue中的过渡transition,可以使用animate动画与transition配合使用,也可以单独使用animate动画库. ...
- animate.css引入实现动画效果
最近在网上看到很多代码都通过引入animate.css来实现动画效果,后来我便使用这种方法来尝试着写了个小案例,结果真的很好用,比我们通常情况下使用css或js实现动画效果好得多,便在此做个总结. 第 ...
- CSS动画框架Loaders.css +animate.css
CSS加载动画框架Loaders.css 是一款非常出色的加载动画框架,Loaders.css利用纯CSS可以实现很多种样式的Loading加载动画,这些动画并不需要图片来辅助,而是仅仅需要CSS即可 ...
- vue项目中引入animate.css和wow.js
本文转自:https://blog.csdn.net/liyunkun888/article/details/85003152 https://www.zhuimengzhu.com/content/ ...
随机推荐
- 简易的canvas画板
没事仿照windows画板工具用canvas实现了一个简易版的画板. html: <!doctype html> <html> <head> <meta ch ...
- PHP中cookie和session的区别
1.cookie数据存放在客户的浏览器上,session数据放在服务器上. 2.cookie不是很安全,别人可以分析存放在本地的COOKIE并进行COOKIE欺骗考虑到安全应当使用session. 3 ...
- View的setTag和getTag方法
---恢复内容开始--- public View getView(int position, View convertView, ViewGroup parent) { Msg msg =getIte ...
- Dialog中更新Activity的数据显示
假设有一个activity,activity中有一个Button和一个TextView,点击按钮,弹出Dialog,对话框中有一个ListView,选中ListView中的某一项,关闭对话框,更新ac ...
- OpenLDAP权限配置
安装好了openldap之后,就是对它进行配置了,其中一项就是设置访问控制,限制普通用户只能修改/访问他们能修改/访问的项.这就是ACL需要做的事情. 设置方法 1.可以将 include行放在/et ...
- 安装android-sdk,gradle mac 篇
安装包管理器 Homebrew /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/insta ...
- 数组(list)分组、分段
对一个list进行分组,要求控制每组中的元素个数: 1.使用切片分组: lst = [1, 2, 3, 4, 5, 6, 7, 8, 9, 8, 7, 6, 5, 4, 3, 2, 1] #lst可为 ...
- saltstack-把执行结果存储到mysql服务内
saltstack把执行的结果保存到mysql中,以便进行命令安全审计 mysql负责存储数据,mysql-python负责收集数据 master需要安装mysql和MySQL-python,mini ...
- Chrome新发现
昨晚写代码的时候惊喜的发现Chrome中能直接使用一些ES6的语法: let, const, 箭头函数等已经能直接使用. 酷酷的. 另外我的Chrome版本还是比较旧的,并不需要最新版本.
- Django template 过滤器
转载自: http://www.lidongkui.com/django-template-filter-table 一.形式:小写 {{ name | lower }} 二.过滤器是可以嵌套的,字符 ...