Bubble Tea Cup

HTML
<div class="container"> <div class="cup"></div> <div class="straw"></div> <div class="shine"></div> <div class="tea"></div> <div class="bubble-1"></div> <div class="bubble-2"></div> <div class="bubble-3"></div> <div class="bubble-4"></div> <div class="bubble-5"></div> <div class="bubble-6"></div> <div class="bubble-7"></div> <div class="bubble-8"></div> <div class="bubble-9"></div> <div class="logo"> <div class="nose"></div> <div class="toothline-1"></div> <div class="toothline-2"></div> <div class="eye"> <div class="eye-1"> <div class="heart"></div> </div> <div class="eye-2"></div> </div> </div> </div>
SASS
$pink: #E85C82 $white: #EDD8DA $choco: #D69369 $beige: #CB9D7D $orange: #F49341 $cup: #F5F5F5 body background-color: $white .container, .cup, .tea, .logo, .straw, .bubble, .eye, .toothline-1, .toothline-2, .shine, .nose, position: absolute .container margin: auto top: 0 right: 0 bottom: 0 left: 0 width: 200px height: 200px .cup width: 100px border-top: 250px solid $cup border-left: 25px solid transparent border-right: 25px solid transparent opacity: 0.5 &:before, &:after position: absolute content: '' background-color: $cup &:before width: 160px height: 4px top: -250px left: -30px border-radius: 2px box-shadow: 0 1px rgba(#DEDBD2, 0.5) .straw width: 10px height: 300px top: -50px left: 100px background-color: $pink transform: rotate(10deg) z-index: -1 .tea width: 98px top: 30px left: 4px border-top: 219px solid $orange border-right: 22px solid transparent border-left: 22px solid transparent border-radius: 2px .logo top: 85px left: 45px height: 50px width: 60px background-color: #FFF border: 2px solid border-radius: 50% z-index: 5 transform: rotate(10deg) .eye background-color: #000 .eye-1 @extend .eye height: 20px width: 20px top: 18px left: 5px border-radius: 100% .heart position: absolute width: 100px height: 90px top: -34px left: -40px z-index: 10 transform: scale(0.155) rotate(-20deg) .heart:before, .heart:after position: absolute content: "" left: 50px top: 0 width: 50px height: 80px background: #FFF border-radius: 50px 50px 0 0 transform: rotate(-45deg) transform-origin: 0 100% .heart:after left: 0 transform: rotate(45deg) transform-origin: 100% 100% .eye-2 @extend .eye height: 18px width: 18px top: 20px left: 38px border-radius: 100% &:before, &:after position: absolute content: '' background-color: #FFF &:before height: 9px width: 8px border-radius: 100% top: 4px left: 3px transform: rotate(25deg) &:after height: 2px width: 2px border-radius: 100% top: 10px left: 12px .toothline-1 height: 10px width: 2px top: 47px left: 22px background-color: #000 .toothline-2 height: 10px width: 2px top: 47px left: 34px background-color: #000 .nose height: 3px width: 8px border-radius: 100% background-color: #000 transform: rotate(-45deg) top: 38px left: 24px &:after position: absolute content: '' height: 3px width: 8px top: 3px left: 3px border-radius: 100% background-color: #000 transform: rotate(90deg) &:before, &:after position: absolute content: '' background-color: #FFF &:before width: 30px height: 8px top: 47px left: 13px border-radius: 0 0 40% 40% border-bottom: 2px solid border-left: 2px solid border-right: 2px solid border: none 2px 2px 2px solid .bubble height: 20px width: 20px background-color: darken($choco, 45%) border-radius: 100% z-index: 3 &:before, &:after position: absolute content: '' &:before height: 4px width: 4px top: 4px left: 4px border-radius: 100% background-color: #FFF opacity: 0.8 &:after height: 2px width: 2px top: 8px left: 8px border-radius: 100% background-color: #FFF opacity: 0.6 .bubble-1 @extend .bubble top: 130px left: 17px opacity: 1 animation: bubbles 2.2s infinite ease-in-out .bubble-2 @extend .bubble top: 209px left: 32px opacity: 0.5 animation: bubbles 3s infinite ease-in-out .bubble-3 @extend .bubble top: 149px left: 47px opacity: 0.3 animation: bubbles 2.8s infinite ease-in-out .bubble-4 @extend .bubble top: 68px left: 55px opacity: 0.7 animation: bubbles 1.8s infinite ease-in-out .bubble-5 @extend .bubble top: 188px left: 65px opacity: 0.9 animation: bubbles 1.5s infinite ease-in-out .bubble-6 @extend .bubble top: 226px left: 82px opacity: 0.7 animation: bubbles 2.4s infinite ease-in-out .bubble-7 @extend .bubble top: 142px left: 85px opacity: 0.6 animation: bubbles 2.4s infinite ease-in-out .bubble-8 @extend .bubble top: 106px left: 105px opacity: 0.9 animation: bubbles 2s infinite ease-in-out .bubble-9 @extend .bubble top: 176px left: 109px opacity: 0.8 --top: 176px animation: bubbles 2s infinite ease-in-out .shine width: 15px left: 100px border-top: 246px solid $cup border-left: -25px solid transparent border-right: 25px solid transparent border-radius: 0 0 0 4px opacity: 0.2 z-index: 7 @keyframes bubbles 0% transform: translateY(0px) translateX(0px) rotate(0deg) 50% transform: translateY(-5px) translateX(0px) rotate(20deg) 100% transform: translateY(0px) translateX(0px) rotate(0deg)
JAVASCRIPT
Expand for more options Login