[tx]<!DOCTYPE html>
<html lang="en">
<head>
<title>Koala</title>
</head>
<body>
<div class="character">
<div class="head">
<div class="ear ear-left"> </div>
<div class="ear ear-rigth"> </div>
<div class="eyes"></div>
<div class="nose"></div>
<div class="lip"></div>
</div>
<div class="body">
<div class="hand hand-right"></div>
<div class="hand hand-left"></div>
</div>
</div>
<style>
body {
display: flex;
justify-content: center;
padding-top: 150px;
}
.character {
position: relative;
}
.character .head {
height: 125px;
width: 155px;
background: #94e1fd;
border-radius: 80px 89px 55px 55px;
position: relative;
border: 4px solid black;
top: 6px;
}
.character .head:after {
content: "";
position: absolute;
bottom: -43%;
width: 40px;
height: 50px;
background: white;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
left: 42%;
}
.ear {
width: 78px;
height: 78px;
background: white;
border-radius: 38% 62% 57% 43% / 45% 48% 52% 55%;
border: 4px solid black;
position: absolute;
}
.ear-left {
top: -24%;
left: -24%;
border-bottom-color: #94e1fd;
transform: rotate(-49deg);
box-shadow: inset 6px 20px 0px 12px #94e1fd, inset -20px 18px 0 0px #94e1fd, inset 3px -9px 0 0px #94e1fd;
animation: ear-left 2s infinite linear;
}
.ear-left:before {
content: "";
width: 4px;
height: 6px;
border-radius: 50%;
background: black;
position: absolute;
top: 31px;
left: 110%;
transform: rotate(-76deg);
box-shadow: 15px 12px, 30px 0px;
opacity: 0;
animation: ear-left-after 2s infinite linear;
}
.ear-rigth {
left: 65%;
top: -24%;
transform: rotate(-227deg);
z-index: -1;
box-shadow: inset 20px -4px 0px 13px #94e1fd, inset 20px -11px 0 0px #94e1fd, inset 20px 19px 0 0px #94e1fd;
animation: ear-right 2s infinite linear;
}
.eyes {
width: 14px;
height: 10px;
background: black;
position: absolute;
border-radius: 50%;
top: 46%;
left: 28%;
box-shadow: 65px 0px;
animation: eyes 2s infinite linear;
}
.eyes:after {
content: "";
width: 14px;
height: 3px;
background: black;
position: absolute;
border-radius: 50%;
bottom: -57%;
box-shadow: 65px 0px;
}
.nose {
width: 31px;
height: 35px;
background: #6f69ef;
border-radius: 53% 47% 59% 41% / 73% 76% 24% 27%;
border: 4px solid;
position: absolute;
top: 43%;
left: 43%;
animation: nose 2s infinite linear;
}
.lip {
width: 34px;
height: 4px;
background: black;
position: absolute;
border-radius: 25%;
top: 83%;
left: 45%;
animation: lip 2s infinite linear;
}
.body {
position: relative;
z-index: -1;
}
.body:after,
.body:before {
content: "";
border-radius: 50%;
width: 44px;
height: 105px;
border: 4px solid;
position: absolute;
background: #94e1fd;
border-right-color: transparent;
left: 24%;
top: -8px;
}
.body:after {
left: 46%;
border-left-color: transparent;
border-right-color: black;
}
.hand {
border-right-color: transparent;
width: 34px;
height: 55px;
border-radius: 71% 29% 22% 78% / 17% 78% 22% 83%;
background: #94e1fd;
border: 4px solid;
position: absolute;
left: 8%;
top: -2px;
border-top-color: #94e1fd;
transform: rotate(39deg);
}
.hand-left {
left: 63%;
transform: rotate(-27deg);
border-radius: 59% 41% 32% 68% / 20% 62% 38% 80%;
border-left-color: transparent;
}
@keyframes eyes {
100% {
height: 30px;
top: 22%;
width: 10px;
}
}
@keyframes nose {
100% {
top: 22%;
}
}
@keyframes lip {
100% {
background: #f77676;
height: 25px;
width: 25px;
top: 72%;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
transform: translateY(-10px);
}
}
@keyframes ear-left {
100% {
border-bottom-color: black;
top: 165%;
transform: rotate(-175deg);
height: 24px;
}
}
@keyframes ear-right {
100% {
top: 165%;
transform: rotate(-175deg);
height: 24px;
}
}
@keyframes ear-left-after {
95% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>
</body>
</html>[/tex]
Answers
Answered by
10
Answered by
13
Similar questions