Effet d'animation de chutes de neige en utilisant CSS-tutoriel CSS-php.cn

Effet d'animation de chutes de neige en utilisant CSS

王林

Libérer： 2023-09-03 23:25:06

avant

1225 Les gens l'ont consulté

Effet danimation de chutes de neige en utilisant CSS

Nous pouvons créer des animations en utilisant HTML et CSS. Lorsque nous ajoutons une animation à une page Web, cela améliore l'expérience utilisateur de l'application. Nous pouvons créer diverses animations en utilisant la propriété CSS keyframes et l'utiliser en utilisant la propriété CSS « animation ».

Dans ce tutoriel, nous apprendrons à utiliser CSS pour créer un effet animé de flocons de neige qui tombent.

Grammaire

Les utilisateurs peuvent créer des effets d'animation de chutes de neige en utilisant CSS selon la syntaxe suivante.

<div class = "snow"> </div>
.snow{
   animation: snow 7s linear infinite;
}
.snow:nth-child(2) {
   left: 20%;
   animation-delay: 1s;
}

Copier après la connexion

Dans la syntaxe ci-dessus, nous avons créé l'élément div avec le nom de classe "snow" et ajouté la keyframe "snow" comme valeur de l'animation. De plus, nous pouvons définir le délai d'animation et la position gauche pour chaque div "neige" en utilisant la propriété CSS nth-child.

La traduction chinoise de

Exemple 1

est :

Exemple 1

Dans l'exemple ci-dessous, nous avons créé plusieurs éléments div avec le nom de classe « snow » en HTML. En CSS, nous définissons initialement une largeur et une hauteur fixes pour l'élément snow. De plus, nous définissons un arrière-plan et une position pour chaque élément de neige.

Nous avons ajouté une animation de neige pour déplacer les éléments div et créer un effet de chute de neige. De plus, nous avons personnalisé chaque élément de neige et modifié la taille, l'opacité et la position gauche de chaque élément de neige.

De plus, nous définissons des délais d'animation pour chaque élément de flocon de neige. Par conséquent, nous pouvons voir les éléments du flocon de neige tomber à différents moments sur l’écran.

<html>
<head>
   <style>
      * {background-color: darkblue; color: white;}
      /* add snowfall animation */
      .snow {
         position: absolute;
         top: -50px;
         left: -50px;
         width: 15px;
         height: 15px;
         border-radius: 50%;
         background: white;
         animation: snow 7s linear infinite;
      }
      .snow:nth-child(1) {
         left: 10%;
         opacity: 0.3;
         height: 10px;
         width: 10px;
         animation-delay: 0s;
      }
      .snow:nth-child(2) {
         left: 20%;
         opacity: 0.5;
         animation-delay: 1s;
      }
      .snow:nth-child(3) {
         left: 30%;
         height: 5px;
         width: 10px;
         animation-delay: 2s;
      }
      .snow:nth-child(4) {
         left: 40%;
         height: 8px;
         width: 13px;
         animation-delay: 1s;
      }
      .snow:nth-child(5) {
         left: 50%;
         opacity: 0.7;
         animation-delay: 4s;
      }
      .snow:nth-child(6) {
         left: 60%;
         opacity: 0.3;
         height: 20px;
         width: 13px;
         animation-delay: 8s;
      }
      .snow:nth-child(7) {
         left: 70%;
         opacity: 0.9;
         height: 17px;
         width: 10px;
         animation-delay: 6s;
      }
      .snow:nth-child(8) {
         left: 80%;
         opacity: 0.6;
         animation-delay: 7s;
      }
      .snow:nth-child(9) {
         left: 90%;
         height: 12px;
         width: 12px;
         animation-delay: 5s;
      }
      .snow:nth-child(10) {
         left: 80%;
         height: 22px;
         width: 16px;
         animation-delay: 9s;
      }
      @keyframes snow {
         0% {
            transform: translateX(0) translateY(0);
         }
         100% {
            transform: translateX(80px) translateY(1000px);
         }
      }
   </style>
</head>
<body>
   <h2> Adding the <i> Snowfall animation </i> using HTML and CSS. </h2>
   <div class = "snow"> </div>
   <div class = "snow"> </div>
   <div class = "snow"> </div>
   <div class = "snow"> </div>
   <div class = "snow"> </div>
   <div class = "snow"> </div>
   <div class = "snow"> </div>
   <div class = "snow"> </div>
   <div class = "snow"> </div>
   <div class = "snow"> </div>
</body>
</html>

Copier après la connexion

La traduction chinoise de

Exemple 2

est :

Exemple 2

Dans l'exemple ci-dessous, nous avons utilisé la bibliothèque 'Jquery-snowfall' pour créer un effet de neige en utilisant Jquery. Nous avons ajouté la bibliothèque à la section

Dans jQuery, nous appelons la méthode Snowfall() pour créer l'effet de chute de neige. De plus, nous transmettons certains paramètres à la méthode Snowfall().

Dans le résultat, l'utilisateur peut observer l'effet des chutes de neige, qui est meilleur que l'exemple ci-dessus.

<html>
<head>
   <style>
      * {
         color: blue;
      }
      .snow-fall {
         height: 600px;
         width: 600px;
         background-color: blue;
      }
   </style>
   <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
   <script src = "https://cdnjs.cloudflare.com/ajax/libs/JQuery-Snowfall/1.7.4/snowfall.jquery.min.js"> </script>
</head>
<body>
   <h2> Adding the <i> Snowfall animation </i> using HTML and JQuery. </h2>
   <div class = "snow-fall"> </div>
   <script>
      $('.snow-fall').snowfall({ flakeCount: 500, maxSpeed: 2, maxSize: 10 });
   </script>
</body>
</html>

Copier après la connexion

Les utilisateurs ont appris deux manières différentes de créer des effets de chute de neige. Dans la première méthode, nous avons utilisé uniquement HTML et CSS. Les développeurs peuvent constater que le code est très complexe et difficile à lire car il nécessite de créer chaque élément de neige et de le manipuler à l'aide de CSS. Dans la deuxième approche, nous utilisons une bibliothèque tierce externe pour jQuery pour créer l'effet de chute de neige.

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!