How to use CSS to implement a giant panda with a hat (code attached)

This article brings the content is about how to use CSS to implement a panda with a hat (with code), there is a certain reference value, the need for friends can refer to, I hope to help you.

Black eye of the giant panda is very cute, today using CSS to achieve the following Meng Meng Panda a

Here's the code: https://codepen.io/woshilyy/p ...

Body Code:

<div class= "Panda" >        <span class= "Hat" ></span>        <span class= "Ear EarL" ></span>        <span class= "ear  earr" ></span>        <span class= "Face" >            <span class= "eyes Eyesleft "></span>        <span class=" eyes  eyesright "></span>        <span class=" Nose " ></span>        <span class= "mouth" ></span>        </span>    </div>

Code Explanation:

First, the production of hats

Make a triangle with a border, make a ball on a hat with a pseudo-class

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

Second, make the panda face hahaha

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

Third, make eye
Using a radial gradient, because the two eyes are rotated symmetrically, the variable is used to control the rotation and the shadow is added to make the eyes more lifelike.

. 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, tr Ansparent 3px), radial-gradient (circle at 50% 75%, #000 8px, Transparent 8px), radial-gradient (circle at 50% 70%, white 15            PX, 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, tr Ansparent 3px), radial-gradient (circle at 50% 75%, #000 8px, Transparent 8px), radial-gradient (circle at 50% 70%, white 15 PX, transparent 15px), #000;        box-shadow:3px 3px 0 3px rgba (0, 0, 0,. 1); }

Iv. Making Nose
The nose is just an Ellipse + shadow

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

Five, make mouth
Background color is transparent rounded rectangle + black border made, remove top border

. 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: Making Ears
Two x black oval, Width > height

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