介紹一個簡單好用的動畫庫Animate.css
- 零下一度原創
- 2017-05-02 14:19:242039瀏覽
一個漂亮又酷的網頁離不開動畫效果的點綴。現在也有很多動畫庫可供選擇，這裡我來介紹一個簡單好用的動畫庫Animate.css。
animate.css線上效果用一個線上網頁示範了所有動畫效果，我們只需要在下拉清單中選擇一個效果名字，即可查看它的實際動畫效果。大家可以直接到這個網站測試這些動畫效果。
測試完成之後，我們可以將它加入自己的專案。我們既可以使用bower或npm下載。
bower install animate.css --savenpm install animate.css --save
也可以使用CDNJS，然後在頁面中引用animate.css檔案。
<head> <link rel="stylesheet" href="www.php.cn/ajax/libs/animate.css/3.5.2/animate.min.css"></head>
最後在希望擁有動畫效果的元素上加上animated類別和對應的動畫類別即可。比方說下面就應用了一個回彈的動畫效果。你可以直接將程式碼儲存為HTML文件，然後就可以在瀏覽器中查看效果了。
<!DOCTYPE html><html><head>
<meta charset="UTF-8">
<title>动画效果</title>
<link rel="stylesheet" href="www.php.cn/ajax/libs/animate.css/3.5.2/animate.min.css"></head><body><h1 class="animated bounce">弹弹弹！</h1></body></html>這樣，這個動畫庫就介紹完了，如果你有自己的專案的話，可以考慮讓一些元素擁有動畫效果，讓頁面更活潑一點。
一個漂亮又酷的網頁離不開動畫效果的點綴。現在也有很多動畫庫可供選擇，這裡我來介紹一個簡單好用的動畫庫Animate.css。
animate.css線上效果以一個線上網頁示範了所有動畫效果，我們只需要在下拉清單中選擇一個效果名字，即可查看它的實際動畫效果。大家可以直接到這個網站測試這些動畫效果。
測試完成之後，我們可以將它加入自己的專案。我們既可以使用bower或npm下載。
bower install animate.css --savenpm install animate.css --save
也可以使用CDNJS，然後在頁面中引用animate.css檔案。
<head> <link rel="stylesheet" href="www.php.cn/ajax/libs/animate.css/3.5.2/animate.min.css"></head>
最後在希望擁有動畫效果的元素上加上animated類別和對應的動畫類別即可。比方說下面就應用了一個回彈的動畫效果。你可以直接將程式碼儲存為HTML文件，然後就可以在瀏覽器中查看效果了。
<!DOCTYPE html><html><head>
<meta charset="UTF-8">
<title>动画效果</title>
<link rel="stylesheet" href="www.php.cn/ajax/libs/animate.css/3.5.2/animate.min.css"></head><body><h1 class="animated bounce">弹弹弹！</h1></body></html>這樣，這個動畫庫就介紹完了，如果你有自己的專案的話，可以考慮讓一些元素擁有動畫效果，讓頁面更活潑一點。
以上是介紹一個簡單好用的動畫庫Animate.css的詳細內容。更多資訊請關注PHP中文網其他相關文章！