Animate.css的初入门
2017-04-22 本文已影响0人
miner敏儿
推荐一个网站最牛前端
Animate.css是css动画库,封装了一些动画效果想要使用的话直接在github上下载,因为是css库,所以直接使用link链入就可以了
地址
http://daneden.github.io/animate.css/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/animate.css">
<style>
div{
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<!--醉牛前端-->
<div class="animated infinite fadeIn"></div>
</body>
</html>
动画效果的话可以直接在Animate.css中试,拿到自己想要的动画效果
在添加class时一定要写上animated 再写其他想要实现的动画,因为动画效果都是基于animated来实现的
- 如果自己想要修改animate库里的默认属性可以在css中通过.animated修改
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/animate.css">
<style>
div{
width: 100px;
height: 100px;
background: red;
margin: 30px auto;
}
/*我自己可以在这里修改animate库里的默认动画属性*/
.animated {
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
</style>
</head>
<body>
<div class="animated slideInDown"></div>
</body>
一个小demo来加深印象
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/animate.css">
<style>
body{
background: rgba(0,0,0,.5);
}
div{
width: 300px;
height: 300px;
background: pink;
margin: 100px auto;
}
</style>
<script src="js/jquery-1.7.2.min.js"></script>
<script>
$(function() {
$('button').on('click', function () {
//1.增加class
$('div').addClass('animated shake');
//2.页面的刷新
setTimeout(function () {
// window.location.reload(); //如果不加那么只能运行一次除非重新刷新页面在点击时才会有动画
//添加回调函数
//先删除再添加
// $('div').removeClass('shake');
// $('div').addClass('bounceOut');
$('div').removeClass('shake').addClass('bounceOut');
}, 1000)
})
})
</script>
</head>
<body>
<button>点击</button>
<div>
</div>
</body>
有两个动画效果.
