potatinho
Version:
A cute potato
138 lines (125 loc) • 1.74 kB
CSS
.potato div,
.potato ul,
.potato span {
display: inline-block;
position: absolute;
padding: 0;
top: 0;
bottom: 0;
left: 4rem;
}
.brown {
background-color: #452211;
}
.yellow-dark {
background-color: #e2c478;
}
.little-potato .head {
bottom: auto;
height: 130px;
width: 120px;
z-index: 3;
}
.little-potato .head .face {
width: 120px;
height: 70px;
top: auto;
border-radius: 40px 40px 30px 30px;
animation: face-bounce 4s infinite;
z-index: 2;
left: 3.5rem;
}
.face .eye {
width: 14px;
height: 14px;
border-radius: 50%;
bottom: auto;
top: 28px;
animation: blink 4s infinite;
}
.eye.left {
right: auto;
left: 32px;
}
.eye.right {
left: auto;
right: 32px;
}
.face .mouth {
text-align: center;
height: 10px;
margin-top: 2rem;
margin-left: -.3rem;
}
.face .cachete {
width: 16px;
height: 16px;
border-radius: 50%;
bottom: auto;
top: 38px;
background-color: #ceae6f;
z-index: 9;
}
.cachete.left {
right: auto;
left: 10px;
}
.cachete.right {
left: auto;
right: 10px;
}
@keyframes blink {
0% {
height: 14px;
top: 28px;
}
5% {
height: 2px;
top: 34px;
}
10% {
height: 14px;
top: 28px;
}
40% {
height: 14px;
top: 28px;
}
50% {
height: 2px;
top: 34px;
}
55% {
height: 14px;
top: 28px;
}
100% {
height: 14px;
top: 28px;
}
}
@keyframes shield-bounce {
0% {
top: 3rem;
}
50% {
top: 2rem;
}
100% {
top: 3rem;
}
}
@keyframes face-bounce {
0% {
height: 70px;
left: 3.5rem;
}
50% {
height: 100px;
left: 4.7rem;
}
100% {
height: 70px;
left: 3.5rem;
}
}