rabbit.css

/* animaion */

@keyframes 토끼귀오른쪽 {
from {
}
to {
transform: rotate(15deg) translate(20px);
}
}
@keyframes 토끼귀왼쪽 {
from {
}
to {
transform: rotate(-15deg) translate(-20px);
}
}

@keyframes 입 {
from {

}
to {
height: 0px;
background-color: transparent;   
}
}

@keyframes 콧구멍 {
from {

}
to {
width: 4px;
}
}

@keyframes 오른쪽수염1 {
from {

}
to { transform: rotate(5deg);

}

}

@keyframes 오른쪽수염2 {
from {

}
to { transform: rotate(-10deg);

}

}
@keyframes 오른쪽수염3 {
from {

}
to { transform: rotate(-25deg);

}

}
@keyframes 왼쪽수염1 {
from {

}
to { transform: rotate(-5deg);

}

}

@keyframes 왼쪽수염2 {
from {

}
to { transform: rotate(10deg);

}

}
@keyframes 왼쪽수염3 {
from {

}
to { transform: rotate(25deg);

}

}

/* reset */
body{
margin: 0;
padding: 0;
}

/* design */
*,
*:after,
*:before {
box-sizing: border-box;
}

body {
background: rgb(255, 215, 230);
} 

.rabbit {
margin: 300px auto;
position: relative;
background-color: transparent;
top: 100px;
width: 500px;
height: 500px;
}

.rabbit .ear {
position: absolute;
top: -120px;
width: 95px;
height: 235px;
border: 6px solid #000;
background-color: #696969;
}
.rabbit .ear.left {
left: 135px;
transform: rotate(-5deg);
border-radius: 64% 100% 42% 42% / 81% 79% 38% 33%     ;
animation: 토끼귀왼쪽 1.2s infinite alternate;
}

.rabbit .ear.right {
right: 135px;
transform: rotate(5deg);
border-radius: 100% 64% 42% 42% /  79% 81%  33% 38%   ;
animation: 토끼귀오른쪽 1.2s infinite alternate;
}
.rabbit .earline {
position: absolute;
top: 30px;
left: 20px;
width: 50px;
height: 170px;
border: 4px solid #000;
border-radius: 30%;
transform: rotate(2deg);
border-radius: 64% 100% 42% 42% / 81% 79% 38% 33%   ;
border-bottom: none;
background-color:  #ffeef9;
}
.rabbit .earline.left {
border-left: none;
border-radius: 64% 100% 42% 42% / 81% 79% 38% 33%   ;
}

.rabbit .earline.right {
border-radius: 100% 64% 42% 42% /  79% 81%  33% 38% ;
border-right: none;
left: 13px;
}
.face-top {
position: absolute;
top: 50px;
width: 300px;
height: 300px;
left: 100px;
border-radius: 50%;
background-color: #fffefb;
border: 6px solid #000;
}
.face-bottom {
position: absolute;
bottom: 120px;
width: 330px;
height: 230px;
left: 85px;
border-radius: 50%;
background-color: #fffefb;
border: 6px solid #000;
}

.face-middle {
z-index: 1;
position: absolute;
top: 80px;
width: 289px;
height: 290px;
left: 106px;
border-radius: 50%;
background-color: #fffefb;
}

.face-left,.face-right {
z-index: 2;
top: 50px;
position: absolute;
width: 142px;
height: 232px;   ;           
border: 4px solid #000;
}
.face-right {
left: 110px;
width: 115px;
height: 214px; 
transform: rotate(9deg);
border-radius: 89% 11% 56% 44% / 66% 68% 32% 34% ;
background-color: #999999;           
}

.face-left {
right: 110px;
transform: rotate(-27deg);
border-radius: 48% 52% 55% 45% / 71% 49% 51% 29%  ;
background-color: #525252;            
}

.eye {
z-index: 2;
position: absolute;
top: 130px;
width: 23px;
height: 30px;
background-color: #000;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
}

.eye.left{
transform: rotate(10deg);
left:65px;
border-radius: 52% 48% 49% 51% / 54% 57% 43% 46% ;
}

.eye.right{
transform: rotate(-10deg);
right: 65px;
border-radius: 48% 52% 51% 49% / 57% 54% 46% 43% ;
}
.eye .left-twinkle, .right-twinkle {
z-index: 3;
top: 6px;
left: 7px;
position: absolute;
width: 4.5px;
height: 5px;
border-radius: 50%;
background-color: white;
}
.nose {
position: absolute;
z-index: 3;
background-color: #ffeef9;
box-shadow: -1px -1px 3px 3px rgba( 255,238,249, 1);
width: 40px;
height: 38px;
top: 190px;
left: 120px;
border-radius: 48% 52% 49% 51% / 27% 27% 73% 73%  ;
}

.nose-left,.nose-right{
z-index: 2;
position: absolute;
top: 10px;
width: 3px;
height: 7px;
border-radius: 50%;
background-color: #000;
animation: 콧구멍 1s infinite alternate;
}

.nose-left{
transform: rotate(-25deg);
left: 13px

}
.nose-right {
right: 13px;
transform: rotate(25deg);
}

.mouth-left,.mouth-right{
z-index: 3;
top: 4px;
position: absolute;
width: 22px;
height: 35px;
border: 4px solid black;
border-radius: 50%;
border-top: none;
border-left: none;
border-right: none;
background-color: none;
}
.mouth-left{
left: -2px;

}
.mouth-right{
right: -2px;
}

.mouth-bottom{
position: absolute;
z-index: 2;
top: 32px;
left: 11px;
background-color: #CE705F;
width: 18px;
height: 20px;
border-radius:52% 48% 49% 51% / 69% 71% 29% 31%  ;
animation: 입 1.2s infinite alternate;
}

.whisker{
position: absolute;
z-index: 5;
width: 140px;
height: 30px;
border: 2px solid rgb(43, 43, 43);
border-radius: 50%;
border-bottom: none;
border-left: none;
border-right: none;
top: 250px;
}

.whisker.right1{
transform: rotate(10deg);
width: 120px;
left: 70px;
animation: 오른쪽수염1 1s infinite alternate;
}
.whisker.right2{
top: 280px;
left: 50px;
transform: rotate(-4deg);
animation: 오른쪽수염2 0.9s infinite alternate;
}
.whisker.right3{
top: 310px;
transform: rotate(-20deg);
left: 90px;
width: 110px;
animation: 오른쪽수염3 1s infinite alternate;

}
.whisker.left1{
transform: rotate(-10deg);
width: 120px;
right: 70px;
animation: 왼쪽수염1 0.9s infinite alternate;
}
.whisker.left2{
top: 280px;
right: 50px;
transform: rotate(4deg);
animation: 왼쪽수염2 1s infinite alternate;
}
.whisker.left3{
top: 310px;
transform: rotate(20deg);
right: 90px;
width: 110px;
animation: 왼쪽수염3 0.9s infinite alternate;

}

.carrot {
z-index: 2;
position: absolute;
height: 55px;
width: 130px;
left: 171px;
top: 18px;
background-color: rgb(255, 110, 53);
border-radius: 88% 51% 32% 72% / 100% 60% 50% 44%    ;
border: 5px solid black;
}

.carrot1,.carrot2,.carrot3 {
position: absolute;
left: 115px;
top: 2px;
height: 15px;
transform: rotate(-10deg);
width: 40px;
border-radius: 52% 47% 32% 53% / 64% 60% 42% 36% ;
background-color: green;
border: 4px solid black;
}
.carrot2{
top: 12px;
transform: rotate(0deg);
}
.carrot3{
top: 22px;
transform: rotate(12deg);

}
.carrot4,.carrot5 {
position: absolute;
width: 4px;
height: 30px;
top: -18px;
left: 90px;
background-color: #000;
border-radius: 30%;
transform: rotate(7deg);
}
.carrot5 {
left: 78px;
height: 25px;
top: -15px;
transform: rotate(3deg);
}