本文主要是介绍Animate.css 动画库介绍,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
一个漂亮炫酷的网页离不开动画效果的点缀。现在也有很多动画库可供选择,这里我来介绍一个简单好用的动画库Animate.css。
animate.css在线效果用一个在线网页演示了所有动画效果,我们只需要在下拉列表中选择一个效果名字,即可查看它的实际动画效果。大家可以直接到这个网站上测试这些动画效果。
测试完成之后,我们可以将它添加到自己的项目中。我们既可以使用bower或者npm下载。
bower install animate.css --savenpm install animate.css --save
也可以使用CDNJS,然后在页面中引用animate.css
文件。
<head><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
</head>
最后在希望拥有动画效果的元素上添加animated
类和相应的动画类即可。比方说下面就应用了一个回弹的动画效果。你可以直接将代码保存为HTML文件,然后就可以在浏览器中查看效果了。
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>动画效果</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
</head>
<body>
<h1 class="animated bounce">弹弹弹!</h1>
</body>
</html>
这样,这个动画库就介绍完了,如果你有自己的项目的话,可以考虑让一些元素拥有动画效果,让页面更活泼一点。
这篇关于Animate.css 动画库介绍的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!