So verwenden Sie reines CSS, um einen Papierkran zu implementieren (Quellcode beigefügt)

Der Inhalt dieses Artikels befasst sich mit der Verwendung von reinem CSS zur Realisierung eines Papierkrans (mit Quellcode). Ich hoffe, dass er für Freunde in Not hilfreich ist du hilfst.

Effektvorschau

Quellcode-Download

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

Code-Interpretation

Dom definieren, der Container enthält 6 Elemente, die Kopf, Hals, Körperseite, Flügel, Schwanz und Brust darstellen:

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

wird in der Mitte angezeigt:

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: dodgerblue;
}

Definieren Sie die Containergröße:

.cranes {
    width: 52em;
    height: 50em;
    font-size: 7px;
}

Stellen Sie die Farbe des Papierkranichs auf Weiß ein:

.cranes {
    color: white;
}

Zeichnen Sie den Kopf:

.cranes {
    position: relative;
}

.head {
    border-left: 13em solid transparent;
    border-right: 6em solid transparent;
    border-bottom: 2em solid;
    position: absolute;
    left: 0;
    top: 21;
    transform: rotate(-5deg);
}

Fügen Sie das Obige ein, um ein Dreieck zu erstellen. Der Code wird in eine Vorlage abstrahiert und dann werden die Daten in Variablen geändert, ähnlich wie beim Aufrufen einer Funktion:

.cranes span {
    border-left: calc(var(--left) * 1em) solid transparent;
    border-right: calc(var(--right) * 1em) solid transparent;
    border-bottom: calc(var(--bottom) * 1em) solid;
    position: absolute;
    transform: rotate(calc(var(--rotation) * 1deg));
    left: calc(var(--x) * 1em);
    top: calc(var(--y) * 1em);
}

.head {
    --left: 13;
    --right: 6;
    --bottom: 2;    
    --x: 0;
    --y: 21;
    --rotation: -5;
}

Stellen Sie die Transparenz so ein, dass ein Origami-Effekt entsteht wobei die Elemente überlagert sind:

.cranes span {
    filter: opacity(0.6);
}

Der nächste Schritt besteht darin, nacheinander die Funktion aufzurufen, die Dreiecke generiert, um andere Dreiecke zu erstellen:

Hals:

.neck {
    --left: 6;
    --right: 6;
    --bottom: 12;
    --x: 14;
    --y: 19;
    --rotation: 75;
}

Seite des Körpers:

.side {
    --left: 1.5;
    --right: 11.5;
    --bottom: 20;
    --x: 18.8;
    --y: 15.1;
    --rotation: 20;
}

Flügel:

.wing {
    --left: 18.7;
    --right: 30;
    --bottom: 8;
    --x: 6.7;
    --y: 9.2;
    --rotation: -41.9;
}

Schwanz:

.tail {
    --left: 18.6;
    --right: 7.7;
    --bottom: 3.9;
    --x: 19.6;
    --y: 38.1;
    --rotation: -126.5;
}

Brust:

.belly {
    --left: 6.2;
    --right: 1.8;
    --bottom: 11.5;
    --x: 17.5;
    --y: 27.8;
    --rotation: -99;
}

An diesem Punkt ist der Papierkranich fertig.
Fügen Sie zum Schluss einen kleinen interaktiven Effekt hinzu, wenn Sie mit der Maus darüber fahren, verwandelt sie sich von einem gleichschenkligen rechtwinkligen Dreieck in einen Kranich:

.cranes:hover span {
    animation: appear 1s ease-in;
}

@keyframes appear {
    from {
        border-left: 3em solid transparent;
        border-right: 3em solid transparent;
        border-bottom: 3em solid;
        position: absolute;
        transform: rotate(0deg);
        left: calc((52em - 3em) / 2);
        top: calc((50em - 3em) / 2);
    }
}

Fertig!

Verwandte Empfehlungen:

So verwenden Sie reines CSS, um das Albumsymbol des Apple-Systems zu implementieren (Code)

Verwendung CSS und D3 zur Implementierung einer kleinen interaktiven Animation zum Schwimmen von Fischen (mit Code)

Das obige ist der detaillierte Inhalt vonSo verwenden Sie reines CSS, um einen Papierkran zu implementieren (Quellcode beigefügt). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!