推薦一個網站最牛前端
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>
有兩個動畫效果.
