Categories
Web development

3d CSS Birthday Cake and Candles Animation


3d CSS Birthday Cake and Candles Animation

To learn how to create the Birthday Cake and Candles Animation with HTML, CSS and jQuery follow the steps below and watch the video tutorial.

Demo:

*to see the animation on the website click here.

Step1.

Add HTML

<div id="birthday-cake">
  <div class="cake">
    <div class="middle"></div>
    <div class="chocs"></div>
    <div class="top"></div>
  </div>
  <div class="candles">
    <div class="flame"></div>
    <div class="flame2"></div>
    <div class="flame3"></div>
    <div class="text">Happy Birthday!</div>
    <div class="shadows"></div>
  </div>
  <p class="text2">*click on the flame to blow candles</p>
</div>

Step2.

Add CSS

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

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

#birthday-cake {
  position: relative;
  top:50px;
  left:0;
}

Style the cake:

#birthday-cake:before {
  content:"";
  position: absolute;
  background-color: #ede0d4;
  width: 400px;
  height:140px;
  border-radius:50%;
  left:50%;
  top:50%;
  transform: translate(-50%,-10%);
  box-shadow: inset -2px -5px #e6ccb2;
}

.cake {
  position: absolute;
  background-color: #ddb892;
  width: 350px;
  height:130px;
  transform: translate(-50%,-60%);
}

.cake:before, .cake:after {
  content:"";
  position: absolute;
}

.cake:before, .middle, .middle:before {
  border-radius: 50% 50% 50% 50% / 0% 0% 100% 100%;
  width:350px;
  height:50px;
}

.cake:before {
  background-color: #ddb892;
  top:130px;
}

.cake:after {
  background-color: #b08968;
  width:350px;
  height:30px;
  top:50px;
}

.middle {
  position: absolute;
  background-color: #b08968;
  top:80px;
  z-index:1;
}

.middle:before {
  content:"";
  position: absolute;
  background-color: #ddb892;
  top:-35px;
}

.top {
  position: absolute;
  background-color: #7f5539;
  width:350px;
  height: 90px;
  border-radius:50%;
  z-index:2;
  top:-45px;
  box-shadow: inset -5px -1px #fff, inset -70px 2px rgba(255,255,255,.1);
}

.chocs {
  position: absolute;
  width: 55px;
  height:50px;
  background-color: #7f5539;
  top:0;
  z-index:1;
  border-radius: 50% 50% 50% 50% / 0% 0% 100% 100%;
  box-shadow: 49px 20px #7f5539, 98px 25px #7f5539, 147px 30px #7f5539, 196px 25px #7f5539, 245px 20px #7f5539, 295px 0 #7f5539, 0px 4px #fff, 49px 24px #fff, 98px 29px #fff, 147px 34px #fff, 196px 29px #fff, 245px 24px #fff, 295px 4px #fff;
}

.chocs:before {
  content:"";
  position: absolute;
  width:175px;
  height:180px;
  background-color: rgba(255,255,255,.1);
  border-radius: 100% 0% 100% 0% / 0% 72% 28% 100%;
  left:175px;
  top:0;
}
CSS birthday cake

Style and animate candles:

.candles {
  position: absolute;
  width:30px;
  height: 80px;
  background-color: #0081a7;
  top:-160px;
  left:-20px;
  box-shadow: 50px 20px #0081a7, -50px 20px #0081a7;
}

.candles:before {
  content:"";
  position: absolute;
  width:30px;
  height: 10px;
  background-color: #0081a7;
  border-radius:50%;
  top:-5px;
  box-shadow: 0 80px #0081a7, -50px 20px #0081a7, -50px 100px #0081a7, 50px 20px #0081a7, 50px 100px #0081a7, inset 2px -1px #fff;
}

.candles:after {
  content:"";
  position: absolute;
  width:30px;
  height: 10px;
  border-radius:50%;
  top:15px;
  left:50px;
  box-shadow: inset 2px -1px #fff;
}

.shadows {
  position: absolute;
  width:30px;
  height: 10px;
  border-radius:50%;
  box-shadow: inset 2px -1px #fff;
  left:-50px;
  top:15px;
}

.shadows:before {
  content:"";
  position: absolute;
  background-color: #333;
  width:1.5px;
  height:15px;
  left:14.5px;
  top:-10px;
  box-shadow:50px -20px #333, 100px 0 #333;
}

.shadows:after {
  content:"";
  position: absolute;
  width:15px;
  height:90px;
  left:15px;
  background-color: rgba(255,255,255,.1);
  box-shadow: 50px -20px rgba(255,255,255,.1), 100px 0 rgba(255,255,255,.1);
  border-radius: 0% 100% 50% 50% / 100% 6% 10% 0%;
}


.flame, .flame:before, .flame2, .flame2:before, .flame3, .flame3:before {
  position: absolute;
  border-radius: 80% 15% 55% 50% / 55% 15% 80% 50%;
}

.flame,.flame3, .flame2 {
  cursor: pointer;
  width:30px;
  height: 30px;
  transform: rotate(-45deg);
  z-index:4;
  background-color: rgba(252,191,73,.8);
  transition: .5s;
  animation: flame .5s infinite;
}

.flame {
  top:-40px;
}

.flame2, .flame3 {
  top: -20px;
}

.flame2 {
  left:-50px;
}

.flame3 {
  left: 50px;
}

.flame:before, .flame2:before, .flame3:before {
  content:"";
  background-color: rgba(247,127,0,.4);
  width:20px;
  height:20px;
  top:5px;
  left:5px;
}

@keyframes flame {
  0%, 25%, 100% {transform: scaleY(1) rotate(-45deg);}
  50%, 75% {transform: scaleY(1.1) rotate(-45deg);}
}

Style text:

.text, .text2 {
  position: absolute;
  color: white;
  font-family: 'Brush Script MT', cursive;
  text-align: center;
}
.text {
  width:350px;
  font-size: 50px;
  left:-140px;
  top:100px;
  z-index:-1;
  transition: .3s;
  opacity:0;
}

.text2 {
  font-size: 25px;
  width: 300px;
  top:105px;
  left:-140px;
}

Step3.

Add jQuery

To read how to add the jQuery code to HTML click here. Add libraries below in to the <head> section.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

and then the following code:

<script>
$(document).ready(function() {
    $(".candles").click(function() {
        
      $(".flame").animate({"opacity": 0}, "fast");
      $(".flame2").animate({"opacity": 0}, "fast");
      $(".flame3").animate({"opacity": 0}, "fast");
      $(".text").animate({"top": -90, "opacity": 1}, "fast");
    });
});
</script>

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS Coffee Express Animation

Birthday Cake – CSS Animation

CSS Door Animation (Open/Close on Hover)

Categories
CSS Web development

Birthday Cake – CSS Animation

CSS birthday cake

Demo:

To create the CSS Birthday Cake animation follow the steps below and watch the video tutorial.

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

Step 1.

Add HTML

<div class="birthday-cake">
  <div class="holder"></div>
  <div class="shadow"></div>
  <div class="cake">
    <div class="chocolate"></div>
  </div>
  <div class="candle"></div>
  <div class="flame"></div>
</div>

Step 2.

Add CSS

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

body {
  background-color: #68b0ab;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.birthday-cake {
  position: relative; 
  top:20px;
}

Style the cake holder and the shadow:

.holder {
  position:absolute;
  width:350px;
  height:20px;
  border-radius:100px;
  background-color: #212F3C;
  left:-140px;
  top:10px;  
}

.holder:before {
  content:"";
  position:absolute;
  width:100px;
  height:150px;
  background-color: #CACFD2;
  left:130px; 
  top:20px;
}

.holder:after {
  content:"";
  position:absolute;
  background-color:#68b0ab;
  width: 100px;
  height:135px;
  border-radius:30px 30px 0 0;
  left:65px;
  top:20px;
  box-shadow: 125px 0 #68b0ab;
}

.shadow {
  position:absolute;
  width:350px;
  height:20px;
  border-radius:50%;
  top:170px;
  left:-135px;
  background-color: rgba(0,0,0,0.095);
  z-index:1;
}

.shadow:before {
  content:"";
  position: absolute;
  background-color: #CACFD2;
  width:150px;
  height:20px;
  border-radius:20px;
  top:-10px;
  left:96px;
}
CSS birthday cake

Style the cake:

.cake {
  position:absolute;
  overflow:hidden;
  width:275px;
  height:140px;
  background-color: #FAD7A0;
  top:-130px;
  left:-101px;
  border-radius:30px 30px 0 0;  
}

.cake:before {
  content:"";
  background-color: #935116;
  width:275px;
  height:15px;
  position:absolute;
  top:75px;
  box-shadow: 0 30px #935116;
}

.cake:after {
  content:"";
  position: absolute;
  background-color: #573612;
  width:275px;
  height:40px;
  box-shadow:inset 0 10px rgba(0,0,0,0.07);
}

.chocolate {
  position:absolute; 
  background-color: #573612;
  width:25px;
  height:45px;
  top:25px;
  left:0;
  z-index:2;
  border-radius:50px;
  box-shadow: 25px 2px #FAD7A0, 50px -10px #573612, 75px -5px #FAD7A0, 100px 3px #573612, 125px 0 #FAD7A0, 150px -5px #573612, 175px 3px #FAD7A0, 200px -5px #573612, 225px -10px #FAD7A0, 250px 4px #573612;
}
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:before {
  position:absolute;
  width:15px;
  height:15px;
  background-color:#E74C3C;
  content:"";
  top:10px;
  box-shadow: 0 25px #E74C3C;
}

.candle:after {
  content:"";
  width:2px;
  height:15px;
  content:"";
  position:absolute;
  background-color:black;
  top:-15px;
  left:6px;
}

.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:26.5px;
  animation: flame 0.5s infinite;
    
}
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); }
}
  

Watch also the video tutorial:

Enjoy coding!

Read also:

CSS Folded Birthday Card

Simple CSS Birthday Cake

CSS Birthday Animation