Heim > Artikel > Web-Frontend > Wir stellen Animate.css vor, eine einfache und benutzerfreundliche Animationsbibliothek

Wir stellen Animate.css vor, eine einfache und benutzerfreundliche Animationsbibliothek

零下一度Original: 2017-05-02 14:19:241980Durchsuche

Eine schöne und coole Webseite kann nicht von der Verschönerung durch Animationseffekte getrennt werden. Es stehen mittlerweile viele Animationsbibliotheken zur Auswahl. Hier stelle ich eine einfache und benutzerfreundliche Animationsbibliothek Animate.css vor.

animate.css Online-Effekt verwendet eine Online-Webseite, um alle Animationseffekte zu demonstrieren. Wir müssen nur einen Effektnamen in der Dropdown-Liste auswählen, um den tatsächlichen Animationseffekt anzuzeigen. Sie können diese Animationseffekte direkt auf dieser Website testen.

Nachdem der Test abgeschlossen ist, können wir ihn zu unserem Projekt hinzufügen. Zum Herunterladen können wir Bower oder NPM verwenden.

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

Sie können auch CDNJS verwenden und dann auf der Seite auf die Datei animate.css verweisen.

<head>
  <link rel="stylesheet" href="www.php.cn/ajax/libs/animate.css/3.5.2/animate.min.css"></head>

Fügen Sie abschließend die Klasse animated und die entsprechende Animationsklasse zu dem Element hinzu, für das Sie Animationseffekte haben möchten. Nachfolgend wird beispielsweise ein Rebound-Animationseffekt angewendet. Sie können den Code direkt als HTML-Datei speichern und den Effekt dann im Browser betrachten.

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

Auf diese Weise wird diese Animationsbibliothek vorgestellt. Wenn Sie ein eigenes Projekt haben, können Sie erwägen, einigen Elementen Animationseffekte zu verleihen, um die Seite lebendiger zu gestalten.

Wir stellen Animate.css vor, eine einfache und benutzerfreundliche Animationsbibliothek

Nachdem der Test abgeschlossen ist, können wir ihn zu unserem Projekt hinzufügen. Zum Herunterladen können wir Bower oder NPM verwenden.

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

Sie können auch CDNJS verwenden und dann auf der Seite auf die Datei animate.css verweisen.

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

Das obige ist der detaillierte Inhalt vonWir stellen Animate.css vor, eine einfache und benutzerfreundliche Animationsbibliothek. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Was bedeuten Filter in CSS?Nächster Artikel：Was bedeuten Filter in CSS?

In Verbindung stehende Artikel

Mehr sehen