基于css3 animate制作绚丽的动画效果
程序员文章站
2022-05-21 14:20:24
Animate.css是一个超强的CSS3动画库,它使用简单只需要将相关效果对应的class加入页面元素中,就能实现翻转、滑动、旋转等等复杂超炫的跨浏览器的动画效果,让开发这制作页面动画变得... 15-11-24...
animate.css是一个超强的css3动画库,它使用简单,只需要将相关效果对应的class加入页面元素中,就能实现翻转、滑动、旋转等等复杂超炫的跨浏览器的动画效果,它让开发这制作页面动画变得非常简单。
首先给大家展示效果图:
如何使用
首先引入animate css文件。
复制代码
代码如下:<link rel="stylesheet" href="animate.min.css">
然后给指定的元素加上指定的动画class样式名。
复制代码
代码如下:<div class="animated bounceoutleft"></div>
这里包括两个class名,第一个是基本的,也是必须添加的样式名,任何想实现的元素都得添加这个样式。第二个是指定的动画样式名,也就是想要什么动画效果,指定对应的动画样式名称就可以。如果想让动画循环则可以加入样式:infinite 。
animate.css提供了以下多种动画效果可以直接作为class样式添加使用,就像文章:jquery easing 动画效果扩展提到的easing动画一样。
bounce ,flash ,pulse ,rubberband ,shake ,swing ,tada ,wobble ,jello ,bouncein ,bounceindown ,bounceinleft ,bounceinright ,bounceinup ,bounceout ,bounceoutdown ,bounceoutleft ,bounceoutright ,bounceoutup ,fadein ,fadeindown ,fadeindownbig ,fadeinleft ,fadeinleftbig ,fadeinright ,fadeinrightbig ,fadeinup ,fadeinupbig ,fadeout ,fadeoutdown ,fadeoutdownbig ,fadeoutleft ,fadeoutleftbig ,fadeoutright ,fadeoutrightbig ,fadeoutup ,fadeoutupbig ,flipinx ,flipiny ,flipoutx ,flipouty ,lightspeedin ,lightspeedout ,rotatein ,rotateindownleft ,rotateindownright ,rotateinupleft ,rotateinupright ,rotateout ,rotateoutdownleft ,rotateoutdownright ,rotateoutupleft ,rotateoutupright ,hinge ,rollin ,rollout ,zoomin ,zoomindown ,zoominleft ,zoominright ,zoominup ,zoomout ,zoomoutdown ,zoomoutleft ,zoomoutright ,zoomoutup ,slideindown ,slideinleft ,slideinright ,slideinup ,slideoutdown ,slideoutleft ,slideoutright ,slideoutup
如果说想给某个元素动态添加动画样式,可以结合jquery来实现:
复制代码
代码如下:$('#yourelement').addclass('animated bounceoutleft');
当动画效果执行完成后还可以通过以下代码添加事件:
复制代码
代码如下:$('#yourelement').one('webkitanimationend mozanimationend msanimationend oanimationend animationend', dosomething);
上一篇: Cy菁染料活性酯的分子量光谱及溶解度介绍
下一篇: 这是哪个函件
推荐阅读
-
66种基于animate.css的CSS消息提示动画效果_html/css_WEB-ITnose
-
Photoshop创建基于切片的翻转制作钓鱼小游戏的动画效果
-
Photoshop创建基于切片的翻转制作钓鱼小游戏的动画效果
-
css3强大的动画效果animate使用说明及浏览器兼容介绍
-
基于css3 animate制作绚丽的动画效果
-
基于css3的属性transition制作菜单导航效果
-
css3强大的动画效果animate使用说明及浏览器兼容介绍
-
Animate怎么制作上下晃动的线条动画效果?
-
Animate怎么制作一个图标渐变变色的动画效果?
-
PPT2007制作礼花绽放动画效果即礼花点燃炸开绚丽的烟花