专栏首页乐百川的学习频道Animate.css 动画库介绍

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

相关文章

  • Windows美化软件WindowFX简介

    版权声明:本文为博主原创文章,转载请注明出处。 ...

    乐百川
  • 使用 pymysql 操作MySQL数据库

    安装PyMySQL PyMySQL是一个Python编写的MySQL驱动程序,让我们可以用Python语言操作MySQL数据库。 首先,使用pip安装PyMyS...

    乐百川
  • Python HTTP库requests 介绍

    前面我写的爬虫用的都是Python自带的的标准库urllib,这个库用起来还行,不过有些操作比较麻烦。所以现在我们来学习一下一个非常著名的HTTP库——requ...

    乐百川
  • 界面按钮样式丑?不可能!16款css实现炫酷按钮

    整理了16款css按钮,经过全部测试,没发现有影响使用的bug,其中也可能存在部分bug,但是应该问题不大。

    青年码农
  • Animate.css动画库的安装与使用

    Animate.css是一款有趣的,跨浏览器的css3动画库,可以非常简单的实现各种炫酷的动画效果,可以在项目中使用。

    德顺
  • jQuery右侧滑动快速导航条

    平时浏览网站的时候要是网站很长,滑下来后还要返回到开头部分的header来点击导航就显得很不方便,在这里使用JQ来实现右侧的滑动导航条,先来看看效果图吧: ? ...

    benny
  • 零基础html5+div+css+js网页开发教程第007期 网页基本代码框架

    上一节中,我们学习了利用hbuilder工具,对我们的日常网页开发进行快速开发。我们可以使用像数学一样的技巧,快速生成有规律的代码。在实际企业开发中,只要能满足...

    刘金玉编程
  • Spring Cloud 分布式服务限流实战,已经为你排好了

    在一个分布式高并发的系统设计中,限流是一个不可忽视的功能点。如果不对系统进行有效的流量访问限制,在双十一和抢票这种流量洪峰的场景下,很容易就会把我们的系统打垮。...

    搜云库技术团队
  • Python-GUI|Label显示图片,Pack布局控件

    01 Label显示图片 Label显示文本很简单,直接在构造中将text显示地赋值。 如果Label显示成图片,如何设置? PhotoImage构造出图片,...

    double
  • Python爬虫实战:爬取链家网二手房数据

    本文的文字及图片来源于网络,仅供学习、交流使用,不具有任何商业用途,如有问题请及时联系我们以作处理。

    松鼠爱吃饼干

扫码关注云+社区

领取腾讯云代金券