Comment utiliser du CSS pur pour implémenter un logo McDonald's à un seul élément (code source ci-joint)

Le contenu de cet article explique comment utiliser du CSS pur pour implémenter le logo McDonald's à un seul élément (code source ci-joint). J'espère que les amis dans le besoin pourront s'y référer. vous être utile aidé.

Aperçu de l'effet

Téléchargement du code source

https://github.com/comehope/front-end-daily -défis

Interprétation du code

Définir dom, 1 seul élément :

<div></div>

Affichage centré :

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

Définir la taille du conteneur :

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

Utilisez des pseudo-éléments pour dessiner la forme de la moitié gauche n de la lettre m :

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

Copiez la moitié gauche, qui est la forme de la moitié droite n, et formez avec le côté gauche La lettre m :

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

Utilisez des pseudo-éléments pour couvrir un peu le bas de la ligne verticale du milieu afin que les lignes verticales des deux côtés paraissent plus longues :

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

Enfin, déplacez le fond rouge pour l'étendre un peu plus :

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

Vous avez terminé !

Recommandations associées :

Comment utiliser du CSS pur pour obtenir l'effet d'animation des étapes de saut de balle (code source ci-joint)

Comment utiliser du CSS pur Réaliser un effet d'animation similaire à celui d'un drapeau flottant (code source ci-joint)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!