#Coffee Archives - Lena Design

Demo:

*to see the animation on the website click here.

What do you need to do?

Add HTML
Add CSS
Add jQuery

Step1.

Add HTML

<div class="container">
<div id="circle">
     <div class="mug">
       <div class="handle"></div>
       <div class="inside">
         <div class="coffee"></div>
       </div>
       <div class="drink"></div>
       <div class="drip"></div>
        <div class="drip1"></div>
        <div class="drip2"></div>
     </div>
     <div class="fill"></div>
  </div>
</div>

Step2.

Add CSS

Set the colour and position of the background and elements:

.container {
  position: relative;
}

#circle {
  position: relative;
  background-color: #A1C181;
  width:450px;
  height:450px;
  border-radius: 50%;
  overflow:hidden;
  box-shadow:inset 5px -5px 0 rgba(0,0,0,0.07);
}

Style the mug:

.mug {
  position: absolute;
  width: 170px;
  height: 180px;
  background-color: #FCCA46;
  top: 135px;
  left:140px;  
}

.mug:after {
  position: absolute;
  content:"";
  width: 170px;
  height: 40px;
  border-radius:50%;
  background-color: #FCCA46;
  top:-18px;
}

.mug:before {
  position: absolute;
  content:"";
  width: 170px;
  height: 40px;
  border-radius:50%;
  background-color: #FCCA46;
  top:158px;
  box-shadow: 1px 25px 3px rgba(0,0,0,0.09);
}
.handle {
  position: absolute;
  border: 17px solid #FCCA46;
  border-radius:50%;
  width: 100px;
  height: 100px;
  left: 100px;
  top: 25px;  
}

.inside {
  position: absolute;
  content:"";
  width: 155px;
  height: 40px;
  border-radius:50%;
  background-color: #ffe066;
  top:-13px;
  left: 7px;
  z-index:1;
  overflow: hidden; 
}

Add Coffee and drip:

.coffee {
  position: absolute;
  width: 200px;
  left:-20px;
  height: 40px;
  border-radius:50%;
  background-color: #432818;
  top:30px;
  
}

.drip {
  position: absolute; 
  width: 5px;
  height: 5px;
  background-color: #432818;
  z-index:2;
  left:60px;
  top:20px;
  
}

.drip1 {
  position: absolute; 
  width: 8px;
  height: 2px;
  left:35px;
  top:20px;
  background-color: #432818;
}

.drip2 {
  position: absolute; 
  width: 8px;
  height: 2px;
  left:130px;
  top:20px;
  background-color: #432818;
}

.fill {
  position: absolute;
  width: 500px;
  height: 500px;
  top:450px;
  background-color: #432818;
  z-index:3;
}

.drink {
  position: absolute;
  width: 20px;
  height: 2px;
  background-color: #432818;
  top:-150px;
  left: 75px;
  z-index:2;
}

Step3.

Add jQuery

setTimeout(function(){
    $(".drink").animate({
        "height": "+=275",
        top: "-=100"
    })
}, 2500, "ease")


setTimeout(function(){
    $(".coffee").animate({
        "height": "+=300",
        top: "-=100"
    })
}, 3000, "ease")

setTimeout(function(){
    $(".drip").animate({
        "height": "+=300",
        bottom: "-=100"
    })
}, 4500, "ease")

setTimeout(function(){
    $(".drip1").animate({
        "height": "+=300",
        bottom: "-=100"
    })
}, 5500, "ease")

setTimeout(function(){
    $(".drip2").animate({
        "height": "+=300",
        bottom: "-=100"
    })
}, 6500, "ease")

setTimeout(function(){
    $(".fill").animate({
        "height": "+=500",
        top: "-=500"
    }, 5000)
}, 5500, "ease")

Enjoy coding!

Read also:

CSS Steaming Coffee

Simple CSS Birthday Cake

CSS Coffee Express Animation

It’s Monday… but it’s OK. Fancy some Coffee?

To create the CSS Coffee Express animation follow the steps below and watch the video tutorial.

Demo:

*to see the CSS Coffee Express Animation on the website click here.

Step1.

Add HTML

<div class="coffee-express">
  <div class="express">
    <div class="base">
      <div class="buttons"></div>
    </div>
    <div class="panel">
      <div class="button"></div>
      <div class="logo"></div>
    </div>
    <div class="coffeepod"></div>
    <div class="drinks"></div>
    <div class="cup"></div>
    <div id="wrap">
  <div id="steam" class="steam1"></div>
  <div id="steam" class="steam2"></div>
  <div id="steam" class="steam3"></div>
  <div id="steam" class="steam4"></div>
  </div>
</div>
</div>

Step2.

Add CSS

Set the colour and the position of the background and elements:

body {
  background-color: #0a9396;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
}

.coffee-express {
  position: relative; 
}

Style the coffee express:

.express {
  position: relative;
  background-color: #b2b2b2;
  width:190px;
  height:180px;
  top:20px;
  left:0;
  box-shadow:inset 5px -5px 0 rgba(0,0,0,0.07);
}

.express:before {
  content:"";
  position: absolute;
  background-color: #C2C1C1;
  width: 220px;
  height: 140px;
  border-radius: 30px; 
  top:-120px;
  left:-15px;
}

.express:after {
  content:"";
  position: absolute;
  background-color: #949494;
  width: 150px;
  height: 170px;
  left:20px;
  box-shadow:inset 5px -5px 0 rgba(0,0,0,0.07);
  top:10px;
}

.base {
  position: absolute;
  background-color: #005f73;
  width: 260px;
  height: 60px;
  top:190px;
  left:-35px;
  border-radius:20px 20px 0 0;
  box-shadow:inset 5px -5px 0 rgba(0,0,0,0.07);  
  z-index:5;
}

.base:before {
  content:"";
  background-color: #94d2bd;
  width:220px;
  height:20px;
  position: absolute;
  top:-20px;
  left:20px;
  border-radius: 10px 10px 0 0;
  box-shadow:inset 5px -5px 0 rgba(0,0,0,0.07);
}

.base:after {
  content:"";
  position: absolute;
  background-color: #333;
  width: 260px;
  height: 15px;
  border-radius: 0 0 10px 10px;
  top:60px;
  box-shadow:inset 5px -5px 0 rgba(0,0,0,0.07);
}

.buttons {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 3px solid white;
  border-radius: 50%;
  box-shadow:inset 5px -5px 0 rgba(0,0,0,0.07);
  top:20px;
  left:80px;
}

.buttons:before, .buttons:after {
  content:"";
  position: absolute;
  width: 10px;
  height: 10px;
  border: 3px solid white;
  border-radius: 50%;
  box-shadow:inset 5px -5px 0 rgba(0,0,0,0.07);
  top:-3px; 
}

.buttons:before {
  left:40px;
}

.buttons:after {
  left:80px;
}

.panel {
  position: absolute;
  background-color:#E5E8E8;
  width:170px;
  height: 130px;
  left:5px;
  top:-120px;
  z-index:4;
  border-radius:5px;
  border:5px solid rgba(0,0,0,0.15);
}

.panel:before, .panel:after {
  content:"";
  position: absolute;
  border-radius: 50%;
  background-color: #e9d8a6;
  width: 20px;
  height: 20px;
  border: 4px solid #333;
  box-shadow:inset 5px -5px 0 rgba(0,0,0,0.07);
  top:80px;
}

.panel:before {
  left: 35px;
}

.panel:after {
  left:75px;
}

.button {
  position: absolute;
  border-radius: 50%;
  background-color: #e9d8a6;
  width: 20px;
  height: 20px;
  border: 4px solid #333;
  box-shadow:inset 5px -5px 0 rgba(0,0,0,0.07);
  top:80px;
  left:115px;
}

.button:before {
  content:"";
  position: absolute;
  background-color: rgba(0,0,0,0.2);
  width: 290px;
  height: 15px;
  top:290px;
  left:-180px;
  border-radius:20px;
}

.button:after {
  content:"";
  position: absolute;
  background-color:#333;
  width: 70px;
  height: 5px;
  top: 196px;
  left: -65px;
  border-radius: 5px 5px 0 0;
}

.logo {
  background-color: #9b2226;
  height: 15px;
  position: relative;
  top: 40px;
  left: 77px;
  transform: rotate(-45deg);
  width: 15px; 
}

.logo:before,
.logo:after {
  content: "";
  background-color: #9b2226;
  border-radius: 50%;
  height: 15px;
  position: absolute;
  width: 15px;
}

.logo:before {
  top: -7.5px;
  left: 0;
}

.logo:after {
  left: 7.5px;
  top: 0;
}

Coffee pod:

.coffeepod {
  position: absolute;
  width: 80px;
  height: 20px;
  background-color:#D7D7D7;
  top:20px; 
  left: 60px;
  border-radius: 0 0 20px 20px;
  box-shadow:inset 3px -5px 0 rgba(0,0,0,0.07);
  z-index:9;
}

.coffeepod:before {
  content:"";
  position: absolute;
  background-color: #333;
  width:50px;
  height: 10px;
  top:20px;
  left:15px;
  border-radius: 0 0 5px 5px;  
}

.coffeepod:after {
  content:"";
  position: absolute;
  background-color: #333;
  width: 10px;
  height: 20px;
  border-radius: 2px;
  top:20px;
  left:25px;
  box-shadow: 20px 0 #333;
}

Coffee and milk:

.drinks {
  position: absolute;
  z-index:8;
}

.drinks:before {
  content:"";
  position: absolute;
  width: 6px;
  height: 65px;
  opacity: 0;
  top: 50px;
  left: 87px;
  background-color: #472708;
  animation: drinks 4s linear;
  animation-delay: 4s;
}

.drinks:after {
  content:"";
  position: absolute;
  width: 6px;
  height: 65px;
  opacity: 0;
  top: 50px;
  left: 107px;
  background-color: white;
  animation: drinks 3s linear;
  animation-delay: 3s;
}

Add the cup:

.cup {
  position: absolute;
  background-color: #ae2012;
  width: 70px;
  height: 50px;
  border-radius: 5px 5px 30px 30px;
  box-shadow:inset 5px -5px 0 rgba(0,0,0,0.07);
  top:115px;
  left:63px;
  z-index:10;
}
.cup:before {
  position: absolute;
  content:"";
  border: 8px solid #ae2012;
  border-radius: 50%;
  width: 20px;
  height: 15px;
  top:6px;
  left:55px; 
}

Steam:

#steam {
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: #fff;
  border-radius: 50%;
  opacity: 0;
  top: 105px;
  z-index:5;
  left:85px;
}
.steam1 {
  animation: steam1 4.5s ease-out 5s infinite; 
}
.steam3 {
  animation: steam1 3.5s ease-out 7s infinite; 
}

.steam2 {
  animation: steam2 1s ease-out 5.5s infinite; 
}
.steam4 {
  animation: steam2 2s ease-out 7.5s infinite; 
}

Step3.

Add CSS Animation

To fill the cup:

@keyframes drinks {
  0% {height: 0px; opacity: 1;}
  10% {height: 0px; opacity: 1;}
  30% {height: 65px;opacity: 1;}
  80% {height: 65px; opacity: 1;}
  100% {height: 65px; opacity: 0;}
}

and add the steam:

@keyframes steam1{
  0%{
    transform: translateY(0) translateX(0) scale(0.4);
    opacity: 0.25;
  }
  100%{
    transform: translateY(-40px) translateX(10px) scale(1);
    opacity: 0;
  }
}
@keyframes steam2{
  0%{
    transform: translateY(0) translateX(0) scale(0.5);
    opacity: 0.25;
  }
  100%{
    transform: translateY(-30px) translateX(-10px) scale(1);
    opacity: 0;
  }
}

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

Simple CSS Birthday Cake

CSS Coffee Cup

CSS Ice cream