2. 程式人生 > >animate.css的使用，css特效

animate.css的使用，css特效

阿新 • • 發佈：2019-01-24

前面的話

　　animate.css是一個使用CSS3的animation製作的動畫效果的CSS集合，裡面預設了很多種常用的動畫，且使用非常簡單。本文將詳細介紹animate.css的使用

引入

　　animate.css的最新版本是3.5.2，引入animate.css很容易，有以下幾種方法

　　1、從官網下載

　　2、通過npm安裝

$ npm install animate.css

　　3、使用線上cdn

https://unpkg.com/[email protected]/animate.min.css

效果演示

　　animate.css的使用非常簡單，因為它是把不同的動畫繫結到了不同的類裡，所以想要使用哪種動畫，只需要把通用類animated和相應的類新增到元素上就行了

　　下面來詳細介紹animate.css裡面的類，主要包括Attention(晃動效果)、bounce(彈性緩衝效果)、fade(透明度變化效果)、flip(翻轉效果)、rotate(旋轉效果)、slide(滑動效果)、zoom(變焦效果)、special(特殊效果)這8類

【Attention(晃動效果)】

複製程式碼 
bounce
flash
pulse
rubberBand
shake
headShake
swing
tada
wobble
jello
複製程式碼

　　以在div上使用bounce為例

<div class="animated bounce"></div>

【bounce(彈性緩衝效果)】

複製程式碼 
bounceIn
bounceInDown
bounceInLeft
bounceInRight
bounceInUp
bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp
複製程式碼

【fade(透明度變化效果)】

複製程式碼 
fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig
fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig
複製程式碼

【flip(翻轉效果)】

flip
flipInX
flipInY
flipOutX
flipOutY

【rotate(旋轉效果)】 

複製程式碼 
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight
複製程式碼

【slide(滑動效果)】 

複製程式碼 
slideInDown
slideInLeft
slideInRight
slideInUp
slideOutDown
slideOutLeft
slideOutRight
slideOutUp
複製程式碼

【zoom(變焦效果)】

複製程式碼 
zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp
zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp
複製程式碼

【special(特殊效果)】 

hinge
rollIn
rollOut
lightSpeedIn
lightSpeedOut

實際應用

　　在一般的使用中，直接在元素上新增animated和對應的類名即可

複製程式碼 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/animate.min.css">
<style>
.box{height: 100px;width: 100px;background-color: lightblue}
</style>
</head>
<body>
<div class="box animated flash"></div>
</body>
</html>
複製程式碼

　　通過給JS新增或刪除class，可以實現動態效果

複製程式碼 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/animate.min.css">
<style>
.box{height: 100px;width: 100px;background-color: lightblue}
</style>
</head>
<body>
<button id="btn1">新增</button>
<button id="btn2">移除</button>
<div id="box" class="box"></div>
<script>
var oBtn1 = document.getElementById('btn1');
var oBtn2 = document.getElementById('btn2');
var oBox = document.getElementById('box');
oBtn1.onclick = function(){
  oBox.classList.add('animated');
  oBox.classList.add('flash');
}
oBtn2.onclick = function(){
  oBox.classList.remove('flash');
}
</script>
</body>
</html>
複製程式碼

　　至於動畫的配置引數，比如動畫持續時間，動畫的執行次數等等，可以在元素上自行定義，覆蓋掉animate.css裡面所定義的就行了 

複製程式碼 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/animate.min.css">
<style>
.box{height: 100px;width: 100px;background-color: lightblue}
.infinite{animation-iteration-count:infinite;}
</style>
</head>
<body>
<button id="btn1">新增迴圈的動畫效果</button>
<button id="btn2">移除</button>
<div id="box" class="box"></div>
<script>
var oBtn1 = document.getElementById('btn1');
var oBtn2 = document.getElementById('btn2');
var oBox = document.getElementById('box');
oBtn1.onclick = function(){
  oBox.classList.add('animated');
  oBox.classList.add('flash');
  oBox.classList.add('infinite');
}
oBtn2.onclick = function(){
  oBox.classList.remove('flash');
}
</script>
</body>
</html>
複製程式碼

相關推薦

HTML，字型/列表/圖形/超連結/表格/表單/其它(標籤)，CSS，CSS與HTML結合方式，CSS選擇器，CSS擴充套件選擇器

一、HTML 1.html的簡介 （1）什麼是html？HyperText Mark-up Language ，超文字標記型語言，是網頁的語言。 * 超文字：超出文字的範疇 * 標記：理解為標籤，html中所有的操作都是通過標籤來實現的 * html

animate.css的使用，css特效

前面的話 　　animate.css是一個使用CSS3的animation製作的動畫效果的CSS集合，裡面預設了很多種常用的動畫，且使用非常簡單。本文將詳細介紹animate.css的使用 引入 　　animate.css的最新版本是3.5.2，引入animate.css很容易，有以下幾種方法

html，css，js實現音樂播放，含音訊特效和歌詞

前端播放器樣例  有需要的小夥伴直接用就行：https://download.csdn.net/download/qq_34042417/10669205 實現思路： 1.載入完頁面後請求等到歌曲，歌詞檔案，要實現歌詞跟歌曲滾動則要求歌詞是lrc格式。 2.對歌詞處理，處理

ViewPort，邏輯像素/設備獨立像素，物理像素/設備獨立像素，分辨率，CSS像素，設備像素比DPR，像素密度PPI。

詳細 到手 像素點 spa viewport src pecs 如果 you 一。相關基礎知識 小米note參數查看：http://www.mi.com/minote/specs/ 以下都以小米note這個設備為例。 1.一般說手機的幾寸是指：手機顯示屏對角線的長度。1英

瀏覽器加載不上css，樣式走丟

html meta com 顯示 更新 支持 頭部 oct 刷新 來自：http://www.cnblogs.com/crizygo/p/5466444.html 問題描述：使用eclipse修改樣式文件，瀏覽器的頁面一時顯示一時不顯示，最後直接沒有加載最新的css樣式代碼

響應式設計：理解設備像素，CSS像素和屏幕分辨率

rtk mos ava hdr nsq gms sco dpt nsca 概述屏幕分辨率、設備像素（device-width）和CSS像素（width）這些術語，在非常多語境下。是可互換的，但也因此easy在有差異的地方引起混淆，實際上它們是不同的概念。屏幕分辨率和設備像

每天一個JS 小demo之韓雪冬輪播圖。主要知識點：html，css布局，對於數組和對象的理解和運用

身高 全局 borde ava ebo 空間 use mouseout desc 1 @charset "utf-8"; 2 /* CSS Document */ 3 4 * { padding: 0; margin: 0; } 5 li { list-st

maven jetty 啟動後，不能修改靜態文件，js，css，html

9.4 拷貝 ram 啟動 maven pom jar包 conf text 解決辦法： 1.從jetty的jar包中（位置可能不同，有的jetty-web中）拷貝一份webdefault.xml文件 2.將webdefault.xml 中的useFileMappedBuf

CSS，font-family字體對應英文名稱

sun 強制 簡體中文 b16 family code 增加 c-c mil 宋體 SimSun 黑體 SimHei 微軟雅黑 Microsoft YaHei 微軟正黑體 Microsoft JhengHei 新宋體 NSimSun 新細明體 PM

爬蟲之BeautifulSoup， CSS

ont min 文件打開 速度 名稱 markup css選擇器 -1 全部結果 1. Beautiful Soup的簡介 2. Beautiful Soup 安裝 可以利用 pip 或者 easy_install 來安裝，以下兩種方法均可 easy_install bea

web.xml中的dispatchservlet後，js，css，甚至gif都不能正常顯示

startup view details article 的人 核心 默認 href com 這個可以說是很多初學Springmvc的人都會碰到一個令人頭痛的問題 那就是為什麽我配置好web.xml中的dispatchservlet後，js，css，甚至gif都不能正常顯示

用了springmvc為何JS，CSS等文件就是訪問不到

開頭 pre view 請求 映射 span pan -s clas 那就是為什麽我配置好web.xml中的dispatchservlet後，js，css，甚至gif都不能正常顯示了 我們來看看我們配置的web.xml 1 <!-- springMVC核心

IE8、7、6動態添加樣式時，CSS hack的BUG

node.app 更新 什麽 -i ext .com span css樣式 結果 問題描述 下面這段CSS代碼通過JS動態添加，結果會怎樣呢？ .box { background: red; /* normal browsers */ *backgroun

webpack打包js，css和圖片

調用 dev pat str config 直接 nbsp gte 相對 1、webpack打包默認配置文件webpack.config.js 2、打包js文件：有這個文件並配置可以直接在cmd上webpack打包，沒有這個文件要在cmd上輸入 webpack main.j

導航，頭部，CSS基礎

when cnblogs png utf eache range bmi eve align 制作自己的導航條。 <!DOCTYPE html> <html lang="en"> <head> <meta charse

如果在一個標簽上兩類並用，css樣式表中引用時，兩個類必須寫在一起，不能有空格。

nbsp clas div 樣式表 ext style borde 引用 order 例： <html> 　　<style type="text/css"> 　　　　.mui-table-view-cell.mui-collapse{ 　　　　　bo

iOS 加載本地HTML，css，js

fill 簡書 p標簽 一道 bundle www string text orien 在IOS開發中，可以通過webView來加載HTML文件 步驟如下： 1.需要有一個webView，可以通過storyboard拖拽一個 或者 alloc 一個（我在這裏是拖拽了一個

gulp教程之壓縮合並css，js

配置 分享 ava png 命令行 end 文件名 所有 gulp package.json如果你熟悉 npm 則可以利用 package.json 保存所有 npm install --save-dev gulp-xxx 模塊依賴和模塊版本。在命令行輸入 npm ini

maven項目引入jquery，css等錯

class let default mvc nbsp css request mapping ava 在web.xml中，新增<servlet-mapping> <servlet-name >default </servlet-name

HTML，CSS入門

script 語義 div asc nbsp 嵌套 超文本 團隊 png 課程介紹 前端開發系統化學習教程，前端開發是後端程序員必修的課程，本課程開展註重兩點：1、實際開發中要用到的知識2、面試中要用到的知識 1.1-html概述及html文檔基本結構 html概述 HTM