一款非常好用的css动画库--animate.css
今天再学习vue.js的时候看到了一个不错的css库，vue官方推荐（不一定要使用vue.js才能使用这个css库），这个库叫做animate.css，是个动画效果的css库，有好多不错的动画效果。首先看怎么引用，官网下载：https://raw.githubusercontent.com/daneden/animate.css/master/animate.css效果试用：https...
今天再学习vue.js的时候看到了一个不错的css库，vue官方推荐（不一定要使用vue.js才能使用这个css库），这个库叫做animate.css，是个动画效果的css库，有好多不错的动画效果。
首先看怎么引用，
官网下载：https://raw.githubusercontent.com/daneden/animate.css/master/animate.css
效果试用：https://daneden.github.io/animate.css
在线引用：http://cdn.bootcss.com/animate.css/3.5.2/animate.min.css
然后是在实际项目中的使用：
<!DOCTYPE>
<html>
<head>
<title>animate测试</title>
<link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/animate.css/3.5.2/animate.min.css" />
<style>
#box{
width:100px;
height:100px;
background:#ff0000;
}
</style>
</head>
<body>
<div class="animated" id="box">animate</div>
<button id="add">add</button>
<button id="remove">remove</button>
<script>
var add = document.getElementById('add');
var remove = document.getElementById('remove');
var box = document.getElementById('box');
add.onclick = function(){
box.classList.add("bounceInLeft");
box.classList.remove("bounceOutLeft");
}
remove.onclick = function(){
box.classList.add("bounceOutLeft");
box.classList.remove("bounceInLeft");
}
</script>
</body>
</html>可以看到我先是在页面上构建了一个100*100的红色方块，赋予一个animated的类（必需），或者也可以在js中添加这个类，然后定义了两个按钮，分别给方块添加bounceInLeft类和bounceOutLeft类，以及删除相反的类（不删除没有效果），接着就可以在页面上看到效果啦，按add按钮会让方块从左边滑入，按remove按钮会让方块从左边滑出。
当然这只是animate库中的一个动画效果，还有其他好多有趣的效果。下面展示效果种类一部分的截图（具体所有效果可进入上方效果试用链接进行使用）：
在上方代码中，js部分还可以加上
box.classList.add('infinite');这样子就会循坏动画效果了。
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献2条内容
所有评论(0)