HTML
<div class="weight">
<div class="panda">
<div class="panda__contain">
<div class="panda__ears"></div>
<div class="panda__head">
<div class="panda__eyes"></div>
<div class="panda__nose"></div>
</div>
</div>
<div class="panda__arms"></div>
<div class="panda__body"></div>
<div class="panda__legs"></div>
</div>
</div>
<div class="panda__shadow"></div>
CSS(SCSS)
// Options
$black: #1b1e23;
$white: #eaf4de;
$background: #a6c1a6;
// Pen specific
html,
body {
height: 100%;
}
body {
background: $background;
display: flex;
justify-content: center;
align-items: center;
font-family: sans-serif;
flex-direction: column;
}
// Panda
.panda {
transform: scale(1.2) translateY(40px);
zoom: 1.2;
animation: panda 0.25s ease-in-out alternate infinite;
transform-origin: bottom center;
&__ears {
display: flex;
justify-content: space-between;
position: relative;
z-index: -1;
transform: translateY(23px) scale(1.25);
}
&__ears:before,
&__ears:after {
content: " ";
display: block;
background: #543535;
width: 10px;
height: 10px;
border: 5px solid $black;
border-radius: 10px;
}
&__contain {
transform-origin: bottom center;
animation: tilt 3s ease-in-out alternate infinite;
}
&__head,
&__body {
background: $white;
height: 50px;
width: 60px;
border-radius: 30px 30px 15px 15px / 40px 40px 10px 10px;
position: relative;
display: flex;
justify-content: center;
}
&__eyes {
display: flex;
justify-content: space-between;
position: absolute;
width: 65%;
left: 17%;
top: 40%;
animation: eyes 3s ease-in-out infinite alternate;
}
&__eyes:before,
&__eyes:after {
content: "";
display: block;
width: 4px;
height: 4px;
border: 6px solid $black;
background: #9fb7dd;
}
&__eyes:before {
transform: rotate(-30deg) scale(1, 0.75);
border-radius: 12px 8px 8px 8px / 12px 8px 8px 8px;
}
&__eyes:after {
transform: rotate(30deg) scale(1, 0.75);
border-radius: 8px 12px 8px 8px / 8px 12px 8px 8px;
}
&__nose {
width: 30px;
height: 35px;
background: $white;
border: 1px solid $black;
border-radius: 16px;
transform: scale(1, 0.5);
position: absolute;
top: 40%;
display: flex;
flex-direction: column;
align-items: center;
animation: nose 3s ease-in-out alternate infinite;
}
&__nose:before {
content: "";
display: block;
height: 8px;
width: 8px;
border-radius: 4px;
margin-top: 5px;
background: $black;
animation: eyes 3s ease-in-out infinite alternate;
}
&__nose:after {
content: "";
display: block;
height: 15px;
width: 2px;
border-radius: 4px;
background: $black;
animation: eyes 3s ease-in-out infinite alternate;
}
&__arms {
position: relative;
}
&__arms:before,
&__arms:after {
content: "";
display: block;
position: absolute;
top: 3px;
height: 30px;
width: 13px;
background: $black;
border-radius: 5px 5px 5px 5px;
transform-origin: center top;
z-index: -1;
}
&__arms:before {
transform: rotateZ(120deg);
left: 10px;
animation: wave 0.5s ease-in-out alternate infinite;
}
&__arms:after {
right: 10px;
transform: rotateZ(-35deg);
animation: offhand 0.8s ease-in-out alternate infinite;
}
&__body {
z-index: -1;
transform: scale(1, 0.65) translateY(-30px);
border-top: 20px solid $black;
border-bottom: 5px solid $black;
animation: breathe 0.25s ease-in-out infinite alternate;
border-radius: 30px 30px 25px 25px / 40px 40px 25px 25px;
}
&__legs {
position: relative;
transform: translateY(-35px);
display: flex;
justify-content: space-between;
z-index: -2;
width: 50px;
margin-left: 5px;
}
&__legs:before,
&__legs:after {
content: " ";
display: block;
height: 25px;
width: 18px;
border-radius: 0 0 5px 5px;
background: $black;
}
&__legs:before {
transform: translateY(-10px);
animation: run 0.5s ease-in-out alternate infinite;
}
&__legs:after {
transform: translateY(-16px);
animation: run-r 0.5s ease-in-out alternate infinite;
}
&__shadow {
content: "";
display: block;
background: $black;
width: 60px;
height: 60px;
transform: scale(1, 0.3);
border-radius: 30px;
position: relative;
z-index: -1;
opacity: 0.2;
animation: shadow 0.25s ease-in-out alternate infinite;
}
}
.weight {
transform-origin: bottom center;
animation: weight 0.5s ease-in-out alternate infinite;
}
@keyframes wave {
0% {
transform: rotateZ(90deg);
}
100% {
transform: rotateZ(120deg);
}
}
@keyframes tilt {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(10deg);
}
}
@keyframes breathe {
0% {
transform: scale(1, 0.65) translateY(-30px);
}
100% {
transform: scale(1, 0.67) translateY(-30px);
}
}
@keyframes offhand {
0% {
transform: rotateZ(-110deg);
}
100% {
transform: rotateZ(-80deg);
}
}
@keyframes eyes {
0% {
transform: translateX(-1px);
}
100% {
transform: translateX(1px);
}
}
@keyframes nose {
0% {
transform: scale(1, 0.5) translateX(-2px);
}
100% {
transform: scale(1, 0.5) translateX(2px);
}
}
@keyframes run {
0% {
transform: translateY(-10px);
}
100% {
transform: scale(0.85, 1) translateY(-16px);
background: #000;
}
}
@keyframes run-r {
0% {
transform: scale(0.85, 1) translateY(-16px);
background: #000;
}
100% {
transform: translateY(-10px);
}
}
@keyframes panda {
0% {
transform: scale(1) translateY(60px);
}
100% {
transform: scale(1) translateY(56px);
}
}
@keyframes weight {
0% {
transform: rotateZ(-4deg);
}
100% {
transform: rotateZ(4deg);
}
}
@keyframes shadow {
0% {
transform: scale(1.2, 0.3) translateY(-30px);
}
100% {
transform: scale(1.15, 0.3) translateY(-27px);
}
}
Right's Under
Tanishq sahu
Founder
(High tech 7)
