1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
body {
    margin:0;
    height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background-color:mediumturquoise;
}
.panda {
    width:21em;
    height:16em;
    background-color:white;
    background-image:radial-gradient(ellipse at 50% 60%,#333 1.2em,transparent 1.2em),radial-gradient(ellipse at 50% 80%,#555 0.6em,transparent 0.6em);
    border:0.5em solid #333;
    border-top-left-radius:11em;
    border-top-right-radius:11em;
    border-bottom-left-radius:11em 6em;
    border-bottom-right-radius:11em 6em;
    border-bottom-width:1em;
    box-shadow:inset 1em -1em 0 #eee;
    position:relative;
}
.panda::before,.panda::after {
    content:'';
    position:absolute;
    width:7em;
    height:4em;
}
.panda::before {
    content:'';
    position:absolute;
    width:7em;
    height:4em;
    left:2.9em;
    top:5.5em;
    background-color:#333;
    background-image:radial-gradient(circle at 5.1em 2em,white 0.3em,transparent 0.3em),radial-gradient(circle at 4.6em 2em,#333 0.7em,transparent 0.7em),radial-gradient(circle at 4.5em 2em,white 1em,transparent 1em);
    border-radius:50% 50% 45% 42%;
    transform:rotate(-45deg);
    box-shadow:1em -7.2em 0 -0.4em #333;
    animation:before-animate 1s ease-in-out infinite alternate;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX