Hello, readers In today's blog I have tried to make An Animated Birthday Cake using animation, transform, keyframe and box-shadow properties of CSS3.
In this example, Firstly I have created a div with the class name as cake for creating the image of a cake within this div I have created an another div with the class name as candles basically for displaying the candles over the cake.
In the CSS code where actually the work starts , Now for creating a rounded cake we will set the position to relative and need to set the border-radius, adjusting the height and width and had created a small border-bottom with a minimum thickness. I have also used pseudo-elements i.e before and after for creating it.
Now for creating the front side circle of the cake , I have set the background color , border-bottom , border-radius and adjusted the height , position and z-index this all was styled in the cake:before element code.
Now next below the front part , To create the first layer for I need to set the background-color, the border-radius , border-top-right and left radius to 25%. I have used box-shadow property for displaying the above layer by giving two colors to it and make its position to absolute. All the above code was written under cake:after pseudo-element.
Now , I started to create candles which was needed to be placed above the front part of the cake . For creating the candle , firstly I have make a div with the class name as candle and had provided some style to it. As I have also added a feature of animation to it as there would be glowing candles and would melt after some seconds and would again regain its original form .
Now to create different colors of candles I used box-shadow property of CSS3 for styling it and have set the background-color to the candles and the border-radius. I have also added the z-index , required width and sets its position to absolute.
For creating the flames and giving style to the candles , I made the use of pseudo-elements i.e before and after . For making the above circle image of the candle I have set the border-radius , provided the background to the center candle . I used the box-shadow property for making the above circle of the remaining candles and made its position to absolute.
Now for creating the animated flames over the candles I had provided an animation-duration and the iteration count . I need to set the background color of the flames and the border-radius with box-shadow property for displaying the shape of a flame . I need to make its position to absolute and adjusted its height and width as required.
I have also used the keyframe a CSS3 property for creating candles and flame and provided transform rotate property to it at 0 and 100 %.