介紹一個簡單好用的動畫庫Animate.css-css教學-PHP中文網

介紹一個簡單好用的動畫庫Animate.css

零下一度

發布： 2017-05-02 14:19:24

原創

1978 人瀏覽過

一個漂亮又酷的網頁離不開動畫效果的點綴。現在也有很多動畫庫可供選擇，這裡我來介紹一個簡單好用的動畫庫Animate.css。

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線上效果以一個線上網頁示範了所有動畫效果，我們只需要在下拉清單中選擇一個效果名字，即可查看它的實際動畫效果。大家可以直接到這個網站測試這些動畫效果。

介紹一個簡單好用的動畫庫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>

登入後複製

<!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中文網其他相關文章！