Animate.css 动画库介绍

2023-11-18

一个漂亮炫酷的网页离不开动画效果的点缀。现在也有很多动画库可供选择,这里我来介绍一个简单好用的动画库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>

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Animate.css 动画库介绍 的相关文章

  • css如何让文本底部对齐?

    怎么做怎么做 a 文字底部对齐吗 我已经添加了height line height and vertical align bottom 但文本仍然在 div 的中间 怎么做 谢谢 Test in http jsfiddle net BanA
  • CSS 计数器输出不匹配

    有人可以解释一下为什么吗section计数器值总共打印 0h2 tags 这是源代码
  • CSS 无法与 CodeIgniter 一起使用

    这是我的 CI 代码的一部分 class page extends CI Controller var Page public function construct parent construct this gt Page 1 this
  • css:将div制作成圆角并在其3/4处添加边框

    我有这样的代码 div class circle div and css circle border left 1px solid red border bottom 1px solid red border radius 200px wi
  • 更改文本框中一个字符的颜色 HTML/CSS [重复]

    这个问题在这里已经有答案了 我正在设计一个网站 我想问一下大家 如何通过CSS改变HTML文本框中字符串中的一个字符的颜色 示例 STACK OVER FLOW 只是 A 字母是红色的 你不能用常规方法做到这一点
  • 从 3.1 返回后加载 Rails 3(服务器)时出现问题

    Rails 完全菜鸟 我正在使用 Hartl 教程 到了第 4 章 CSS 4 1 2 一切看起来都很顺利 但遇到了一个问题 使页面上的文字看起来
  • .net dropdownlist对齐文本

    我正在尝试将 net 下拉列表中的文本向右对齐 使用 CssClass 我可以在 Firefox 中将文本向右对齐 IE 不会将文本右对齐 而是左对齐 我读到 IE 6 不支持这个 这是真的 我使用的是 IE7 但我的大多数用户将使用 IE
  • iframe 位置居中

    所以我找到了这段用于将内容放在中心的代码 但我的问题是它是为容器制作的 你知道如何为 iframe 制作它吗 或者你知道另一个代码吗 代码 center margin auto width 60 border 3px solid 73AD2
  • 如何更改 div 悬停时的跨度颜色

    我正在尝试更改 div 悬停时跨度的颜色 如何使红色汉堡按钮 即跨度 在 div 悬停时将颜色更改为黑色 PS 现在它在跨度的悬停上执行此操作 JSFiddle https jsfiddle net bjjbqct8 https jsfid
  • CSS 字体在 Firefox 中不起作用

    我下面有这个字体代码 它在谷歌浏览器中工作正常 但在火狐浏览器中根本不起作用 为什么
  • 缩小 HTML、CSS 和 Javascript 是一个坏主意吗?

    维基百科定义缩小 http en wikipedia org wiki Minification 28programming 29 as 从源代码中删除所有不必要的字符而不改变其功能的过程 这些不必要的字符通常包括空格字符 换行符 注释 有
  • CSS 中的 Data-URI SVG 背景在 Firefox 中不起作用

    好的 这就是我想做的 我的 css 文件中有这段代码 form row textfield hover textfield m hover background image url data image svg xml base64 PHN
  • CSS 聚焦于出现的输入 div [重复]

    这个问题在这里已经有答案了 我有这样的代码 div class lighter div
  • 保证金如何运作?

    我在下面提供了marginfix这是一个块级元素并且one and two也是块级的 但它们是浮动的 这就是为什么它们位于同一行布局的原因 但是marginfix也不浮动 块级元素应位于该元素下方 如下所示
  • Windows 与 MacOS 上的不同大小字体渲染。怎么解决?

    我一直想知道为什么在 Windows 上我的字体看起来比 OSX 上更小 而且更蹩脚 Mac 与 Windows 的屏幕截图 http screencast com t UUxqLRhM http screencast com t UUxq
  • 如何使用 HTML 和 CSS 在我的网站上显示社交图标?

    我拼命尝试向我的网站添加一些图标 但无法让它们正确显示 我想要的只是一个包含图像并在线显示它们的容器 然后我想在该容器和图像之间添加一些填充 仅此而已 看这里我的方法 如果有人可以帮助我并纠正我的代码 使其真正有效 我会非常高兴 在我的 H
  • 如何在 HTML 中将文本设置为粗体?

    我正在尝试使用 HTML 将一些文本加粗 但我很难让它发挥作用 这就是我正在尝试的 Some
  • 如果超过高度则动态浮动柱

    I ve got a questing concerning a dynamic floating layout of li s in a ul Container 灰色容器 ul 固定高度为 150px 所有 li 其中的应使用最大高度
  • 浮动CSS属性导致父div不继承高度?

    我在 div 中有一个元素设置为float right但是 它会导致最外面的 div 不环绕 这是jsfiddle http jsfiddle net W792X 5 for it 我试图让提交按钮在 div 内浮动 但设置该属性似乎会导致
  • jQuery:向左滑动和向右滑动

    我见过slideUp and slideDown在 jQuery 中 左右滑动的功能 方式怎么样 您可以使用 jQuery UI 中的附加效果来做到这一点 详情请参阅此处 http docs jquery com UI Effects Sl

随机推荐

  • 稿费一般多少钱一千字_写一篇1000字的稿子多少钱?一般

    目录 1 关于稿子代写 一般稿子分三种类型 第一种 原创稿子 第二种 转发稿子 第三种 书评稿子 这些都是主分类 当前每个主分类肯定会包含很多的子分类 如 翻译稿子 新闻稿子 演讲稿子 会议稿子 等等 当然稿子是有规定的书写格式 并不是随便
  • 使用cs与msf进行内网横向移动

    使用cs与msf进行内网横向移动 目标系统为 192 168 1 123 跳板主机为 192 168 1 118 一 使用cs探测内网 1 将目标上线至CS 2 使用cs探测内网信息 查看当前目标系统网络情况 确认目标系统所在内网网段 3
  • 王者荣耀战力查询的保姆级教程

    王者荣耀段位水平是可以直接看到的 但是荣耀战力才是衡量玩家实力的标准 因为各种排行榜 甚至是职业选手选拔也是看这个荣耀战力的 战力系统可以决定玩家所在区域的排名 并发放牌子 这也是是想展示的一种 那有些玩家所在区域玩家较多 那竞争自然而然地
  • 浅谈自然语言处理(NLP)学习路线(一)--- 概述

    资料汇总 引流 大道至简之机器学习系列 流畅的python https pan baidu com s 1l5Tl0yZS0NTixAilH9S2aQ 提取码 38qa 统计学习方法第二版 https pan baidu com s 18p
  • 一个不错的选色网站

    http 0to255 com 转载于 https www cnblogs com sofire archive 2010 10 12 1849141 html
  • Kali-加密文档Office破解-hashcat(字典)

    利用office2john py 导出word的hash值 office2john py YD xls gt hash txt 修改hash内容 cat hash txt gedit hash txt 破解 m 哈希值类型 hashcat
  • 狂神Redis学习笔记(已更完)

    Nosql概述 一 缓存的发展历史 1 MySQL单机时代 90年代 当时一个基本的网站访问量一般不会太大 单个数据库完全够用了 那个时候 更多使用静态网页html 服务器根本没有太大的压力 这种情况下 整个网站的瓶颈是什么 数据量如果太大
  • [SDOI2008]洞穴勘测【LCT维护联通关系】

    题目链接 LCT判断两点联通的这样的一个基础问题 因为不存在环 所以直接LCT维护连接关系即可 include
  • MySQL-DML语句

    DML语句 Create 单行插入数据 多行插入数据 插入否则更新 replace into 查看受影响行数的函数 Retrieve 全列查询 指定列查询 select 函数 表达式 对查询出的列重命名 as distinct order
  • 21 单例模式

    1 定义 单例模式 保证一个类仅有一个实例 并提供一个访问它的全局访问点 单例模式的使用场景 只要一个实例 例如一个Web页面上的计数器 可以不用把每次刷新都记录到数据中 使用单例模式保持计数器的值 并确保是线程安全的 创建一个对象需要消耗
  • 设计模式概述

    设计模式的重要性 以实际工作举例 给用户开 开发完成后客户增加新的功能 例如原本程序适配两个产品 增加第三个产品 程序可扩展性 程序开发完成后的后续维护 规范性 可读性 总结 高内聚 低耦合 可维护性 可扩展性 类与类之间的关系 依赖 类A
  • 基于Qt的Sapera LT开发

    基于Qt的Sapera LT开发 基于Qt来开发Sapera LT 需要经过以下几个步骤 1 在建立的Qt工程添加Sapera LT的相关路径 1 右键工程 Properties 2 Configuration Properties C C
  • echarts x轴的日期显示为年月日

    xAxis type time min new Date 开始时间 max new Date 结束时间 axisLabel interale 0 rotate 40 设置日期显示样式 倾斜度 formatter function value
  • linux下查看U盘文件

    1 查看U盘是哪个设备 shell gt sudo fdisk l 2 挂载到一个目录下 新建一个目录 shell gt cd mnt shell gt sudo mkdir usb 将u盘挂载到该目录下 shell gt sudo mou
  • vs2017 15.5.x dll调试不成功问题

    配置 Unity5 5 5f1 vs2017 问题 更新到vs2017 15 5 0之后 项目中用到的dll调试断点进不去了 之后更新到15 5 1 依然进不去 现象 Unity工程下生成的dll文件只有dll pdb没有dll mdb文件
  • SEO利器:使用Python爬虫实现竞争对手关键词分析

    在当今的数字时代 搜索引擎优化 SEO 是许多网站主和营销人员追求的目标 为了提高自己网站在搜索结果中的排名 并吸引更多有针对性的流量 我们需要深入了解竞争对手以及他们所使用的关键词策略 本篇文章将向您介绍一种强大而有效的工具 Python
  • docker搭建私有npm仓库

    一 dockerhub搜索verdaccio verdaccio镜像 二 docker拉取镜像 docker pull verdaccio verdaccio latest 三 查看镜像 docker image ls 四 运行容器 doc
  • 三维GIS工程师进阶训练营

    本文档只用作个人学习过程记录 部分基础内容不会详细记录 三维GIS工程师进阶训练营 一 三维GIS项目开发概述 1 三维GIS关键技术 2 行业应用 二 空间数据获取与优化处理方法 2 1 倾斜摄影三维模型数据的处理与优化 1 倾斜摄影三维
  • R语言 数据处理(一)

    数据合并 提取及降维处理 install packages dplyr 数据处理包dplyr library dplyr name1 lt c Bob Mary Jane Kim name2 lt c Bob Mary Kim Jane w
  • Animate.css 动画库介绍

    一个漂亮炫酷的网页离不开动画效果的点缀 现在也有很多动画库可供选择 这里我来介绍一个简单好用的动画库Animate css animate css在线效果用一个在线网页演示了所有动画效果 我们只需要在下拉列表中选择一个效果名字 即可查看它的