Snowfall animation effect using CSS-CSS Tutorial-php.cn

Snowfall animation effect using CSS

王林

Release： 2023-09-03 23:25:06

forward

1260 people have browsed it

Snowfall animation effect using CSS

We can create animations using HTML and CSS. When we add animation to a web page, it improves the user experience of the application. We can create various animations using the CSS keyframes property and use it using the "animation" CSS property.

In this tutorial, we will learn to use CSS to create an animated effect of falling snowflakes.

grammar

Users can create snowfall animation effects using CSS according to the following syntax.

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

Copy after login

In the above syntax, we created the div element with the "snow" class name and added the "snow" keyframe as the value of the animation. Additionally, we can set the animation delay and left position for each "snow" div using the nth-child CSS property.

The Chinese translation of

Example 1

is:

Example 1

In the example below, we have created multiple div elements with the "snow" class name in HTML. In CSS, we initially set a fixed width and height for the snow element. Additionally, we set a background and position for each snow element.

We added a snow animation to move the div elements and create a snowfall effect. Additionally, we customized each snow element and changed the size, opacity, and left position of each snow element.

Additionally, we set animation delays for each snowflake element. Therefore, we can see the snowflake elements falling at different times on the screen.

<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>

Copy after login

The Chinese translation of

Example 2

is:

Example 2

In the example below, we have used the 'Jquery-snowfall' library to create a snowing effect using Jquery. We added the library to the section using a CDN.

In jQuery, we call the Snowfall() method to create the snowfall effect. Additionally, we pass some parameters to the Snowfall() method.

In the output, the user can observe the snowfall effect, which is better than the above example.

<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>

Copy after login

Users learned two different ways to create snowfall effects. In the first method, we only used HTML and CSS. Developers can observe that the code is very complex and difficult to read as it requires creating each snow element and manipulating it using CSS. In the second method, we use an external third-party library for jQuery to create the snowfall effect.

The above is the detailed content of Snowfall animation effect using CSS. For more information, please follow other related articles on the PHP Chinese website!