本文共 858 字,大约阅读时间需要 2 分钟。
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; //动画执行次数}
以下是为大家收集的特效