recherche

Maison  >  Article  >  interface Web  >  Animer un cœur arc-en-ciel à partir d'un carré en utilisant CSS ?

Animer un cœur arc-en-ciel à partir d'un carré en utilisant CSS ?

WBOY
WBOYavant
2023-09-09 09:01:02583parcourir

使用 CSS 从正方形制作彩虹心动画？

Nous pouvons créer des animations en utilisant HTML, CSS et JavaScript ensemble et mettre en œuvre ces animations sur une page Web ou un site Web. CSS fournit de nombreuses propriétés que nous pouvons utiliser pour créer des animations, c'est pourquoi il est recommandé d'utiliser CSS pour le style car il fournit des fonctionnalités puissantes pour le développement front-end.

Dans cet article, nous utiliserons CSS pour créer une forme de cœur qui change de couleur toutes les 3 secondes et le ferons en deux étapes en utilisant une animation.

Étapes pour créer un cœur arc-en-ciel

Nous allons créer deux parties différentes pour le corps puis créer deux classes, dont l'une sera le carré et l'autre le conteneur. Nous allons également créer une section CSS dans laquelle nous ajouterons quelques propriétés au corps et centrerons tout ce que nous voulons afficher. Nous utiliserons le code suivant pour créer le conteneur.

Exemple

Dans l'exemple ci-dessous, nous avons ajouté quelques propriétés et créé une forme de cœur dans laquelle l'animation sera jouée. Le code ci-dessous donne la sortie du code HTML et CSS. 

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Creating the container</title>
   <style>
      .contain {
         display: grid;
         height: 99vh;
         place-items: center;
      }
      .sqr {
         height: 9rem;
         width: 9rem;
         background-color: blue;
         transform: rotate(45deg);
      }
      .sqr::before {
         content: "";
         height: 100%;
         width: 99%;
         background-color: red;
         position: absolute;
         transform: translateY(-50%);
         border-radius: 49%;
      }
      .sqr::after {
         content: "";
         background-color: lightgreen;
         position: absolute;
         width: 99%;
         height: 99%;
         transform: translateX(-49%);
         border-radius: 50%;
      }
   </style>
</head>
<body>
   <div class="contain">
      <div class="sqr"></div>
   </div>
</body>
</html>

Les cercles ont maintenant des couleurs différentes, nous les gardons ainsi pour pouvoir différencier les cercles.

Maintenant, nous allons animer ce cœur. Pour ce faire, nous allons ajouter du mouvement au cœur, puis utiliser les propriétés des images clés pour changer la couleur. La couleur du cœur changera à chaque fois qu'un nouveau cadre apparaîtra.

Le mouvement du cœur créé changera pour former un carré, puis reviendra pour former un cœur. Nous ferons cela en utilisant la propriété transform afin que le carré puisse se transformer en forme de cœur. Nous avons maintenant discuté de la méthode.

Exemple

Dans le code ci-dessous, nous utilisons d'abord le même code que celui utilisé pour créer les formes de conteneur et de cœur, puis ajoutons quelques images clés où nous définissons la couleur de 0 % à 100 %. La couleur de chaque image clé change de sorte que le carré semble se transformer en forme de cœur. Jetons un coup d'œil au résultat afin de comprendre ce qui se passe après l'utilisation du code. 

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Creating the container</title>
   <style>
      .contain {
         display: grid;
         height: 99vh;
         place-items: center;
      }
      .sqr {
         height: 9rem;
         width: 9rem;
         background-color: grey;
         transform: rotate(45deg);
         animation: beater 3s linear infinite;
      }
      .sqr::before {
         content: "";
         height: 100%;
         width: 99%;
         background-color: maroon;
         position: absolute;
         transform: translateY(-50%);
         border-radius: 49%;
         animation: beater 3s linear infinite;
      }
      .sqr::after {
         content: "";
         background-color: yellow;
         position: absolute;
         width: 99%;
         height: 99%;
         transform: translateX(-49%);
         border-radius: 50%;
         animation: beater 3s linear infinite;
      }
      @keyframes beater {
         0% {
            background: red;
         }
         15% {
            background: orange;
         }
         30% {
            transform: scale(0.5);
            background: yellow;
         }
         45% {
            background: greenyellow;
         }
         60% {
            background: blue;
         }
         75% {
            background: indigo;
         }
         100% {
            background: violet;
         }
      }
   </style>
</head>
<body>
   <div class="contain">
      <div class="sqr"></div>
   </div>
</body>
</html>

Au départ, notre sortie ressemblera à ceci, un carré, puis dans chaque image, cela créera l'illusion que le carré se transforme en forme de cœur, puis après transformation, il bouclera à nouveau et se transformera en carré, chaque image se transformera en une forme différente. cadres de couleurs. Un cœur complet ressemble à ceci.

Enfin, nous pouvons voir un cœur complet depuis la place.

Conclusion

Les animations sur les sites Web sont très courantes de nos jours et ces animations déterminent l'apparence réelle du site Web. Le but de ces animations est généralement d’impliquer l’utilisateur ou de lui permettre de comprendre facilement quelque chose. CSS est un outil très puissant qui permet de créer ces animations avec seulement quelques lignes de code. Les animations contiennent des images entre elles et nous utilisons la propriété keyframe en CSS pour modifier les images.

Dans cet article, nous avons appris à créer un cœur arc-en-ciel animé à partir d'un carré en utilisant CSS qui change de couleur toutes les 3 secondes.

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!

JavaScript css html 循环
Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：Comment utiliser la propriété flex de CSS3 pour créer un effet de disposition de flux en cascade ?Article suivant：Comment utiliser la propriété flex de CSS3 pour créer un effet de disposition de flux en cascade ?

Articles Liés

Voir plus