Maison  >  Article  >  interface Web  >  Comment utiliser CSS pour implémenter une tête de canard (avec code)

Comment utiliser CSS pour implémenter une tête de canard (avec code)

不言
不言original
2018-08-20 10:00:532079parcourir

Le contenu de cet article explique comment utiliser CSS pour réaliser une tête de canard (avec du code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. .

Aperçu de l'effet

Comment utiliser CSS pour implémenter une tête de canard (avec code)

Téléchargement du code source

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

Interprétation du code

Define dom, le conteneur contient 4 éléments :

<figure>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</figure>

Affichage centré :

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

Define taille du conteneur :

.duck {
    width: 10em;
    height: 10em;
}

Utilisez la grille pour presser 4 carrés dans une disposition 2*2 :

.duck {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.duck span {
    background-color: seagreen;
}

Faites pivoter le conteneur de 45 degrés :

.duck {
    transform: rotate(-45deg);
}

Paramètres Coins arrondis de chaque carré, combinés dans la forme abstraite d'un canard :

.duck span:nth-child(1) {
    border-top-left-radius: 100%;
}

.duck span:nth-child(2) {
    border-top-right-radius: 100%;
}

.duck span:nth-child(3) {
    border-bottom-right-radius: 100%;
}

.duck span:nth-child(4) {
    border-bottom-left-radius: 100%;
}

Définissez une couleur différenciée pour le dernier carré pour le faire ressembler à un bec de canard :

.duck span:nth-child(4) {
    background-color: coral;
}

Dessinez un pointez sur le deuxième carré en utilisant un dégradé radial pour représenter les yeux du canard :

.duck span:nth-child(2) {
    background-image: radial-gradient(black 0.5em, transparent 0.5em);
}

Vous avez terminé !

Recommandations associées :

Comment utiliser du CSS pur pour implémenter un Angry Bird noir (avec code)

Comment utiliser CSS et D3 réalise l'effet d'animation de chevauchement noir et blanc

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn