How to use pure CSS to achieve the effect of a hot air balloon (source code attached)-CSS Tutorial-php.cn

How to use pure CSS to achieve the effect of a hot air balloon (source code attached)

不言

Release： 2018-10-13 14:46:54

forward

3208 people have browsed it

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

How to use pure CSS to achieve the effect of a hot air balloon (source code attached)

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:

Copy after login

Centered display:

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(deepskyblue, skyblue, lightblue 20%);
}

Copy after login

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;
}

Copy after login

Draw the umbrella cover first.
Define the size of the umbrella cover:

.envelope {
    position: relative;
    width: inherit;
    height: 16em;
}

Copy after login

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;
}

Copy after login

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;
}

Copy after login

.envelope There are 2 below element allows the second 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);
}

Copy after login

hide.envelope For the outer part of the container, cut off the bottom sharp corner of the triangle:

.envelope {   
    overflow: hidden;
}

Copy after login

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;
}

Copy after login

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;
}

Copy after login

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;
}

Copy after login

.basket There are 4 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;
}

Copy after login

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; }

Copy after login

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

.balloon {
    animation: drift 2s infinite alternate;
}

@keyframes drift {
    to {
        transform: translateY(-5%);
    }
}

Copy after login

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!