Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Animate.css 动画库介绍

Animate.css 动画库介绍

作者头像
乐百川
发布于 2018-01-09 02:31:03
发布于 2018-01-09 02:31:03
1.9K00
代码可运行
举报
运行总次数:0
代码可运行

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

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

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
bower install animate.css --save

npm install animate.css --save

也可以使用CDNJS,然后在页面中引用animate.css文件。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
</head>

最后在希望拥有动画效果的元素上添加animated类和相应的动画类即可。比方说下面就应用了一个回弹的动画效果。你可以直接将代码保存为HTML文件,然后就可以在浏览器中查看效果了。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!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>

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017年04月27日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Animate.css动画库的安装与使用
Animate.css是一款有趣的,跨浏览器的css3动画库,可以非常简单的实现各种炫酷的动画效果,可以在项目中使用。
德顺
2019/11/13
2.1K0
33.Vue-使用第三方animate.css类库实现动画
Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。 包括以下工具:
Devops海洋的渔夫
2020/05/04
6.9K0
可能是最强大的 CSS 动画库
在前端开发中,想让页面变得更生动自然,往往需要添加一些小动画,比如渐隐渐现、摇摆等。
程序员鱼皮
2021/04/20
9750
animate.css+wow.js实现网页动画
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>animate动画</title> <link rel="stylesheet
明知山
2020/09/03
2.7K0
animate.css的使用
animate.css是一个使用CSS3的animation制作的动画效果的CSS集合,里面预设了很多种常用的动画,且使用非常简单。本文将详细介绍animate.css的使用
全栈程序员站长
2022/09/07
9180
animate.css的使用
Hexo用wowjs给博客添加动画效果
本篇仅使用butterfly_v3.6.0 +的主题版本,如果是在这之前的版本,请移步下方教程链接。
花猪
2022/02/22
9960
Hexo用wowjs给博客添加动画效果
python自动化之BeautifulReport显示异常的解决方案
真的,大家相信我,领导也要相信我,昨天下午我下班前运行之后报告还是很完美的,非常好的。
梦无矶小仔
2022/12/20
1.1K0
python自动化之BeautifulReport显示异常的解决方案
比 Animation.css 还要炫酷的动画库插件
micron.js是一款可生成炫酷 CSS3 动画的js动画库插件。通过 micron.js 插件,你可以为页面的任意DOM元素添加12种炫酷 CSS3 动画效果。并能通过js代码或html5 data属性来串联各种CSS3动画效果。
用户7293182
2022/01/20
8050
给WordPress博客的Pix主题接入一言接口,随机展示一句语录
这一段是自定义css,不改的话样式会错乱,所以我给头像盒子改为了flex布局,然后顺便加一个圆角,圆润点好看,我觉得。
JanYork_简昀
2022/12/09
9790
给WordPress博客的Pix主题接入一言接口,随机展示一句语录
让css3动画变得有趣wowjs
animate.css 包含了一组炫酷、有趣、跨浏览器的动画,可以在你的项目中直接使用。
zhaoolee
2018/08/02
1.9K0
让css3动画变得有趣wowjs
WOW.js – 让页面滚动更有趣
WOW.js 依赖 animate.css,所以它支持 animate.css 多达 60 多种的动画效果,能满足您的各种需求。由于使用了CSS3动画,所以一些老旧的浏览器是不支持的。为了兼容,可以增加浏览器判断。
青年码农
2021/08/18
3.7K0
用Github五万颗星的css动画库, 为网页增添趣味性
animate整个项目只有一个css文件, 使用方法也非常简单, 只要给相应的元素添加class属性即可
zhaoolee
2019/02/26
9460
50·灵魂前端工程师养成-Vue动画
-多年互联网运维工作经验,曾负责过大规模集群架构自动化运维管理工作。 -擅长Web集群架构与自动化运维,曾负责国内某大型金融公司运维工作。 -devops项目经理兼DBA。 -开发过一套自动化运维平台(功能如下): 1)整合了各个公有云API,自主创建云主机。 2)ELK自动化收集日志功能。 3)Saltstack自动化运维统一配置管理工具。 4)Git、Jenkins自动化代码上线及自动化测试平台。 5)堡垒机,连接Linux、Windows平台及日志审计。 6)SQL执行及审批流程。 7)慢查询日志分析web界面。
DriverZeng
2022/11/08
4740
50·灵魂前端工程师养成-Vue动画
html css animate,animate.css
var oBtn=document.getElementsByTagName(“input”)[1];
全栈程序员站长
2022/09/18
2.4K0
html css animate,animate.css
动画插件–AnimateCSS
animated这个类名是animated.css的基类, 但凡需要通过animated.css来添加动画, 都需要添加这个基类
全栈程序员站长
2022/09/18
7260
11个基于HTML/CSS/JS的情人节表白可爱小游戏、小动画【情人节主题征文】
本来想赶在前几天在情人节之前把这篇文章写完,结果又是过年,又是走亲戚,情人节这天我又和女朋友看电影去了,所以一直到今天,白天忙完了事情,这才给大家带来这些基于HTML/CSS/JS的情人节表白可爱小游戏、小动画。
海拥
2021/08/23
1.2K0
11个基于HTML/CSS/JS的情人节表白可爱小游戏、小动画【情人节主题征文】
Ionic3学习笔记(五)动画之使用 animate.css
animate.css 是一款强大的、跨浏览器的预设CSS3动画库,内置了很多典型的CSS3动画,兼容性好使用方便,可以应用于我们的基于Ionic3的Hybrid App,在这里你可以看到各个动画的动画效果,现在最新的版本是3.5.2,强烈建议大家使用。
Theo Tsao
2018/09/07
1.1K0
只需要3招将你的Vue项目访问时间从1分钟缩短到3秒以内
基于Vuecli搭建的vue项目简单快捷,易于开发。在node.js的加持下你可以更快的引入万千JavaScript开发库,仅仅依靠前端就可以实现以前使用后端才能实现的功能,如通过axios便可以快捷的与后端进行数据交互等。
IT大咖说
2020/10/19
9990
只需要3招将你的Vue项目访问时间从1分钟缩短到3秒以内
《Ajax科普入门》用Ajax写个经典影视台词网易云评论无限滚动
为了让提升用户体验,微软在IE5中引入了XMLHttpRequest, 简称XHR,XMLHttpRequest的出现,可以让网页无需刷新,即可从服务器获取最新的内容,这项技术也就是所谓的Ajax
zhaoolee
2021/12/07
1.2K0
《Ajax科普入门》用Ajax写个经典影视台词网易云评论无限滚动
支持animate.css动画的jquery弹出层特效
jquery.popup.js是一款支持animate.css动画效果的弹出层模态窗口插件。你可以在初始化插件时,配置模态窗口打开和关闭时的CSS3,使用非常炫酷和方便。
用户5997198
2019/10/25
6.7K0
支持animate.css动画的jquery弹出层特效
相关推荐
Animate.css动画库的安装与使用
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验