Wir stellen Animate.css vor, eine einfache und benutzerfreundliche Animationsbibliothek-CSS-Tutorial-php.cn

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

零下一度

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

Original

1978 Leute haben es durchsucht

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.

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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!