Shulou(Shulou.com)06/01 Report--

Editor to share with you how to use pure CSS to achieve the effect of hot air balloon, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Code interpretation

Define dom. There are 2 child elements in the container, .basket represents the umbrella cover and .basket represents the gondola:

Centered display:

Body {

Margin:0

Height:100vh

Display:flex

Align-items:center

Justify-content:center

Background:linear-gradient (deepskyblue,skyblue,lightblue20%)

}

Define the size of the container, and the child elements .outline and .outline are centered vertically:

.balloon {

Width:12em

Height:19em

Font-size:16px

Display:flex

Flex-direction:column

Align-items:center

}

Draw the canopy first.

Define the size of the canopy:

.envelope {

Position:relative

Width:inherit

Height:16em

}

The shape of the canopy is spherical at the top and conical at the bottom. In the two-dimensional plane, the projection of the cone in the plane is an isosceles triangle, so we first draw a circle in the upper part, and then draw a triangle in the lower part.

Draw the upper circle first:

.envelopespan {

Position:absolute

Width:inherit

Height:12em

Border-radius:50%

Color:orange

Background-color:currentColor

}

Then draw the lower isosceles triangle with pseudo elements:

.envelopespan:: before {

Content:''

Position:absolute

Width:0

Height:0

Border-width:10em5.5em05.5em

Border-style:solid

Border-color:currentColortransparenttransparenttransparent

Left:calc (50%-5.5em)

Top:8.45em

}

There are two elements under the umbrella, which make the second one deform and change color, so that the canopy forms a vertical striped pattern:

.envelopespan:nth-child (2) {

Transform:scaleX (0.4)

Filter:brightness (0.85) contrast (1.4)

}

Hide the outer part of the container and cut off the lowest sharp corner of the triangle:

.envelope {

Overflow:hidden

}

At this point, the canopy is finished, and then draw the gondola.

Define the size of the gondola:

.basket {

Position:relative

Width:2em

Height:3em

}

Draw the basket with:: before pseudo elements:

.basket:: before {

Content:''

Position:absolute

Width:inherit

Height:1.6em

Background-color:peru

Bottom:0

Border-radius:000.5em0.5em

}

Draw the top edge of the basket with:: after pseudo element:

.basket:: after {

Content:''

Position:absolute

Width:105%

Height:0.3em

Background-color:saddlebrown

Left:calc ((100% music 105%) / 2)

Top:1.3em

Border-radius:0.3em

}

There are 4 elements under .cable, which represent 4 cables. Set them to the style of vertical thin lines:

.basketspan {

Position:absolute

Width:0.1em

Height:1.5em

Background-color:burlywood

}

Position the cable and tilt it at different angles:

.basketspan {

Left:calc ((var (--n)-1) * 0.6em)

Transform-origin:bottom

Transform:rotate (calc (var (- r) * 7deg))

}

.basketspan:nth-child (1) {--n _ luv _ 1 _ color _ r _ r

.basketspan:nth-child (2) {--n luv 2lym r luv r

.basketspan:nth-child (3) {--nlu 3lym muri rlu 1;}

.basketspan:nth-child (4) {- nlul 4 Murray Rizu 2;}

Finally, add the slightly floating animation effect of the hot air balloon:

.balloon {

Animation:drift2sinfinitealternate

}

@ keyframesdrift {

To {

Transform:translateY (- 5%)

}

}

The above is all the contents of the article "how to use pure CSS to achieve the effect of hot air balloon". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.