Categories
CSS Web development

Bday Cake – CSS Animation

My cat has a birthday today, celebrating this day I created the Bday cake in CSS. Follow the steps below and create own Birthday cake and the balloons!

CSS Bday Cake
Do you like this gif? Check more gifs in the store.

To create a birthday animation follow the steps below.

*animation opened in the Safari browser.
To see the live output click here.

What do you need to do?

  1. Add HTML
  2. Add CSS
  3. Add CSS Animation

Step 1.

Add HTML

Draw your cake:

<div class="container">
  <div class="bdaycake">
    <div class="holder"></div>
    <div class="holder2"></div>
    <div class="holder1"></div>
    <div class="shadow"></div>
    <div class="cake">
      <div class="top"></div>
      <div class="chocolate"></div>
      <div class="chocolate1"></div>
      <div class="chocolate2"></div>
    </div>
    <div class="candle"></div>
    <div class="candle1"></div>
    <div class="flame"></div>
  </div>
</div>

Step 2.

Add CSS

Set the background colour and the position of the container:

body {
  background: #1D8348;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.container {
  position:relative;
}

Set up the cake holder:

.holder {
  position:absolute;
  width:350px;
  height:20px;
  border-radius:100px;
  background-color: #212F3C;
  left:-140px;
  z-index:11;
  top:10px;
  
}
.holder2 {
  position:absolute;
  width:100px;
  height:130px;
  background-color: #CACFD2;
  left:-22px;
  top:20px;
}
.holder:before {
  content:"";
  position:absolute;
  width:200px;
  height: 20px;
  border-radius:100px;
  background-color: #CACFD2;
  top:139px;
  left:77px;
  
}
.shadow {
  position:absolute;
  width:400px;
  height:40px;
  border-radius:50%;
  top:150px;
  left:-155px;
  background-color: rgba(0,0,0,0.095);
  z-index:-1;
  
}
.holder1 {
  position:absolute;
  background-color:#1D8348;
  width: 100px;
  height:119px;
  border-radius:0 30px 0 0;
  left:-77px;
  top:30px;
  z-index:10;
  
}
.holder1:after {
  position:absolute;
  content:"";
  background-color:#1D8348;
  width: 100px;
  height:120px;
  border-radius:30px 0 0 0;
  left:130px;
  
}
CSS Bday Cake

Style the cake:

.cake {
  position:absolute;
  overflow:hidden;
  width:280px;
  height:140px;
  background-color: #FAD7A0;
  top:-130px;
  left:-102px;
  border-radius:30px 30px 0 0;
  
}
.cake:after {
  content:"";
  background-color: #935116;
  width:280px;
  height:15px;
  position:absolute;
  top:105px;
}

.cake:before {
  content:"";
  background-color: #935116;
  width:280px;
  height:15px;
  position:absolute;
  top:75px;
}
.top {
  position:absolute;
  background-color: #573612  ;
  width:290px;
  height:40px;
  box-shadow:inset -10px 10px 0 rgba(0,0,0,0.07);
  
}
.top:after {
  content:"";
  position:absolute; 
  background-color: #573612;
  width:25px;
  height:55px;
  top:15px;
  border-radius:50px;
  
}
.top:before {
  content:"";
  position:absolute; 
  background-color: #FAD7A0;
  width:25px;
  height:35px;
  top:25px;
  left:25px;
  border-radius:50px;
}
.chocolate {
  position:absolute; 
  background-color: #573612;
  width:25px;
  height:45px;
  top:15px;
  left:50px;
  border-radius:50px;
}
.chocolate:after {
  content:"";
  position:absolute; 
  background-color: #FAD7A0;
  width:25px;
  height:35px;
  left:25px;
  border-radius:50px;
  
}
.chocolate:before {
  position:absolute; 
  background-color: #573612;
  width:25px;
  height:45px;
  top:10px;
  left:50px;
  border-radius:50px;
  content:"";
  
}
.chocolate1 {
  position:absolute; 
  background-color: #FAD7A0;
  width:25px;
  height:35px;
  left:125px;
  top:25px;
  border-radius:50px;
}
.chocolate1:after {
  position:absolute; 
  background-color: #573612;
  width:25px;
  height:45px;
  top:-5px;
  left:25px;
  border-radius:50px;
  content:"";
}
.chocolate1:before {
  position:absolute; 
  content:"";
  background-color: #FAD7A0;
  width:25px;
  height:35px;
  left:50px;
  top:5px;
  border-radius:50px;
  
}
.chocolate2 {
  position:absolute; 
  background-color: #573612;
  width:25px;
  height:35px;
  left:200px;
  top:17px;
  border-radius:50px;
}
.chocolate2:after {
  position:absolute;
  content:"";
  background-color: #FAD7A0;
  border-radius:50px;
  width:25px;
  height:35px;
  left:25px;
}
.chocolate2:before {
  content:"";
  position:absolute; 
  background-color: #573612;
  width:35px;
  height:35px;
  left:50px;
  top:8px;
  border-radius:50px;
}
CSS Birthday Cake

Style the candle and the flame:

.candle {
  position:absolute; 
  width: 15px;
  height:70px;
  background-color: white;
  top:-200px;
  left:30px;
  box-shadow:inset 0 -10px 0 #E74C3C;
}
.candle:after {
  position:absolute;
  width:15px;
  height:15px;
  background-color:#E74C3C;
  content:"";
  top:35px;
}
.candle:before {
  position:absolute;
  width:15px;
  height:15px;
  background-color:#E74C3C;
  content:"";
  top:10px;
}
.candle1 {
  width:2px;
  height:15px;
  content:"";
  position:absolute;
  background-color:black;
  top:-215px;
  left:36px;
}
.flame {
  position:absolute;
  background-color: #F4D03F;
  opacity:0.9;
  box-shadow:inset 0 -5px 5px #D35400, 5px -5px 20px #FBFFA3;
  width:20px;
  height:30px;
  top:-240px;
  border-radius:50%;
  left:25.5px;
  animation: flame 0.5s infinite;
    
}

Note: To the candle, I added flame animation.

CSS Birthday Cake

Step 3.

Add CSS Animation

Light a candle 🙂

@keyframes flame {
  from, to { transform: scale(1, 1); }
  25% { transform: scale(0.9, 1.1); }
  50% { transform: scale(1.1, 0.9); }
  75% { transform: scale(0.95, 1.05); }
}
  

To see the live output visit: lenastanley.com.

Enjoy coding!

Leave a Reply