So implementieren Sie mit CSS einen Riesenpanda mit Hut (mit Code)-CSS-Tutorial-php.cn

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

不言

Freigeben： 2018-08-21 10:01:00

Original

3774 Leute haben es durchsucht

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

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

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

2 Machen Sie das Panda-Gesicht, hahaha

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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!