A small cup of coffee!

HTML
<div class='cup'> <div class='cup-itself'></div> <div class='handle'></div> <div class='steam'></div> </div>
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; } }
JAVASCRIPT
Expand for more options Login