博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
动画库animate.css的用法
阅读量:6455 次
发布时间:2019-06-23

本文共 858 字,大约阅读时间需要 2 分钟。

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/w178191520/article/details/78847536

简介

animate.css是一个来自国外的 CSS3 动画库,它预设了引起弹跳(bounce)、摇摆(swing)、颤抖(wobble)、抖动(shake)、闪烁(flash)、翻转(flip)、旋转(rotate)、淡入淡出(fade)、滑动(Sliding)、光速(lightspeed)、缩放变焦(Zoom)、翻滚(roll)等多达 70 多种动画效果,借助 animate.css 能够很方便、快速的制作 常见的动画效果。当然animate.css只兼容支持 CSS3 animate 属性的浏览器,他们分别是:IE10+、Firefox、Chrome、Opera、Safari。

使用方法

1、引入文件

<link rel="stylesheet" href="animate.min.css">
2、在html中调用
<h1 class="animated bounceOut">Animate.css</h1>
给元素加上class属性,animated是必须加的,bounceOut是动画效果的名称。
也可以使原生JS或得Jquery动态添加使用动画,只要在需要动画的元素的class上加对应的动画名称即可,比如

$(function(){
$('#jqhtml').addClass('animated bounce');});

animate.css 的默认设置也许有些时候并不是我们想要的,所以你可以重新设置,比如:

#jqhtml{    animate-duration: 2s;    //动画持续时间    animate-delay: 1s;    //动画延迟时间    animate-iteration-count: 2;    //动画执行次数}

示例

以下是为大家收集的特效

下载地址

你可能感兴趣的文章
有氧运动 && 无氧运动
查看>>
mysql时间查看以及定时器相关操作
查看>>
【最大点独立集】【poj1419】【Graph Coloring】
查看>>
php5魔术函数、魔术常量
查看>>
Pusher 消息推送测试工具
查看>>
html&css中的文字对齐问题
查看>>
Qt基本布局(QLayout)
查看>>
springboot搭建的2种方式
查看>>
多线程网络程序服务端架构
查看>>
github文件上传及github pages博客搭建教程
查看>>
左神算法进阶班1_5BFPRT算法
查看>>
Linux修改用户密码
查看>>
小程序里json字符串转json对象需注意的地方
查看>>
【java】struts2+hibernate写的一个学生管理系统
查看>>
EasyUI datagrid easyui datagrid +dialog 加载 可直接运行 七
查看>>
HTTP 与 Post
查看>>
iOS开发本地推送(iOS10)UNUserNotificationCenter
查看>>
考研准备
查看>>
elementUI默认样式修改不成功的问题
查看>>
Win8 使用经验之飞鸽传书
查看>>