So implementieren Sie mit CSS einen Riesenpanda mit Hut (mit Code)

Der Inhalt dieses Artikels befasst sich mit der Verwendung von CSS zur Realisierung eines Riesenpandas (mit Code). Ich hoffe, dass er für Sie hilfreich ist. .

Riesenpandas mit dunklen Ringen sind sehr süß. Heute werde ich CSS verwenden, um den folgenden süßen Riesenpanda zu realisieren

Der Code ist hier: https://codepen.io/woshilyy/p...

Körpercode:

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

Codedetails:

1. Einen Hut machen

Verwenden Sie den Rand, um das Dreieck zu erstellen, und verwenden Sie die Pseudoklasse, um den Ball auf dem Hut zu erstellen

.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 Machen Sie das Panda-Gesicht, hahaha

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

3. Gestalten Sie die Augen
, da die Drehung der beiden Augen symmetrisch ist, wurden Variablen zur Steuerung der Drehung verwendet und Schatten hinzugefügt, um die Augen realistischer zu machen

.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. Machen Sie die Nase
Die Nase ist nur ein Oval + Schatten

.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. Machen Sie den Mund
Machen Sie einen abgerundetes Rechteck mit einer transparenten Hintergrundfarbe + einem schwarzen Rand, entfernen Sie den oberen Rand

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

Sechs: Machen Sie Ohren
Zwei schwarze Ovale, Breite>Höhe

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

Verwandte Empfehlungen:

So verwenden Sie CSS, um einen Entenkopf zu realisieren (mit Code)

Wie Sie reines CSS verwenden, um einen bewegten Animationseffekt für weiße Kaninchen zu realisieren

Das obige ist der detaillierte Inhalt vonSo implementieren Sie mit CSS einen Riesenpanda mit Hut (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!