Comment lier une animation à un élément de division en utilisant CSS ?-tutoriel CSS-php.cn

Comment lier une animation à un élément de division en utilisant CSS ?

PHPz

Libérer： 2023-09-05 15:05:15

avant

843 Les gens l'ont consulté

Comment lier une animation à un élément de division en utilisant CSS ?

L'élément Division, également connu sous le nom de

, est souvent utilisé pour regrouper des éléments HTML, puis les styliser à l'aide de CSS. L'animation est un élément graphique doté d'effets visuels pour le rendre plus attractif. En HTML et CSS, nous nommons généralement cet élément

. Cet article expliquera comment CSS lie les animations aux éléments de division.

Utilisez la méthode des images clés pour définir l'animation

La méthode des images clés est le moyen le plus courant de créer des effets d'animation en CSS.

Exemple

<!DOCTYPE html>
<html lang="en">
<head>
<style>
   .container {
      width: 50vw;
      height: 10vh;
      background-color: rgb(103, 28, 141);
      animation: myAnimation 2s infinite alternate;
   }
   @keyframes myAnimation {
      0% {
         transform: translateX(0);
      }
      50% {
         transform: translateX(100px);
      }
      100% {
         transform: translateX(200px);
      }
   }
</style>
</head>
<body>
   <div class="container"></div>
</body>
</html>

Copier après la connexion

La traduction chinoise de

Explication

est :

Explication

Le code HTML utilise l'élément division avec la classe "conteneur" pour l'animation. L'animation, définie dans la règle @keyframes, déplace l'élément de 0 pixel vers la droite jusqu'à 100 pixels, puis vers la droite jusqu'à 200 pixels, dans une boucle alternée.
Le code CSS définit une classe "conteneur" avec une largeur de 50% de la fenêtre, une hauteur de 10% de la fenêtre et une couleur de fond violet. Appliquez l'animation à l'élément en utilisant la propriété 'animation' avec la valeur 'myAnimation 2s alternance infinie'. L'élément div est contenu dans le corps HTML et l'animation sera appliquée lorsqu'elle sera visualisée dans un navigateur Web.

Utiliser un chemin de détourage

Si vous comprenez l'exemple précédent, vous avez dû constater que réaliser une animation très complexe est assez difficile car cela nous oblige à écrire autant de lignes de code manuellement. Il existe donc de nombreux autres outils que nous pouvons utiliser pour obtenir de superbes effets d’animation. Un tel exemple est l’utilisation de chemins de détourage.

clip-path est une propriété CSS qui permet de spécifier une zone spécifique d'un élément à afficher (découpée) tout en masquant le reste de l'élément.
Nous pouvons définir des zones par des chemins de détourage, qui peuvent être créés à l'aide de formes de base telles que des cercles, des rectangles, des polygones ou des chemins SVG.

Exemple

<!DOCTYPE html>
<html lang="en">
<head>
<style>
   body {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      height: 100vh;
   }
   .container {
      background-color: rgb(220, 221, 158);
      width: 50vw;
      padding: 20px;
      text-align: justify;
      border-radius: 20px;
      clip-path: circle(23.2% at 100%);
   }
   .container:hover {
      clip-path: circle(141% at 100%);
      transition: 1s;
   }
</style>
</head>
<body>
   <div class="container">
      <h1>Hello world</h1>
      <p>This is the body of the text</p>
   </div>
</body>
</html>

Copier après la connexion

La traduction chinoise de

Explication

est :

Explication

Ici, le document HTML utilise un conteneur flex pour afficher les éléments enfants, centrés horizontalement et verticalement. L'élément body a une hauteur de 100vh et la classe .container a un masque d'écrêtage circulaire et un effet de transition en survol.
La classe .container a une couleur d'arrière-plan, une largeur, un remplissage et un alignement du texte, un rayon de bordure de 20 pixels et une propriété clip-path qui crée un masque circulaire. La pseudo-classe de survol modifie la taille du chemin du clip avec un effet de transition d'une seconde.

Pour approfondir ce sujet, nous vous recommandons de lire le tutoriel suivant pour en savoir plus sur le sujet -

https://www.tutorialspoint.com/css/css_clip.htm

Conclusion

Dans cet article, nous avons appris à lier des animations à des éléments div à l'aide de CSS. Nous examinons en exclusivité l'utilisation de la méthode des images clés pour faire la même chose. Nous pouvons personnaliser les propriétés de l'animation telles que la durée, le délai, le comportement, etc.

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!