基于css3 animate制作絢麗的動(dòng)畫(huà)效果

2024-07-11 08:29:38

字體：大中小

供稿：網(wǎng)友

Animate.css是一個(gè)超強(qiáng)的CSS3動(dòng)畫(huà)庫(kù)，它使用簡(jiǎn)單，只需要將相關(guān)效果對(duì)應(yīng)的class加入頁(yè)面元素中，就能實(shí)現(xiàn)翻轉(zhuǎn)、滑動(dòng)、旋轉(zhuǎn)等等復(fù)雜超炫的跨瀏覽器的動(dòng)畫(huà)效果，它讓開(kāi)發(fā)這制作頁(yè)面動(dòng)畫(huà)變得非常簡(jiǎn)單。
首先給大家展示效果圖：

效果演示源碼下載

如何使用
首先引入animate css文件。

復(fù)制代碼

代碼如下:
<link rel="stylesheet" href="animate.min.css">

然后給指定的元素加上指定的動(dòng)畫(huà)class樣式名。

復(fù)制代碼

代碼如下:
<div class="animated bounceOutLeft"></div>

這里包括兩個(gè)class名，第一個(gè)是基本的，也是必須添加的樣式名，任何想實(shí)現(xiàn)的元素都得添加這個(gè)樣式。第二個(gè)是指定的動(dòng)畫(huà)樣式名，也就是想要什么動(dòng)畫(huà)效果，指定對(duì)應(yīng)的動(dòng)畫(huà)樣式名稱(chēng)就可以。如果想讓動(dòng)畫(huà)循環(huán)則可以加入樣式：infinite 。
Animate.css提供了以下多種動(dòng)畫(huà)效果可以直接作為class樣式添加使用，就像文章：jQuery Easing 動(dòng)畫(huà)效果擴(kuò)展提到的easing動(dòng)畫(huà)一樣。
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
如果說(shuō)想給某個(gè)元素動(dòng)態(tài)添加動(dòng)畫(huà)樣式，可以結(jié)合jquery來(lái)實(shí)現(xiàn)：

復(fù)制代碼

代碼如下:
$('#yourElement').addClass('animated bounceOutLeft');

當(dāng)動(dòng)畫(huà)效果執(zhí)行完成后還可以通過(guò)以下代碼添加事件：

復(fù)制代碼

代碼如下:
$('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);

上一篇：純HTML5+CSS3制作圖片旋轉(zhuǎn)

下一篇：div層調(diào)整z-index屬性無(wú)效原因分析及解決方法

發(fā)表評(píng)論

共有條評(píng)論