Home >Web Front-end >CSS Tutorial >How to use pure CSS to achieve the effect of a hot air balloon (source code attached)
The content of this article is about how to use pure CSS to achieve the effect of hot air balloons (source code attached). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. help.
https://github.com/comehope/front-end-daily -challenges
Define dom, there are 2 sub-elements in the container, .envelope
represents the umbrella cover, .basket
represents the hanging basket:
<figure> <div> <span></span> <span></span> </div> <div> <span></span> <span></span> <span></span> <span></span> </div> </figure>
Centered display:
body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(deepskyblue, skyblue, lightblue 20%); }
Define the size of the container, child elements .envelope
and .basket
Vertical centered layout:
.balloon { width: 12em; height: 19em; font-size: 16px; display: flex; flex-direction: column; align-items: center; }
Draw the umbrella cover first.
Define the size of the umbrella cover:
.envelope { position: relative; width: inherit; height: 16em; }
The shape of the umbrella cover is spherical at the upper end and conical at the lower end. In a two-dimensional plane, the projection of the cone on the plane is an isosceles triangle, so we first Draw a circle on the upper part and a triangle on the lower part.
First draw the upper circle:
.envelope span { position: absolute; width: inherit; height: 12em; border-radius: 50%; color: orange; background-color: currentColor; }
Then use pseudo elements to draw the lower isosceles triangle:
.envelope span::before { content: ''; position: absolute; width: 0; height: 0; border-width: 10em 5.5em 0 5.5em; border-style: solid; border-color: currentColor transparent transparent transparent; left: calc(50% - 5.5em); top: 8.45em; }
.envelope
There are 2 below <span></span>
element allows the second <span></span>
to deform and change color, making the umbrella cover form a vertical striped pattern:
.envelope span:nth-child(2) { transform: scaleX(0.4); filter: brightness(0.85) contrast(1.4); }
hide.envelope
For the outer part of the container, cut off the bottom sharp corner of the triangle:
.envelope { overflow: hidden; }
At this point, the umbrella cover is completed, and then the hanging basket is drawn.
Define the size of the hanging basket:
.basket { position: relative; width: 2em; height: 3em; }
Use ::before
pseudo element to draw the basket:
.basket::before { content: ''; position: absolute; width: inherit; height: 1.6em; background-color: peru; bottom: 0; border-radius: 0 0 0.5em 0.5em; }
Use ::after
pseudo Element draws the top edge of the basket:
.basket::after { content: ''; position: absolute; width: 105%; height: 0.3em; background-color: saddlebrown; left: calc((100% - 105%) / 2); top: 1.3em; border-radius: 0.3em; }
.basket
There are 4 <span></span>
elements below, representing 4 cables, and set their style to vertical Thin lines:
.basket span { position: absolute; width: 0.1em; height: 1.5em; background-color: burlywood; }
Position the cables and tilt them at different angles:
.basket span { left: calc((var(--n) - 1) * 0.6em); transform-origin: bottom; transform: rotate(calc(var(--r) * 7deg)); } .basket span:nth-child(1) { --n: 1; --r: -2; } .basket span:nth-child(2) { --n: 2; --r: -1; } .basket span:nth-child(3) { --n: 3; --r: 1; } .basket span:nth-child(4) { --n: 4; --r: 2; }
Finally, add the slightly floating animation effect of the hot air balloon:
.balloon { animation: drift 2s infinite alternate; } @keyframes drift { to { transform: translateY(-5%); } }
You’re done!
The above is the detailed content of How to use pure CSS to achieve the effect of a hot air balloon (source code attached). For more information, please follow other related articles on the PHP Chinese website!