CSS3 Animate 下載

CSS3 Animate 是一種基于 CSS3 實(shí)現(xiàn)的動(dòng)畫效果庫(kù)，可以簡(jiǎn)單地創(chuàng)建各種動(dòng)畫效果，包括簡(jiǎn)單的滑動(dòng)、漸變、旋轉(zhuǎn)等等，還能通過(guò) JavaScript 編寫復(fù)雜的交互動(dòng)畫。

使用方法

1. 下載 CSS3 Animate 并引入到 HTML 中
<link rel="stylesheet" href="css/animate.css">
2. 在 HTML 中需要添加動(dòng)畫效果的元素中添加 class="animate" + 動(dòng)畫名稱
<div class="animate fadeIn"></div>
3. 可以添加以下類名來(lái)指定不同的動(dòng)畫效果
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、flip、flipInX、flipInY、flipOutX、flipOutY、lightSpeedIn、lightSpeedOut、rotateIn、rotateInDownLeft、rotateInDownRight、rotateInUpLeft、rotateInUpRight、rotateOut、rotateOutDownLeft、rotateOutDownRight、rotateOutUpLeft、rotateOutUpRight、slideInUp、slideInDown、slideInLeft、slideInRight、slideOutUp、slideOutDown、slideOutLeft、slideOutRight、zoomIn、zoomInDown、zoomInLeft、zoomInRight、zoomInUp、zoomOut、zoomOutDown、zoomOutLeft、zoomOutRight、zoomOutUp、hinge、rollIn、rollOut

案例

<button class="animate pulse">按鈕</button>
<img src="img/logo.png" alt="logo" class="animate rotateIn">
<div class="animate slideInRight">這是一段文字</div>