ホームページ  >  記事  >  ウェブフロントエンド  >  シンプルで使いやすいアニメーション ライブラリである Animate.css の紹介

シンプルで使いやすいアニメーション ライブラリである Animate.css の紹介

零下一度
零下一度オリジナル
2017-05-02 14:19:242005ブラウズ

美しくクールなウェブページは、アニメーション効果の装飾と切り離すことができません。現在、アニメーション ライブラリはたくさんありますが、ここではシンプルで使いやすいアニメーション ライブラリ Animate.css を紹介します。

animate.css オンライン効果は、オンライン Web ページを使用してすべてのアニメーション効果を示します。実際のアニメーション効果を表示するには、ドロップダウン リストで効果名を選択するだけです。この Web サイトに直接アクセスして、これらのアニメーション効果をテストできます。

シンプルで使いやすいアニメーション ライブラリである Animate.css の紹介

テストが完了したら、プロジェクトに追加できます。ダウンロードには bower または npm を使用できます。

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

CDNJS を使用して、ページ内の animate.css ファイルを参照することもできます。 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>

最后在希望拥有动画效果的元素上添加animated

<!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>

最後に、animated クラスと、アニメーション効果を与えたい要素に対応するアニメーション クラスを追加します。たとえば、以下ではリバウンドアニメーション効果が適用されています。コードを HTML ファイルとして直接保存し、ブラウザで効果を表示できます。

rrreee

このようにして、このアニメーション ライブラリが導入されました。独自のプロジェクトがある場合は、ページをより活気のあるものにするために、いくつかの要素にアニメーション効果を与えることを検討できます。 🎜🎜美しくクールなウェブページは、アニメーション効果の装飾と切り離すことができません。現在、アニメーション ライブラリはたくさんありますが、ここではシンプルで使いやすいアニメーション ライブラリ Animate.css を紹介します。 🎜🎜animate.css オンライン効果は、オンライン Web ページを使用してすべてのアニメーション効果を示します。実際のアニメーション効果を表示するには、ドロップダウン リストで効果名を選択するだけです。この Web サイトに直接アクセスして、これらのアニメーション効果をテストできます。 🎜🎜シンプルで使いやすいアニメーション ライブラリである Animate.css の紹介🎜🎜テスト後が完了したら、それを独自のプロジェクトに追加できます。ダウンロードには bower または npm を使用できます。 🎜rrreee🎜CDNJS を使用して、ページ内の animate.css ファイルを参照することもできます。 🎜rrreee🎜最後に、animated クラスと、アニメーション効果を与えたい要素に対応するアニメーション クラスを追加します。たとえば、以下ではリバウンドアニメーション効果が適用されています。コードを HTML ファイルとして直接保存し、ブラウザで効果を表示できます。 🎜rrreee🎜 このようにして、このアニメーション ライブラリが導入されました。独自のプロジェクトがある場合は、ページをより活気のあるものにするために、いくつかの要素にアニメーション効果を与えることを検討できます。 🎜

以上がシンプルで使いやすいアニメーション ライブラリである Animate.css の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。