Comment utiliser CSS pour réaliser un panda géant avec un chapeau (avec code)

Le contenu de cet article explique comment utiliser CSS pour réaliser un panda géant avec un chapeau (avec code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. .

Les pandas géants avec des cernes sont très mignons Aujourd'hui, je vais utiliser CSS pour réaliser le mignon panda géant suivant

Le code. est ici : https://codepen.io/woshilyy/p...

code corporel :

<div>
        <span></span>
        <span></span>
        <span></span>
        <span>
            <span></span>
        <span></span>
        <span></span>
        <span></span>
        </span>
    </div>

Détails du code :

1. 🎜>

Utilisez la bordure pour faire le triangle, et utilisez la pseudo classe pour faire la boule sur le chapeau

.hat {
            position: absolute;
            border-bottom: 150px solid red;
            border-left: 75px solid transparent;
            border-right: 75px solid transparent;
            left: 75px;
            z-index: 2;
        }
        
        .hat::before {
            content: "";
            position: absolute;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: #fff;
            left: -15px;
            top: -8px;
        }

2 Faites le visage de panda hahaha.

.face {
            position: absolute;
            width: 300px;
            height: 250px;
            background-color: #fff;
            border-radius: 50%;
            top: 133px;
        }

3. Créez les yeuxUtilisez un dégradé radial pour créer les yeux. La rotation des deux yeux étant symétrique, des variables sont utilisées pour contrôler la rotation et des ombres sont ajoutées. pour rendre les yeux plus réalistes

.eyes {
            position: absolute;
            width: 100px;
            height: 80px;
            border-radius: 50%;
            transform: rotate(calc(-60deg * var(--n)));
        }
        
        .eyesLeft {
            left: 10px;
            top: 100px;
            --n: 1;
            background: radial-gradient(circle at 53% 72%, #fff 1px, transparent 1px), radial-gradient(circle at 50% 80%, #fff 3px, transparent 3px), radial-gradient(circle at 50% 75%, #000 8px, transparent 8px), radial-gradient(circle at 50% 70%, white 15px, transparent 15px), #000;
            box-shadow: -3px 3px 0 3px rgba(0, 0, 0, .1);
        }
        
        .eyesRight {
            right: 10px;
            top: 100px;
            --n: -1;
            background: radial-gradient(circle at 45% 74%, #fff 1px, transparent 1px), radial-gradient(circle at 50% 80%, #fff 3px, transparent 3px), radial-gradient(circle at 50% 75%, #000 8px, transparent 8px), radial-gradient(circle at 50% 70%, white 15px, transparent 15px), #000;
            box-shadow: 3px 3px 0 3px rgba(0, 0, 0, .1);
        }

4. Faire le nezLe nez n'est qu'une ellipse + une ombre

.nose {
            position: absolute;
            width: 50px;
            height: 20px;
            background-color: #666;
            border-radius: 50%;
            left: calc((300px - 50px)/2);
            box-shadow: 2px 2px 0 2px rgba(0, 0, 0, .1);
            bottom: 60px;
        }

5. .Faire la boucheUn rectangle arrondi avec une couleur de fond transparente + Créer une bordure noire, retirer la bordure supérieure

 .mouth {
            position: absolute;
            width: 100px;
            height: 20px;
            background-color: transparent;
            border-bottom: 10px solid #000;
            border-radius: 77% 77% 77%/60% 60% 90% 90%;
            bottom: 20px;
            left: calc((300px - 100px)/2);
        }

Six : Faire des oreilles Deux ovales noirs, largeur>hauteur

 .ear {
            position: absolute;
            width: 100px;
            height: 80px;
            background-color: #000;
            border-radius: 50%;
            top: 141px;
            transform: rotate(calc(40deg * var(--e)));
        }
        
        .earL {
            --e: 1;
            left: 0;
        }
        
        .earR {
            --e: -1;
            right: 0;
        }

Recommandations associées :

Comment utiliser CSS pour réaliser une tête de canard (avec code)

Comment utiliser du CSS pur pour réaliser un effet d'animation de lapin blanc en mouvement

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!