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.
https://github.com/comehope/front-end-daily -challenges
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:
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!
