Utilisez CSS pour réaliser un projet d'animation de transition en survol (super simple)

CSS n'a pas besoin d'être complexe pour obtenir des effets spéciaux. Voici trois exemples de transitions super simples qui ne représentent peut-être que quelques lignes de code, mais qui ajoutent beaucoup à votre application Web.

Vous trouverez ci-dessous le code que nous allons construire dans ce tutoriel

Paramètres du projet

Dans ce projet, nous appliquera l'effet de transition à un élément avec une classe box. À l’intérieur de cet élément de boîte se trouve un contenu textuel centré verticalement et horizontalement. La structure HTML est assez simple :

<div class=&#39;box&#39;>
  <p>TEXT</p>
</div>

Le code CSS est tout aussi simple. Nous voulons utiliser une police sans empattement et nous assurer que le texte du paragraphe dans le div est blanc. Cela peut être réalisé avec le code suivant :

body {
  color: white;
  font-family: Helvetica, Sans-Serif;
}

De plus, ajoutez l'attribut CSS suivant à l'élément box :

.box {
  width:200px;                 /* Set the Width of box          */
  height:50px;                 /* Set the Height of box         */
  background:#424242;          /* Dark Grey Background color    */
  transition:all 0.25s ease;   /* Transition settings           */
  display: flex;               /* Use Flexbox on P              */
  align-items: center;         /* Center P                      */
  justify-content: center;     /* Center P                      */
  margin: 10px;                /* Apply a margin around our Box */
}

Que vous soyez familier ou non avec les propriétés de transition du CSS, nous les présenterons brièvement ici, divisées en trois étapes. .Première étape, nous devons l’appliquer à toutes les propriétés modifiées. Ensuite, définissez la durée de transition sur 0,25 seconde. Enfin, sélectionnez la fonction d'animation en toute simplicité. L'état de performance de facilité est que le processus de début et de fin est relativement lent et que la transition intermédiaire est rapide.

holly high ! Les préparations sont maintenant prêtes, la prochaine étape consiste à ajouter l'effet de transition. Jusqu'à présent, le div devrait ressembler à ceci.

1. Effet de fondu

Tout d'abord, ajoutez une transition de fondu. Créez un nouvel élément div et ajoutez-y une classe appelée fade :

<div class=&#39;box fade&#39;>
  <p>FADE HERE</p>
</div>

La prochaine chose que nous devons faire est de spécifier les règles de survol pour cette classe de fondu. Nous devons utiliser le sélecteur de pseudo-classe CSS :hover pour ce faire. Ce pseudo-sélecteur est valable pour tous les éléments et active la déclaration CSS au survol de l'élément. Sur cette base, nous utilisons le sélecteur :hover pour changer la transparence du div à 0,5 :

.fade:hover {
  opacity: 0.5;
}

Simple. L'instruction CSS ci-dessus spécifie un effet de survol pour le div. Voici à quoi cela ressemble actuellement. La raison pour laquelle vous pouvez voir le style de transition est que nous avons initialement utilisé la déclaration transition:all 0.25s easy; Regardez ci-dessous, est-ce un assez bon effet de fondu :

2. Regardons quelques couleurs

Spécifiez une transition de couleur dans en fait, cela est similaire au processus de transition en évanouissement. Tout d’abord, créez un élément div et ajoutez-y une classe appelée color.

<div class=&#39;box color&#39;>
  <p>COLOR HERE</p>
</div>

De même, nous devons également utiliser le sélecteur :hover pour nous aider à accomplir cela, mais cette fois nous ne changeons pas la transparence mais la couleur d'arrière-plan :

.color:hover {
  background: #FF5722;
}

Ce qui suit est le véritable effet :

3. Balancez-vous ensemble

Ensuite, pour obtenir un effet swing. Cet effet est légèrement plus complexe à mettre en œuvre que les deux exemples précédents. Dans cet exemple, j'utiliserai @keyframes.

@keyframes - Vous offre la magie du contrôle des étapes intermédiaires dans une séquence d'animation CSS.

La première chose est la même, vous devez en avoir marre d'entendre ça, créez un élément div et ajoutez-y une classe appelée wiggle :

<div class=&#39;box wiggle&#39;>
  <p>WIGGLE WIGGLE</p>
</div>

Ensuite, ce que nous devons faire est de utilisez @ images clés pour créer des animations. Donnons d’abord un nom à l’animation, appelons-la wiggle. Et ajoutez l'implémentation de l'effet de gigue dans le code suivant :

@keyframes wiggle {
  20%  { transform: translateX(4px);  }
  40%  { transform: translateX(-4px); }
  60%  { transform: translateX(2px);  }
  80%  { transform: translateX(-1px); }
  100% { transform: translateX(0);    }
}

Comme le montre le code ci-dessus, @keyframes nous donne la possibilité de diviser l'animation en étapes uniques et de définir avec précision ce qui se passe à chaque étape. . Précisez la progression de l'animation en pourcentage :

20% - le div se déplace de 4px vers la droite par rapport à sa position initiale.

40% - le div est déplacé de 4px vers la gauche par rapport à sa position initiale.

60% - le div est déplacé de 2px vers la droite par rapport à sa position initiale.

80% - le div est déplacé de 1px vers la gauche par rapport à sa position initiale.

100% - le div revient à sa position d'origine.

Nous pouvons maintenant utiliser le sélecteur :hover pour afficher l'animation de tremblement :

.wiggle:hover {
  animation: wiggle 1s ease;
  animation-iteration-count: 1;
}

Nous définissons l'animation pour qu'elle bouge. En même temps, nous voulons que l'animation dure 1 seconde et utilise l'effet d'animation de facilité.

Enfin, précisez l'animation à déclencher à chaque survol du pointeur de la souris.

L'image ci-dessous est l'effet d'animation final :

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!