SCSS
* {
box-sizing: border-box;
}
html, body {
height: 100%;
width: 100%;
}
body {
background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
}
.cup {
width: 50px;
height: 60px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
.cup-itself {
border: 3px solid #fff;
width: 30px;
height: 40px;
border-radius: 0 0 25% 25%;
position: absolute;
bottom: 0;
left: 0;
}
.handle {
border-top: 3px solid #fff;
border-right: 3px solid #fff;
border-bottom: 3px solid #fff;
border-left: 1px solid transparent;
position: absolute;
top: 25px;
right: 0;
width: 18px;
height: 18px;
border-radius: 0% 50% 50% 0%;
}
.steam {
position: absolute;
bottom: 45px;
left: 14px;
height: 15px;
width: 1px;
background-color: #fff;
animation: fresh 3s infinite ease;
&:before {
content: "";
position: absolute;
width: 1px;
height: 60%;
background-color: #fff;
left: -7px;
bottom: 0;
}
&:after {
content: "";
position: absolute;
width: 1px;
height: 60%;
background-color: #fff;
left: 7px;
bottom: 0;
}
}
}
@keyframes fresh {
50% {
height: 0px;
}
100% {
height: 15px;
}
}
