Animate.css 动画库介绍

一个漂亮炫酷的网页离不开动画效果的点缀。现在也有很多动画库可供选择,这里我来介绍一个简单好用的动画库Animate.css。

animate.css在线效果用一个在线网页演示了所有动画效果,我们只需要在下拉列表中选择一个效果名字,即可查看它的实际动画效果。大家可以直接到这个网站上测试这些动画效果。

测试完成之后,我们可以将它添加到自己的项目中。我们既可以使用bower或者npm下载。

bower install animate.css --save

npm 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 条评论
登录 后参与评论

相关文章

来自专栏源码之家

博看网杂志下载时批量更改图片大小

13020
来自专栏小程序之家

如何使用小程序媒体组件

图片,视频,音乐是小程序使用中不可缺少的部分,这篇文章中,我们将介绍小程序媒体组件的使用。媒体组件分为audio音频组件,image图像组件,video视频组件...

1.1K10
来自专栏木子墨的前端日常

到底该用img还是background-image?

在前端页面的实现过程中,我们经常会遇到这个情况:有一个盒子,盒子里面需要放一张图片。这个时候,我们既可以通过添加image标签来实现,也可以通过设置背景图的形式...

52310
来自专栏河湾欢儿的专栏

01-工具 面板 视图

网页分为两步: 1.从设计稿中切出网页素材 比如说:按钮 logo 图片 背景等 2.编写代码,按效果图实现静态页面

11810
来自专栏一“技”之长

标签之美一——HTML基础元素 原

HTML是一种标记语言,因此,标签便是HTML的核心,一些基础标签的用法总结如下:

13320
来自专栏Google Dart

AngularDart Material Design 复选框 顶

用户可以点击该复选框以选中或取消选中它。 通常使用复选框允许用户从一组中选择多个选项。如果您有一个ON/OFF选项,请避免使用单个复选框并使用material-...

12840
来自专栏大前端开发

微信小程序中实现瀑布流布局和无限加载

瀑布流布局是一种比较流行的页面布局方式,最典型的就是Pinterest.com,每个卡片的高度不都一样,形成一种参差不齐的美感。

49520
来自专栏前端架构与工程

利用max-height适应多尺寸屏幕的下拉动画

移动设备的特点之一便是屏幕尺寸多种多样,所以我们在制作针对移动设备的动画时必须不同尺寸屏幕的兼容性。比如我们要制作以下动画:红框2为详细内容,默认收起;红框1处...

19880
来自专栏vue学习

19、分类详情页之基本页面结构

具体关于路由的跳转就不多讲了,具体可以参考前面第5章vue-router之什么是编程式路由

12620
来自专栏互联网杂技

微信小程序设计规范(官方)文档

image.png 为方便设计师进行设计,微信提供一套可供Web设计和小程序使用的基础控件库;同时提供方便开发者调用的资源。 基础样式库预览地址:https...

7.9K90

扫码关注云+社区

领取腾讯云代金券