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)
