Présentation d'Animate.css, une bibliothèque d'animation simple et facile à utiliser-tutoriel CSS-php.cn

Présentation d'Animate.css, une bibliothèque d'animation simple et facile à utiliser

零下一度

Libérer： 2017-05-02 14:19:24

original

2037 Les gens l'ont consulté

Une page Web belle et cool est indissociable de l'embellissement des effets d'animation. Il existe désormais de nombreuses bibliothèques d'animation parmi lesquelles choisir. Ici, je vais présenter une bibliothèque d'animation simple et facile à utiliser, Animate.css.

L'effet en ligne animate.css utilise une page Web en ligne pour démontrer tous les effets d'animation. Il nous suffit de sélectionner un nom d'effet dans la liste déroulante pour voir son effet d'animation réel. Vous pouvez vous rendre directement sur ce site pour tester ces effets d'animation.

Présentation dAnimate.css, une bibliothèque danimation simple et facile à utiliser

Une fois le test terminé, nous pouvons l'ajouter à notre projet. Nous pouvons utiliser bower ou npm pour télécharger.

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

Copier après la connexion

Vous pouvez également utiliser CDNJS puis référencer le fichier animate.css dans la page.

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

Copier après la connexion

Enfin, ajoutez la classe animated et la classe d'animation correspondante à l'élément auquel vous souhaitez avoir des effets d'animation. Par exemple, un effet d'animation de rebond est appliqué ci-dessous. Vous pouvez enregistrer le code directement sous forme de fichier HTML, puis afficher l'effet dans le navigateur.

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

Copier après la connexion

De cette façon, cette bibliothèque d'animation est introduite. Si vous avez votre propre projet, vous pouvez envisager de donner des effets d'animation à certains éléments pour rendre la page plus vivante.

Une page Web belle et cool ne peut être séparée de l'embellissement des effets d'animation. Il existe désormais de nombreuses bibliothèques d'animation parmi lesquelles choisir. Ici, je vais présenter une bibliothèque d'animation simple et facile à utiliser, Animate.css.

Présentation dAnimate.css, une bibliothèque danimation simple et facile à utiliser

Une fois le test terminé, nous pouvons l'ajouter à notre projet. Nous pouvons utiliser bower ou npm pour télécharger.

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

Copier après la connexion

Vous pouvez également utiliser CDNJS puis référencer le fichier animate.css dans la page.

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

Copier après la connexion

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

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!