Wie zeichne ich einen süßen Riesenpanda mit CSS? (Codebeispiel)

Der Inhalt dieses Artikels besteht darin, die Methode zum Zeichnen eines niedlichen Riesenpandas mit CSS vorzustellen. Ich hoffe, dass er für Freunde hilfreich ist.

Der Riesenpanda mit dunklen Ringen ist sehr süß. Heute werde ich CSS verwenden, um den folgenden süßen Riesenpanda zu realisieren (der Effekt ist wie folgt):

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

HTML-Code:

<p>
        <span></span>
        <span></span>
        <span></span>
        <span>
            <span></span>
        <span></span>
        <span></span>
        <span></span>
        </span>
    </p>

Codedetails:

1 einen Hut

Verwende den Rand, um das Dreieck zu machen, und verwende die Pseudoklasse, um den Ball auf dem Hut zu machen

.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 Mache das Pandagesicht, hahaha

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

3. Machen Sie die Augen

Da die Drehung der beiden Augen symmetrisch ist, werden Variablen zur Steuerung der Drehung verwendet , und Schatten werden 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

Die Hintergrundfarbe ist transparent. Machen Sie ein abgerundetes Rechteck + 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;
        }

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, dass er für das Studium aller hilfreich sein wird.

Das obige ist der detaillierte Inhalt vonWie zeichne ich einen süßen Riesenpanda mit CSS? (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!