So verwenden Sie reines CSS, um ein einzelnes McDonald's-Logo zu implementieren (Quellcode beigefügt)

Der Inhalt dieses Artikels befasst sich mit der Verwendung von reinem CSS zur Implementierung eines einzelnen McDonald's-Logos (Quellcode im Anhang). Ich hoffe, dass dies der Fall ist hilfreich sein.

Effektvorschau

Quellcode-Download

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

Code-Interpretation

Dom definieren, nur 1 Element:

<div></div>

Zentrierte Anzeige:

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at center, darkred, black);
}

Containergröße definieren:

.mcdonalds {
    width: 36em;
    height: 30em;
    font-size: 5px;
    color: red;
    background-color: currentColor;
}

Verwenden Sie Pseudoelemente, um die Form der linken Hälfte n des Buchstabens m zu zeichnen:

.mcdonalds {
    position: relative;
    overflow: hidden;
}

.mcdonalds::before {
    content: '';
    position: absolute;
    width: 20em;
    height: calc(30em * 2);
    box-sizing: border-box;
    border: solid yellow;
    border-width: 2.2em 4.4em;
    border-radius: 50%;
}

Kopieren Sie die linke Hälfte, die die Form der rechten Hälfte n hat, und bilden Sie zusammen mit der linken Seite den Buchstaben m :

.mcdonalds::before {
    filter: drop-shadow(16em 0 0 yellow);
}

Verwenden Sie Pseudoelemente, um den unteren Rand der mittleren vertikalen Linie ein wenig abzudecken, damit die vertikalen Linien auf beiden Seiten länger erscheinen:

.mcdonalds::after {
    content: '';
    position: absolute;
    width: 6em;
    height: 1.5em;
    background-color: currentColor;
    left: calc((36em - 6em) / 2);
    bottom: 0;
}

Zum Schluss erweitern Sie den roten Hintergrund nach außen:

.mcdonalds {
    box-shadow: 0 0 0 10em;
}

Du bist fertig!

Verwandte Empfehlungen:

So verwenden Sie reines CSS, um den Animationseffekt von Ballsprungschritten zu erzielen (Quellcode im Anhang)

Wie um reines CSS zu verwenden. Erzielen Sie einen Animationseffekt ähnlich dem einer wehenden Flagge (Quellcode im Anhang)

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