Video Tutorial:
If you are interested to learn by watching a video tutorial rather than reading this blog post, you can check out this video down below. Also, subscribe to my youtube channel where I post new tutorials every alternate day. Along with tutorials, I also post new tips and tricks.
Project Folder Structure:
Before we start coding, let us take a quick look at the project folder structure. We create a project folder called – ‘Cake Animation’. Inside this folder, we have two files – index.html and style.css. The first file is our HTML document, while the second one is the stylesheet.
HTML:
We begin with the HTML code. The HTML code consists of a div with a class container that holds and centres all the other divs. Within this div, we have the cake div. And finally, the cake div consists of div with class names as – candle, top-layer,middle-layer and bottom-layer.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cake Animation</title>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="cake">
<div class="candle"></div>
<div class="top-layer"></div>
<div class="middle-layer"></div>
<div class="bottom-layer"></div>
</div>
</div>
</body>
</html>
CSS:
We then style these elements and add animation to them using CSS. For this copy, the code provided to you below and paste it into your stylesheet.
*,
*::before,
*::after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #eac285;
}
.container {
width: 400px;
height: 400px;
background-color: #ffffff;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
border-radius: 8px;
box-shadow: 0 20px 45px rgba(120, 76, 10, 0.25);
}
.cake {
width: 100%;
position: absolute;
bottom: 60px;
}
.bottom-layer,
.top-layer,
.middle-layer {
height: 80px;
width: 240px;
position: relative;
margin: auto;
background-repeat: repeat;
background-size: 100% 100%, 60px 100px;
background-position: 28px 0;
background-image: linear-gradient(
transparent 50px,
#e3a953 50px,
#e3a953 60px,
transparent 60px
),
radial-gradient(circle at 30px 5px, #713e16 30px, #eac284 31px);
}
.middle-layer {
transform: scale(0.85);
top: 72px;
animation: rise-1 2s forwards;
}
@keyframes rise-1 {
100% {
top: 7px;
}
}
.top-layer {
transform: scale(0.7);
top: 144px;
animation: rise-2 2s 2s forwards;
}
@keyframes rise-2 {
100% {
top: 26px;
}
}
.candle {
background: repeating-linear-gradient(
45deg,
#fd3018 0,
#fd3018 5px,
#ffa89e 5px,
#ffa89e 10px
);
height: 45px;
width: 15px;
position: absolute;
margin: auto;
left: 0;
right: 0;
bottom: 0;
animation: rise-3 1s 4s forwards;
}
@keyframes rise-3 {
100% {
bottom: 202px;
}
}
.candle:after {
content: "";
position: absolute;
height: 16px;
width: 16px;
background-color: #ffee54;
border-radius: 0 50% 50% 50%;
transform: scale(0) rotate(45deg);
bottom: 50px;
left: -0.5px;
animation: flame 1.5s 5s forwards;
}
@keyframes flame {
100% {
transform: scale(1) rotate(45deg);
}
}
That’s it for this tutorial. If you face any issues while creating this code, you can download the source code by clicking on the ‘Download Code’ button below. Also, if you have any queries, suggestions or feedback comment below.
Happy Coding!
