如何使用动画库animate.css
animate.css是一个CSS3动画库,里面预设了抖动(shake)、闪烁(flash)、弹跳(bounce)、翻转(flip)、旋转(rotateIn/rotateOut)、淡入淡出(fadeIn/fadeOut)等多达 60 多种动画效果。你可以点击打开它的 官网 查看演示,里面几乎包含了所有常见的动画效果。妈妈在也不用担心我不会写动画了!!!
演示地址 动画演示地址。
下载地址链接 点击下载地址链接下载,打开的是一个css文件 直接Ctrl+A全选 Ctrl+C复制即可。
如何使用:
先来看一个简单的示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 引入 animate.css -->
<link rel="stylesheet" href="./css/animate.css">
<style>
.box {
width: 200px;
height: 200px;
margin: 0 auto;
background-color: pink;
}
</style>
</head>
<body>
<!-- 打开浏览器就可以看到其效果了 -->
<div class="box animated bounce">盒子</div>
</body>
</html>
首先页面引入 animate.css。 把 animated 添加到类属性上, animated 是动画的一个基类每个动画都必须添加紧接着后面就是 动画名。
例如:
<div class="box animated jello">盒子</div>
原生js添加动画示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 引入 animate.css -->
<link rel="stylesheet" href="./css/animate.css">
<style>
.box {
position: relative;
left: 78px;
width: 200px;
height: 200px;
margin: 0 auto;
background-color: pink;
}
button { display: block; margin: auto;}
</style>
</head>
<body>
<div class="box" id="box">盒子</div>
<button id="btn">点我</button>
<script>
// 获取盒子和按钮
var box = document.getElementById('box');
var btn = document.getElementById('btn');
// 给 按钮 绑定一个单击事件只要触发了就执行这个匿名函数
btn.onclick = function() {
// 给盒子添加动画 基类 和类名
box.classList.add('animated','bounce');
}
</script>
</body>
</html>
jQuery添加动画类示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 引入 animate.css -->
<link rel="stylesheet" href="./css/animate.css">
<!-- 引入 jquery.js -->
<script src="./js//jquery3.4.1min.js"></script>
<style>
.box {
position: relative;
left: 78px;
width: 200px;
height: 200px;
margin: 0 auto;
background-color: pink;
}
button { display: block; margin: auto;}
</style>
</head>
<body>
<div class="box" id="box">盒子</div>
<script>
$(function() {
var $this = $('#box');
$this.hover(function() {
$this.addClass('box animated bounce');
},function() {
$this.removeClass('animated bounce');
})
})
</script>
</body>
</html>
至于动画其他的配置参数,如动画持续时间,动画的执行次数等等,你可以在你的的元素上自行定义,覆盖掉animate.css里面所定义的就好了。
如何使用动画库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 动画库,它预设了引起弹跳(bounce).摇摆(swing).颤抖(wobble).抖动(shake).闪烁(flash).翻转(flip).旋 ...
- 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. ...
随机推荐
- react中事件的使用
import React from 'react' class Home extends React.Component{ constructor(props){ super(props) this. ...
- Windows下安装CUDA8.0
在Win10下安装CUDA8.0,并使用VS2013测试: 机器配置: Windows 10 VS 2013 CUDA8.0 CUDA 8.0:下载地址 CUDA其他版本:下载地址 1. 安装CUDA ...
- 洛谷P1011 车站
P1011 车站 题目描述 火车从始发站(称为第1站)开出,在始发站上车的人数为a,然后到达第2站,在第2站有人上.下车,但上.下车的人数相同,因此在第2站开出时(即在到达第3站之前)车上的人数保持为 ...
- Windwos10环境下的Geany的安装与新手使用
相信学习Python的小伙伴都会接触到Geany这个轻量级的python文本编辑器吧,下面就是我对于安装Geany的一些小经验分享. 1:安装geany很简单,进入geany官网download下载相 ...
- 判断iphone 屏幕大小宏定义
#define IS_IPAD (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad) #define IS_IPHONE (UI_USER_I ...
- CODING 告诉你硅谷的研发项目管理之道(5)
CODING 已经通过前四期文章,让大家逐步了解了一些硅谷优秀的项目管理者是如何工作.如何维持团队高效运作的.在过去的十几年中,中国的互联网行业发展过于迅猛,导致很多管理人员都是赶鸭子上架,商场如战场 ...
- SpringSecurity为项目加入权限控制
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...
- 封装了一个电商放大镜移入放大的功能,适用于VUE
代码地址:https://github.com/zhongqiulan/jqimgzoom 由于vue只支持ie9以上版本,所以这个插件也是一样的 效果图: 第一步,在goodsinfo文件中引入cs ...
- 学习笔记之a,b=b,a+b与a=b,b=a+b的区别
兔子序列中用到的常用的计算方法:a,b=b,a+b 当我们真正去运行的时候,会发现它与a=b,b=a+b是有区别的 实例代码如下: def YY(one): a,b,n=0,1,0 while( ...
- 牛客小白月赛13 G(双向搜索)
AC通道 两边同步搜,一步里面A走一次B走两次,遇到对方走过的地方就得到了答案. #include <bits/stdc++.h> using namespace std; const i ...