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.

Effect preview

Source code download

https://github.com/comehope/front-end-daily -challenges

Code Interpretation

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!