HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dancing Cat</title>
<link rel="stylesheet" href="cat.css" />
</head>
<body>
<div class="container">
<div class="face">
<div class="ear-l"></div>
<div class="ear-r"></div>
</div>
<div class="hand-l"></div>
<div class="hand-r"></div>
<div class="leg-l"></div>
<div class="leg-r"></div>
<div class="music-note"></div>
</div>
</body>
</html>
CSS CODE:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #A0BDFF;
}
.container {
height: 25em;
width: 31.25em;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
perspective: 50em;
}
.face {
background-color: #66421B;
height: 7.5em;
width: 11.25em;
position: absolute;
transform: translateX(-50%);
left: 50%;
top: 3.12em;
border-radius: 0 0 3.12em 3.12em;
}
.face:before,
.face:after {
position: absolute;
content: "";
height: 0.4em;
width: 0.9em;
border: 0.43em solid #3D2B15;
border-bottom: none;
border-radius: 1.25em 1.25em 0 0;
top: 1.87em;
}
.face:before {
left: 3.12em;
}
.face:after {
right: 3.12em;
}
.ear-l,
.ear-r {
position: absolute;
background-color: beige;
height: 1.87em;
width: 0.93em;
bottom: 6.87em;
}
.ear-l {
border-radius: 0 3.75em 3.75em 0;
left: 0.62em;
box-shadow: 0 0 0 0.62em #66421B, 4.18em 0.3em 0 -0.06em #66421B;
}
.ear-r {
border-radius: 3.75em 0 0 3.75em;
right: 0.62em;
box-shadow: 0 0 0 0.62em #66421B, -4.18em 0.3em 0 -0.06em #66421B;
}
.ear-l:before {
position: absolute;
content: "";
height: 1.25em;
width: 1.25em;
background-color: #3D2B15;
border-radius: 50%;
top: 5em;
left: 4.37em;
box-shadow: -2.18em 0 0 -0.37em #3D2B15, 2.18em 0 0 -0.37em#3D2B15,
-3.43em 0 0 -0.37em#3D2B15, 3.43em 0 0 -0.37em#3D2B15;
}
.ear-l:after {
position: absolute;
content: "";
height: 1.25em;
width: 3.12em;
background-color:#3D2B15;
top: 8.74em;
left: 3.43em;
}
.ear-r:before {
position: absolute;
content: "";
height: 5em;
width: 5em;
background-color: beige;
top: 12.18em;
left: -6.56em;
box-shadow: 0 0 0 2.5em #66421B;
border-radius: 1.87em;
}
.ear-r:after {
position: absolute;
content: "";
height: 0.62em;
width: 0.62em;
background-color:#66421B;
top: 15.62em;
left: -4.37em;
border-radius: 50%;
}
.hand-l {
position: absolute;
height: 6.25em;
width: 6.25em;
border: 1.25em solid #66421B;
border-right: none;
border-bottom: none;
border-radius: 3.12em 0.62em 0.62em 0.62em;
top: 13.12em;
left: 7.5em;
animation: move-hand-l 6s infinite;
transform-origin: 104% 0;
transform-style: preserve-3d;
}
@keyframes move-hand-l {
50% {
transform: rotateX(180deg);
}
}
.hand-l:before {
position: absolute;
content: "";
height: 1.25em;
width: 0.62em;
background-color: #66421B;
bottom: -0.62em;
left: -0.62em;
border-radius: 0.62em;
}
.hand-r {
position: absolute;
height: 6.25em;
width: 6.25em;
border: 1.25em solid #66421B;
border-top: none;
border-left: none;
border-radius: 0.62em 0.62em 3.12em 0.62em;
top: 8.12em;
right: 6.25em;
animation: move-hand-r 6s infinite;
transform-origin: 0 100%;
transform-style: preserve-3d;
}
@keyframes move-hand-r {
50% {
transform: rotateX(-180deg);
}
}
.hand-r:before {
position: absolute;
content: "";
height: 1.25em;
width: 1.87em;
background-color: #66421B;
left: 4.68em;
border-radius: 0 0 0.62em 0.62em;
}
.hand-r:after {
position: absolute;
content: "";
height: 1.25em;
width: 0.62em;
background-color: #66421B;
left: 4.68em;
top: -0.62em;
border-radius: 1.25em;
box-shadow: 1.25em 0 #66421B;
}
.leg-l,
.leg-r {
height: 4.37em;
width: 1.87em;
background-color: #3D2B15;
position: absolute;
top: 20em;
z-index: -1;
}
.leg-l {
left: 12.5em;
}
.leg-r {
right: 12.5em;
animation: stamp 2s infinite;
}
@keyframes stamp {
50% {
transform: translateY(-1.25em);
}
}
.leg-l:before,
.leg-r:before {
position: absolute;
content: "";
height: 1.25em;
width: 2.5em;
background-color:#66421B;
top: 3.12em;
left: -0.31em;
border-radius: 0.93em 0.93em 0 0;
}
.music-note {
position: absolute;
height: 0.62em;
width: 2.5em;
background-color: black;
transform: scale(0.2);
top: 6.25em;
left: 15.62em;
animation: whistle 2s infinite;
}
@keyframes whistle {
100% {
transform: translate(6.25em, -6.25em);
opacity: 0;
}
}
.music-note:before {
position: absolute;
content: "";
height: 2.5em;
width: 0.62em;
background-color: black;
box-shadow: 2.5em 0 black;
}
.music-note:after {
position: absolute;
content: "";
height: 0.93em;
width: 0.93em;
background-color: black;
border-radius: 50%;
top: 1.87em;
left: -0.31em;
box-shadow: 2.5em 0 black;
}
Comments
Post a Comment