So erzielen Sie mit reinem CSS den Effekt eines Heißluftballons (Quellcode im Anhang)

Der Inhalt dieses Artikels befasst sich mit der Verwendung von reinem CSS, um den Effekt eines Heißluftballons zu erzielen. Ich hoffe, dass er einen gewissen Referenzwert hat wird Ihnen weiterhelfen.

Effektvorschau

Quellcode-Download

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

Codeinterpretation

definiert dom. Es gibt 2 Unterelemente im Container: .envelope stellt die Regenschirmhülle dar und .basket stellt den Hängekorb dar:

<figure>
    <div>
        <span></span>
        <span></span>
    </div>
    <div>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</figure>

wird in der Mitte angezeigt:

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

definiert die Größe des Behälters, die untergeordneten Elemente .envelope und .basket vertikal zentriertes Layout:

.balloon {
    width: 12em;
    height: 19em;
    font-size: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

zeichnen zuerst die Schirmhülle.
Definieren Sie die Größe des Baldachins:

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

Die Form des Baldachins ist, dass das obere Ende kugelförmig und das untere Ende konisch ist. In einer zweidimensionalen Ebene ist die Projektion eines Kegels auf Da die Ebene ein gleichschenkliges Dreieck ist, zeichnen wir zunächst einen Kreis im oberen Teil und ein Dreieck im unteren Teil.
Zeichnen Sie zuerst den oberen Kreis:

.envelope span {
    position: absolute;
    width: inherit;
    height: 12em;
    border-radius: 50%;
    color: orange;
    background-color: currentColor;
}

Zeichnen Sie dann mit Pseudoelementen das untere gleichschenklige Dreieck:

.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 Unten befinden sich 2 <span></span> Elemente, das zweite jeweils <span></span> verformt sich und ändert seine Farbe, wodurch die Schirmhülle ein Muster aus vertikalen Streifen bildet:

.envelope span:nth-child(2) {
    transform: scaleX(0.4);
    filter: brightness(0.85) contrast(1.4);
}

Verstecken Sie den Teil außerhalb des .envelope Behälters und schneiden Sie die untere scharfe Ecke des Dreiecks ab:

.envelope {   
    overflow: hidden;
}

Bisher ist die Schirmhülle fertig und dann wird der Hängekorb gezogen.
Definieren Sie die Abmessungen des Hängekorbs:

.basket {
    position: relative;
    width: 2em;
    height: 3em;
}

Zeichnen Sie den Korb mit dem Pseudoelement ::before:

.basket::before {
    content: '';
    position: absolute;
    width: inherit;
    height: 1.6em;
    background-color: peru;
    bottom: 0;
    border-radius: 0 0 0.5em 0.5em;
}

Zeichnen Sie die Oberkante des Korbs mit dem Pseudoelement ::after -element:

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

Es gibt 4

Elemente unter .basket<span></span>, die 4 Kabel darstellen. Stellen Sie deren Stil auf vertikale dünne Linien ein:

.basket span {
    position: absolute;
    width: 0.1em;
    height: 1.5em;
    background-color: burlywood;
}

Positionieren Sie die Kabel und neigen Sie sie in verschiedenen Winkeln :

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

Zum Schluss noch den leicht schwebenden Animationseffekt des Heißluftballons hinzufügen:

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

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

Fertig!

Das obige ist der detaillierte Inhalt vonSo erzielen Sie mit reinem CSS den Effekt eines Heißluftballons (Quellcode im Anhang). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!