Animate.css 动画库介绍
来源:互联网 发布:电脑防蓝光软件 编辑:程序博客网 时间:2024/06/06 08:25
一个漂亮炫酷的网页离不开动画效果的点缀。现在也有很多动画库可供选择,这里我来介绍一个简单好用的动画库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>
这样,这个动画库就介绍完了,如果你有自己的项目的话,可以考虑让一些元素拥有动画效果,让页面更活泼一点。
0 0
- Animate.css 动画库介绍
- animate.css动画库使用方法介绍
- animate.css CSS3动画库
- CSS3动画库 —— Animate.css
- Animate.css动画库的使用
- VUE引用animate.css动画库
- 动画库animate.css的用法
- animate.css 动画制作
- css3动画简介以及动画库animate.css的使用
- css3动画简介以及动画库animate.css的使用
- css3动画简介以及动画库animate.css的使用
- css3动画简介以及动画库animate.css的使用
- css3动画简介以及动画库animate.css的使用
- css3动画简介以及动画库animate.css的使用
- css3动画简介以及动画库animate.css的使用
- css3动画简介以及动画库animate.css的使用
- CSS3动画效果-animate.css
- animate.css css3动画工具
- 邻接表存储无向图
- 根据内容获取web高度(动态获取web高度)
- 【Java学习20170427】Servlet过滤器和监听器
- 完数
- Android访问assets本地Json文件
- Animate.css 动画库介绍
- 利用vultr的vps搭建ikev2类型vpn
- 面向对象多态
- 服务-samba
- VLC命令参数(转载)
- laravel分页问题
- 学习记录
- 线程锁之volatile
- CDH-LZO配置