Maison >interface Web >tutoriel CSS >Présentation d'Animate.css, une bibliothèque d'animation simple et facile à utiliser
Présentation d'Animate.css, une bibliothèque d'animation simple et facile à utiliser
- 零下一度original
- 2017-05-02 14:19:242038parcourir
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.
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
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>
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>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.
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.
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
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>
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>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.
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!