Animate.css 动画库介绍

港控/mmm° 2022-06-17 13:52 314阅读 0赞

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

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

![在线网站][1240]

测试完成之后，我们可以将它添加到自己的项目中。我们既可以使用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>

这样，这个动画库就介绍完了，如果你有自己的项目的话，可以考虑让一些元素拥有动画效果，让页面更活泼一点。

[animate.css]: https://daneden.github.io/animate.css/
[1240]: /images/20220617/5e102477dfa24ec9901d48fd9dcb400c.png
[CDNJS]: https://cdnjs.com/libraries/animate.css

发表评论取消回复

表情：

评论列表（有 0 条评论，314人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue之动画与animate.css动画库

前言 Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。包括以下工具：在 CSS 过渡和动画中自动应用 class 可以配合使

左手的ㄟ右手/ 2023年06月12日 04:19/ 0 赞/ 163 阅读

相关 Android动画简单介绍

在Android应用项目开发过程中，为了实现各种效果，可以使用动画，增加画面效果。此篇文档介绍小Android系统中的动画机制和各种开发者可以自己实现的方式。 Androi

拼搏现实的明天。/ 2022年12月14日 12:19/ 0 赞/ 172 阅读

相关动画库 TweenMax

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

约定不等于承诺〃/ 2022年10月25日 11:21/ 0 赞/ 325 阅读

相关 Theatre.js 动画JavaScript库

[Theatre.js ][Theatre.js]是一个带有 GUI 的 JavaScript 动画库，为 DOM、WebGL 和任何其他的 JavaScript 变量

迈不过友情╰/ 2022年09月14日 08:40/ 0 赞/ 210 阅读

相关 CSS 3动画介绍

![cssda_thumb1.jpg][] 原文：[A Beginner’s Introduction to CSS Animation][A Beginner_s Intr

女爷i/ 2022年08月14日 04:48/ 0 赞/ 194 阅读

相关 Animate.css 动画库介绍

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

港控/mmm°/ 2022年06月17日 13:52/ 0 赞/ 315 阅读

相关 js匀速动画及动画库

<table> <tbody> <tr> <td><b>准备知识</b></td> </tr> </tbody> </table> <table

今天药忘吃喽~/ 2022年06月07日 00:53/ 0 赞/ 252 阅读

相关 animate.css动画库使用方法介绍

Swiper(Swiper master)是目前应用较广泛的移动端网页触摸内容滑动js插件，下面是一些动画相关的总结。 animate.css动画库简介 Animate

港控/mmm°/ 2022年05月16日 02:50/ 0 赞/ 503 阅读

相关 ios 原生骨架动画库

本文目录 > 效果图 > 框架思维导图 > 使用教程效果图 1. 闪光灯模式 2. 骨架屏模式 3. 经典动画模式 ![闪光灯动画.g

布满荆棘的人生/ 2022年03月07日 17:30/ 0 赞/ 372 阅读

相关轻量级JavaScript动画库

地址: [https://www.animejs.cn/][https_www.animejs.cn] [https_www.animejs.cn]: https://ww

傷城~/ 2021年07月26日 14:13/ 0 赞/ 425 阅读