Heim > Web-Frontend > CSS-Tutorial > So verwenden Sie reines CSS, um einen Legostein zu implementieren (Quellcode beigefügt)

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

不言
Freigeben: 2018-10-25 13:41:51
nach vorne
2731 Leute haben es durchsucht

Dieser Artikel enthält eine detaillierte Erklärung der Funktionsweise von PHP auf dem Webserver. Ich hoffe, dass er für Freunde hilfreich ist.

Effektvorschau

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

Quellcode-Download

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

Codeinterpretation

Dom definieren, der Container enthält einen Satz von 3 Gesichtern:

<div>
    <div>
        <span></span>
        <span></span>
        <span></span>
    </div>
</div>
Nach dem Login kopieren

Zentrierte Anzeige:

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at center, white, skyblue);
}
Nach dem Login kopieren

Container definieren Größe:

.brick {
    width: 40em;
    height: 30em;
    font-size: 10px;
}
Nach dem Login kopieren

Zeichnen Sie die Vorderseite des Blocks:

.brick {
    position: relative;
}

.sides .front {
    position: absolute;
    width: 9em;
    height: 6.8em;
    background-color: #237fbd;
    top: 19em;
    left: 7em;
}
Nach dem Login kopieren

Zeichnen Sie die rechte Seite des Blocks:

.sides > * {
    position: absolute;
    background-color: #237fbd;
}

.sides .right {
    width: 18em;
    height: 6.8em;
    filter: brightness(0.8);
    top: 19em;
    left: calc(7em + 9em);
}
Nach dem Login kopieren

Zeichnen Sie die Oberseite des Blocks:

.sides .top {
    width: 18em;
    height: 10.4em;
    filter: brightness(1.2);
    top: calc(19em - 10.4em);
    left: calc(7em + 9em);
}
Nach dem Login kopieren

Die oben genannten drei Flächen werden zu einem Würfel zusammengefasst:

.sides .front {
    transform-origin: right;
    transform: skewY(30deg);
}

.sides .right {
    transform-origin: left;
    transform: skewY(-30deg);
}

.sides .top {
    transform-origin: left bottom;
    transform: rotate(-60deg) skewY(30deg);
}
Nach dem Login kopieren

Als nächstes zeichnen Sie die konvexen Partikel der Bausteine.

Füge 8 konvexe Elemente im Dom hinzu:

<div>
    <div>
        <span></span>
        <span></span>
        <span></span>
    </div>
    <div>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</div>
Nach dem Login kopieren

Definiere Variablen:

.studs span:nth-child(1) {
    --n: 1;
}

.studs span:nth-child(3) {
    --n: 3;
}

.studs span:nth-child(5) {
    --n: 5;
}

.studs span:nth-child(7) {
    --n: 7;
}

.studs span:nth-child(2) {
    --n: 2;
}

.studs span:nth-child(4) {
    --n: 4;
}

.studs span:nth-child(6) {
    --n: 6;
}

.studs span:nth-child(8) {
    --n: 8;
}
Nach dem Login kopieren

Zeichne das konvexe Element auf der linken Seite:

.studs span:nth-child(odd) {
    top: calc(4.6em + (var(--n) - 1) / 2 * 2.6em);
    left: calc(23.3em - (var(--n) - 1) / 2 * 4.6em);
}
Nach dem Login kopieren

Zeichne die Beule auf der rechte Seite:

.studs span:nth-child(even) {
    top: calc(6.9em + (var(--n) - 2) / 2 * 2.6em);
    left: calc(27.9em - (var(--n) - 2) / 2 * 4.6em);
}
Nach dem Login kopieren

Zeichnen Sie abschließend die Oberseite der Beule:

.studs span::before {
    content: '';
    position: absolute;
    width: inherit;
    height: 2em;
    background-color: #4cb7ff;
    border-radius: 50%;
}
Nach dem Login kopieren

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

Verwandte Etiketten:
Quelle:segmentfault.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage