How to achieve meteor shower effect with CSS3? (code example)

This article will introduce how to use CSS3 to achieve the meteor shower effect through code examples. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

[Recommended tutorial: CSS video tutorial]

Note: The text only talks about the implementation of a single meteor shower Method, multiple effects only need to slightly modify the starting point and width of a single animation. For specific examples, see the github address at the end of the article.

Difficulty factor

##☆☆☆☆☆☆

Rendering

Idea

The implementation of Meteor Shower is divided into three parts:

(1) Use the border attribute to implement a right triangle. For the implementation of triangles, please refer to

CSS to draw triangles

(2) Add a circular effect to the right triangle and weaken the edges of the right-angled shape

(3) Add animation effects to make The right triangle moves

HTML

<span class="shooting-star animation"></span>

Analysis:

html Just add an animation container

CSS

.shooting-star {
    margin: 30px;
    display: block;
    width: 0;
    border-radius: 2px;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: transparent;
    border-left-width: 230px;
    border-left-style: solid;
    border-left-color: white;
    border-right-width: 230px;
    border-right-style: solid;
    border-right-color: transparent;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: white;
}
.animation {
    animation: fly 3s infinite;
}
@keyframes fly {
    from {
        margin-left: 900px;
        border-left-width: 130px;
        border-right-width: 130px;
    }
    to {
        margin-left: -900px;
        border-left-width: 360px;
        border-right-width: 360px;
    }
}

Analysis:

Right-angled triangle
• To realize the right-angled triangle, first determine the orientation of the right angle. In this example, the orientation of the right angle is The lower left corner, so set the left and lower borders to be colored, and the right and upper borders to be transparent.
  • The meteor is similar to the shape of a line, so the right triangle has a small height and a large width. Therefore, the left and right border width values ​​set here are very large, and the upper and lower border width values ​​​​are very small.
  • Similar to span, elements whose display default attribute value is not block need to set the display attribute to block
Circular effect
• Set the circular border through border-radius. The value of border-radius can be the same as the height of the right triangle (note that the height value should be border-top-width and border- bottom-width (sum of values)
Animation effect
• Set the initial and end positions of animation by margin-left
  • By changing border-*-width The value achieves the effect of changing the length of the meteor
  • The animation duration determines the time for the meteor to pass through the interface
  • The number of animations is set to unlimited

Knowledge Points

• CSS Implementation of Triangle
• Round Corner Border
• animation Add animation effects
• @keyframes Custom animation

##Gitbub source code:

https://github.com/nanzhangren/CSS_skills/blob/master/shooting_star/shooting_star.html

For more programming-related knowledge, please visit:

Introduction to Programming

! !

The above is the detailed content of How to achieve meteor shower effect with CSS3? (code example). For more information, please follow other related articles on the PHP Chinese website!