<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="sheep">
<div class="wool" id="wool">
<div id="face">
<div class="eyes"></div>
<div class="eyes" id="eye1"></div>
</div>
<div class="legs" id="leg1"><div class="legs" id="leg2"></div></div>
</div>
</div>
</body>
</html>body {
background-color:green;
}
/*body*/
#wool {
background: white;
width: 100px;
height: 100px;
position: relative;
text-align: center;
transform: rotate(20deg);
border-radius:30%;
}
#wool:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100px;
width: 100px;
background: white;
transform: rotate(135deg);
border-radius:30%;
}
#face{
background-color:black;
border-radius:100%;
height:50px;
width:40px;
position:absolute;
margin-top:30px;
margin-left:20px;
}
.eyes {
border-radius:100%;
background-color: pink;
position:absolute;
margin-top:10px;
margin-left:10px;
height:5px;
width:5px;
}
#eye1 {
margin-left:20px;
}
#leg1 {
background-color:black;
border-radius: 20%;
position:absolute;
display:inline-block;
height:40px;
width:15px;
margin-top:90px;
margin-left:0px;
animation-name:legs;
animation-iteration-count:infinite;
animation-duration:1s;
}
#leg2 {
background-color:black;
border-radius: 20%;
position:absolute;
display:inline-block;
height:40px;
width:15px;
margin-top:0px;
margin-left:10px;
animation-name:legs;
animation-iteration-count:infinite;
animation-duration:1s;
}
#sheep {
display:flex;
align-items:end;
animation-name:sheep;
animation-iteration-count:infinite;
animation-duration:5s;
transition:transform;
transition-timing-function:ease-in;
}
@keyframes legs {
15% {
transform:rotate(0deg);
}
25% {
transform:rotate(15deg);
}
50% {
transform:rotate(-30deg);
}
}
@keyframes sheep {
0% {
transfrom:translate (0px,0px);
}
15% {
transform:translate(0px,300px);
}
20% {
transform:translate(300px,300px);
}
30% {
transform:translate(300px,20px);
}
40% {
transform:translate(300px,300px);
}
50% {
transform:translate(800px,300px);
}
60% {
transform:translate(800px,40px);
}
70% {
transform:translate(800px, 300px);
}
80% {
transform:translate(0px, 300px);
}
90% {
transform:translate(0px,300px);
}
100% {
transform:translate(0px,0px);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.