Wie zeichne ich einen süßen Riesenpanda mit CSS? (Codebeispiel)-CSS-Tutorial-php.cn

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

青灯夜游

Freigeben： 2018-11-12 09:15:37

nach vorne

4707 Leute haben es durchsucht

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):

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

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

2 Mache das Pandagesicht, hahaha

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

Nach dem Login kopieren

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

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

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

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

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!