介绍一个简单好用的动画库Animate.css-tutorial css-php.cn

介绍一个简单好用的动画库Animate.css

零下一度

Lepaskan： 2017-05-02 14:19:24

asal

2017 orang telah melayarinya

一个漂亮炫酷的网页离不开动画效果的点缀。现在也有很多动画库可供选择，这里我来介绍一个简单好用的动画库Animate.css。

animate.css在线效果用一个在线网页演示了所有动画效果，我们只需要在下拉列表中选择一个效果名字，即可查看它的实际动画效果。大家可以直接到这个网站上测试这些动画效果。

在线网站

测试完成之后，我们可以将它添加到自己的项目中。我们既可以使用bower或者npm下载。

bower install animate.css --savenpm install animate.css --save

Salin selepas log masuk

也可以使用CDNJS，然后在页面中引用animate.css文件。

<head>
  <link rel="stylesheet" href="m.sbmmt.com/ajax/libs/animate.css/3.5.2/animate.min.css"></head>

Salin selepas log masuk

最后在希望拥有动画效果的元素上添加animated类和相应的动画类即可。比方说下面就应用了一个回弹的动画效果。你可以直接将代码保存为HTML文件，然后就可以在浏览器中查看效果了。

<!DOCTYPE html><html><head>
    <meta charset="UTF-8">
    <title>动画效果</title>
    <link rel="stylesheet" href="m.sbmmt.com/ajax/libs/animate.css/3.5.2/animate.min.css"></head><body><h1 class="animated bounce">弹弹弹！</h1></body></html>

Salin selepas log masuk

这样，这个动画库就介绍完了，如果你有自己的项目的话，可以考虑让一些元素拥有动画效果，让页面更活泼一点。

一个漂亮炫酷的网页离不开动画效果的点缀。现在也有很多动画库可供选择，这里我来介绍一个简单好用的动画库Animate.css。

在线网站

测试完成之后，我们可以将它添加到自己的项目中。我们既可以使用bower或者npm下载。

bower install animate.css --savenpm install animate.css --save

Salin selepas log masuk

也可以使用CDNJS，然后在页面中引用animate.css文件。

<head>
  <link rel="stylesheet" href="m.sbmmt.com/ajax/libs/animate.css/3.5.2/animate.min.css"></head>

Salin selepas log masuk

<!DOCTYPE html><html><head>
    <meta charset="UTF-8">
    <title>动画效果</title>
    <link rel="stylesheet" href="m.sbmmt.com/ajax/libs/animate.css/3.5.2/animate.min.css"></head><body><h1 class="animated bounce">弹弹弹！</h1></body></html>

Salin selepas log masuk

这样，这个动画库就介绍完了，如果你有自己的项目的话，可以考虑让一些元素拥有动画效果，让页面更活泼一点。

Atas ialah kandungan terperinci 介绍一个简单好用的动画库Animate.css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!