“This is the 21st day of my participation in the Gwen Challenge in November. See details: The Last Gwen Challenge in 2021”

πŸŽ„ preface

A few days ago while wandering around the community, I came across a very pleasing bird flying effect, and it is pure CSS implementation.

It’s a surprise to me that the world of CSS is both profound and loathed.

I am a small small bird, want to fly ah fly but also fly not high, I am looking for looking for a warm embrace ~~~ 🐀πŸ₯πŸ₯🐀

πŸ‚ to get down to business, next let’s realize the free bird 🐦.

In this article, you can learn the following: πŸ”:

  • borderDraw simple geometry
  • transform 与 animationknowledge
  • Harvest a lovely bird

πŸ“• border property learning

Border is a very magical and powerful property, and you can do a lot of simple geometry by setting a four-directional border.

Here are a few examples to learn the border rendering mechanism:

  1. Set up thediv ηš„ width 与 height δΈΊ 0, set the four directionsborderDifferent colors.
border-left: 30px solid red;
border-right: 30px solid blue;
border-top: 30px solid green;
border-bottom: 30px solid pink;
Copy the code

  1. Set respectivelyheight: 20px; width: 0 width: 20px; height:0 ε’Œ width: 20px; height:20px

The preceding figure is set in the order of Step 2

  1. Don’t setborder-top

Height: 20px do not set border-top; Width: 20px Do not set border-top

πŸ“„ border draws a simple graph summary

Through the above three cases, we can summarize the rules of drawing simple graphs for the border attribute:

  1. borderDraw one piece in each direction if the width and height are0, each direction is drawn as a triangle; Otherwise draw it as a trapezoid.
  2. borderWidth is the height of the drawn trapezoid
  3. heightimpactborder-left ε’Œ border-right ，widthimpactborder-top ε’Œ border-bottom(Example 2 Settings)
  4. When a direction is not drawn,borderDraws only the parts in the opposite direction, and draws only the general (for example, the example 3 setting is cut in half)

🐣 Draw birds

As you can see from the picture above, the bird has four parts: head, body, wings and tail, all made up of simple geometric shapes. So both can be implemented through the border, below to implement the following head and wings.

πŸ±πŸš€ header implementation

The head is a triangle, just look at the code

/* Set bottom display, left/right transparent */
border-right: 15px solid transparent;
border-bottom: 30px solid #6b83fa;
border-left: 15px solid transparent;
Copy the code

πŸ›« realize right wing

The right wing consists of two parts, a right trapezoid and a right triangle. As can be seen from example 3 of border, if border-top is not set, the setting effect of border-left/right will also be cut in half to form a right Angle edge. We can use this feature to complete the setting of right triangle and right Angle trapezoid.

  1. Right triangle implementation
/* set border-left, borde-bottom to transparent */
border-left: 30px solid #c0a9e0;
border-bottom: 30px solid transparent;
Copy the code
  1. Rectangular trapezoidal implementation
/* Set height to a trapezoid effect */
height: 30px;
border-left: 30px solid #8567f0;
border-bottom: 10px solid transparent;
Copy the code

🎈 Bird Assembly

  1. The bird assembly

The figure is assembled by position: relative and position: Absolute. The assembled bird is shown below

Because the bird is only assembled by positioning, all parts of the bird are on the same plane, so it looks very stiff.

  1. Make the birds more three-dimensional

Rotate the head, tail, and wings of the bird using the Transform: Rotate and transform-Origin attributes to form a three-dimensional image

For example, the header:

/* Sets the base of the transform */
transform-origin: 50% 100%;
/* Offset along the x axis, negative value rotates counterclockwise */
transform: rotateX(-20deg);
Copy the code

With the rotate transform, the bird is much more vivid.

πŸŒ€ realize wind

Wind is not difficult to implement. It is implemented by combining the div tag with :before.

.wind {
    position: absolute;
    width: 4px;
    height: 200px;
    /* The wind is moving, and you can limit the length of the wind through overflow
    overflow: hidden;
}
.wind:before {
    before {
    content: "";
    position: absolute;
    width: 4px;
    height: 300px;
    background: rgba(100.200.207.0.3);
    transform: translateY(-300px);
    -webkit-animation: wind 2331ms 1268ms linear infinite; 
    animation: wind 2331ms 1268ms linear infinite;
}
Copy the code

Then, 10 sets of wind can be realized according to the above. The results are as follows:

Transform: Translate3D [transform: translate3D] [transform: translate3D] [transform: Translate3D]

🎑 Get the wind moving

The implementation principle of wind translateY is very simple:. Wind set height: 200px, beyond 200px will hide, :before dummy class can use animation property, move wind translateY

@-webkit-keyframes wind {
    0% {
        transform: translateY(-300px);
    }
    100% {
        transform: translateY(200px); }}.wind:before {
    transform: translateY(-300px);
    /* Set the delay time and duration of each wind to be different */
    animation: wind 2249ms 3544ms linear infinite;
}
Copy the code

The wind is moving, and now it looks very pleasant, except for the flying birds.

πŸš€ Fly bird

Before we get the birds flying again, let’s set up some basic properties

Initialize the 3 d

  1. Set up thetransform-style: preserve-3dopen3DApply colours to a drawing
  2. Set up theperspective: Set the visual range to make the flying birds look more human
  3. Set up thedrop-shadowHow can the birds in the real world have no shadow?

The two wings of animation

The most important thing for birds to fly is to move the wings. Set two animations wingRight and windLeft respectively

/* The clockwise of the wings is opposite, so the animation is inverted */
@keyframes wingRight {
    0% {
        transform: rotateY(40deg);
    }
    100% {
        transform: rotateY(-40deg); }}@-webkit-keyframes wingLeft {
    0% {
        transform: rotateY(-40deg);
    }
    100% {
        transform: rotateY(40deg); }}Copy the code

Once the animation is set up, the crucial step is to set transform-Origin. For the right wing, for example, the wings should rotate along the red box marker line

The transform-origin default value is 50%, 50%, 0, which obviously cannot meet the rotation requirements. Therefore, according to the knowledge of the browser coordinate system, set the right transform-origin to 0, and set the left wing to 100% 0

The whole animation

Light flying in a plane is somewhat boring and boring, as the spirit of the sky, birds should be free to fly. Animate the bird with 360Β° rotation around the Z axis.

πŸ›• source repository

Portal: Flybird

If you feel helpful, don’t forget to give the small bag a ⭐.

πŸ’˜ previous excellent articles

  • Cow guest latest front-end JS written test 100 questions
  • The latest front end of the interview questions summary (including analysis)
  • Grab the latest front end test five hundred data analysis JS interview hot spots
  • Happy cat stroking for VSCode and website adoptive cats
  • Native JavaScript soul Test (1), how much can you answer?
  • A thorough understanding of prototypes and prototype chains in JavaScript
  • Complete understanding of EventLoop in JavaScript
  • “2W word big chapter 38 interview questions” completely clear JS this pointing to the problem
  • IO /YusukeNakay…

After πŸ’₯ language

Guys, if you find this article helpful, give a like to πŸ‘ or follow βž• to support me.

In addition, if this article has a question, or do not understand part of the article, you can reply to me in the comment section, we come to discuss, learn together, progress together!

If you feel that the comment section does not understand, you can also add my wechat (li444186976) or QQ (3315161861) for detailed communication, the name is battlefield small bag.