Comment créer une animation de boule collante en utilisant HTML et CSS ?-tutoriel HTML-php.cn

Comment créer une animation de boule collante en utilisant HTML et CSS ?

PHPz

Libérer： 2023-08-28 10:21:06

avant

1115 Les gens l'ont consulté

Comment créer une animation de boule collante en utilisant HTML et CSS ?

L'animation Sticky ball est une animation créée en utilisant HTML et CSS. Ce style d'animation est créé en utilisant des images clés pour spécifier les valeurs des propriétés CSS à différents points de l'animation, puis en appliquant l'animation à l'élément HTML.

Gooey Balls est un style d'animation populaire et visuellement attrayant créé en utilisant HTML et CSS. Dans cette animation, nous créons un effet lisse, fluide et élastique pour un objet rond, le faisant ressembler à une boule de slime. Ce type d’animation est un excellent moyen d’ajouter de l’intérêt et de l’attrait à votre site Web. Avec les étapes suivantes, nous pouvons facilement créer une animation de boules gluantes en HTML et CSS.

Étape 1 - Créer du code HTML pour l'animation de balle collante

Tout d’abord, nous créons la structure HTML utilisée pour créer l’animation de la boule collante.

Étape 2 - Ajouter des styles CSS

Dans cette étape, nous ajoutons des styles CSS à la boule pour la faire ressembler à un cercle. Pour créer la balle, nous définissons la largeur et la hauteur de la balle et définissons le rayon de la bordure à 50 % pour la rendre circulaire.

Étape 3 : Créer des images clés

Ici, nous allons créer des images clés pour l'animation. Les images clés sont utilisées pour spécifier les valeurs des propriétés CSS à différents points de l'animation.

Étape 4 : Appliquer l'animation

Enfin, nous appliquons l'animation au ballon.

Avec ces étapes simples, nous pouvons facilement créer une animation de base de boule collante en utilisant HTML et CSS. Nous pouvons personnaliser les animations en modifiant les valeurs des propriétés CSS, des images clés et du timing de l'animation.

Exemple 1

Animation de boule collante avec changement de couleur d'arrière-plan.

<!DOCTYPE html>
<html>
<head>
   <style>
      body{
         text-align:center;
      }
      .gooey-ball {
         display: flex;
         justify-content: center;
         align-items: center;
         height: 50vh;
      }
      .ball {
         width: 100px;
         height: 100px;
         border-radius: 50%;
         background-color: #40e0d0;
      }
      @keyframes gooey {
         0% { transform: scale(1); background-color: #40e0d0; }
         50% { transform: scale(1.5); background-color: #ff00ff; }
         100% { transform: scale(1); background-color: #40e0d0; }
      }
      .ball {
         animation: gooey 2s infinite ease-in-out;
      }
   </style>
</head>
   <body>
      <h3>Gooey Ball Animation with Background Color Change</h3>
      <div class="gooey-ball">
         <div class="ball"></div>
      </div>
   </body>
</html>

Copier après la connexion

Dans l'exemple ci-dessus, nous avons créé une balle qui ne cesse de se répéter.

Exemple 2

Voici un exemple de création d'une animation de balle collante avec une balle rebondissante en utilisant HTML et CSS.

<!DOCTYPE html>
<html>
<head>
   <style>
      body{ text-align:center; }
      .gooey-ball {
         display: flex;
         justify-content: center;
         align-items: center;
         height: 70vh;
      }
      .ball {
         width: 100px;
         height: 100px;
         border-radius: 50%;
         background:radial-gradient(yellow, green, red);
      }
      @keyframes jump {
         0% {transform: translateY(0);}
         50% {transform: translateY(-50px);}
         100% {transform: translateY(0);}
      }
      .ball {
         animation: gooey 2s infinite ease-in-out, jump 2s infinite
         ease-in-out;
      }
   </style>
</head>
   <body>
      <h3>Gooey Ball Animation with a Jumping ball</h3>
      <div class="gooey-ball">
         <div class="ball"></div>
      </div>
   </body>
</html>

Copier après la connexion

Dans l'exemple ci-dessus, nous avons défini gluant et sauté deux images clés. L'image clé visqueuse anime l'échelle de la balle de sa taille d'origine à 1,5 fois sa taille d'origine et son dos. Les images clés de saut animent la position verticale de la balle, la faisant sauter de haut en bas. Les deux animations sont appliquées à l'élément balle, durent 2 secondes et ont un effet d'entrée et de sortie facile.

Conclusion

Créer des animations de boules collantes est un moyen amusant et simple d'améliorer l'attrait visuel de votre site Web. Avec quelques lignes de code HTML et CSS, nous pouvons ajouter cet effet sympa à notre site Web.

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!