CSS Animation Guide: Teach you step by step how to create falling effects

CSS Animation Guide: Teach you step by step how to create falling effects

CSS animation is one of the commonly used technologies in web design, which can add vitality and appeal to web pages. Among them, making the falling effect is a very popular animation effect. This article will teach you step by step how to make the falling effect and provide specific code examples.

Step 1: Create HTML structure

First, create a section in the HTML file that contains the elements you want to make special effects, for example:

<div class="falling-effect"></div>

This structure creates a section with <div> element of the "falling-effect" class, which we will use in the next steps to define animation effects. <p>Step 2: Set CSS Style</p> <p>Next, we need to style this element in the CSS file. Here is a basic style definition that you can change according to your needs: </p><pre class='brush:php;toolbar:false;'>.falling-effect { width: 10px; height: 10px; background-color: #000; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); border-radius: 50%; animation: fall 3s linear infinite; }</pre><p>In the above example, we defined <code>width and height to be 10px, background-color is black and position is absolute positioning and positions the element at the top of the screen. The left attribute aligns the element horizontally in the center, and the transform attribute is used to adjust the position so that it displays in the center. We also set the element to be circular using the border-radius attribute.

The important thing is that in the above CSS code, we define an animation named "fall" that will play linearly and infinitely in 3 seconds. In the next steps we will define this animation called "fall".

Step 3: Define the animation

In the CSS file, we need to use the @keyframes rule to define the specific effect of the animation. Here is an example, you can modify it according to your own needs:

@keyframes fall {
  0% {
    transform: translate(-50%, -10px);
  }
  100% {
    transform: translate(-50%, 100vh);
  }
}

In the above code, we use the @keyframes rule to define an animation named "fall" . At 0% the element is at its initial position, where we move it up -10px. At 100%, the element will move 100vh down, that is, to the bottom of the screen, where the vh unit represents a percentage of the viewport height.

Step 4: Apply Animation

The last step is to apply the animation to the element we created earlier. We can do this by adding the animation name to the animation attribute of the element. Before that, we can also set some other animation properties, such as animation-delay and animation-timing-function. Here is an example:

.falling-effect {
  /* 其他样式 */

  animation: fall 3s linear infinite;
}

The above code applies the "fall" animation to elements of the .falling-effect class. The animation has a duration of 3 seconds, uses a linear function of time, and plays infinitely.

By following the above four steps, you can easily create a falling special effect animation. Of course, you can modify and expand it according to your own needs, such as changing the color, movement direction or speed of elements. CSS animations bring more interactivity and appeal to web pages. I hope this guide will be helpful to you!