So verwenden Sie reines CSS, um einen Papierkran zu implementieren (Quellcode beigefügt)-CSS-Tutorial-php.cn

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

不言

Freigeben： 2018-09-01 15:48:14

Original

2385 Leute haben es durchsucht

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

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

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>

Nach dem Login kopieren

wird in der Mitte angezeigt:

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

Nach dem Login kopieren

Definieren Sie die Containergröße:

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

Nach dem Login kopieren

Stellen Sie die Farbe des Papierkranichs auf Weiß ein:

.cranes {
    color: white;
}

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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

Nach dem Login kopieren

Seite des Körpers:

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

Nach dem Login kopieren

Flügel:

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

Nach dem Login kopieren

Schwanz:

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

Nach dem Login kopieren

Brust:

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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!