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.
Below is the HTML code for the above example :-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="container">
<h1 class='title'>Happy birthday!</h1>
<div class='cake'>
<div class='candles'></div>
</div>
</div>
</body>
</html>
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 %.
Below is the CSS Code for the above example :-
@-webkit-keyframes flames {
0% {
height: 2.2em;
-webkit-transform: rotate(0.5deg);
transform: rotate(0.5deg);
opacity: 0.8;
}
100% {
height: 2.5em;
-webkit-transform: rotate(-0.5deg);
transform: rotate(-0.5deg);
border-radius: 50% / 30%;
border-top-right-radius: 50% 60%;
border-top-left-radius: 50% 60%;
opacity: 1;
}
}
@keyframes flames {
0% {
height: 2.2em;
-webkit-transform: rotate(0.5deg);
transform: rotate(0.5deg);
opacity: 0.8;
}
100% {
height: 2.5em;
-webkit-transform: rotate(-0.5deg);
transform: rotate(-0.5deg);
border-radius: 50% / 30%;
border-top-right-radius: 50% 60%;
border-top-left-radius: 50% 60%;
opacity: 1;
}
}
@-webkit-keyframes candles {
0% {
height: 10em;
border-radius: 50% / 5%;
}
100% {
height: 2em;
border-radius: 50% / 25%;
}
}
@keyframes candles {
0% {
height: 10em;
border-radius: 50% / 5%;
}
100% {
height: 2em;
border-radius: 50% / 25%;
}
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
background: #ffe0e5;
color: #864313;
font-size: 12px;
}
.title {
text-align: center;
font-size: 3em;
}
.cake {
height: 30em;
width: 30em;
margin: 10em auto 0;
position: relative;
border-radius: 100% / 50%;
background: #7b3d11;
border-bottom: 0.25em solid #2d1606;
}
.cake::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 15em;
border-radius: 50%;
background: #7b3d79;
border-bottom: 0.5em solid #221105;
z-index: 10;
}
.cake::after {
content: '';
position: absolute;
top: 5em;
left: 0;
right: 0;
bottom: 0;
height: 15em;
border-radius: 50%;
border-top-right-radius: 25%;
border-top-left-radius: 25%;
background: #86437f;
box-shadow: 0 5em 0 #fff, 0 10em 0 #86437e;;
}
.candles {
z-index: 20;
position: absolute;
padding: 0;
margin: 0;
height: 10em;
width: 2.5em;
position: absolute;
bottom: 22.5em;
left: 0;
right: 0;
margin: 0 auto;
border-radius: 50% / 5%;
-webkit-animation: candles 10s 2s 2 alternate;
animation: candles 10s 2s 2 alternate;
background: #ffcc00;
box-shadow: -3.5em 5em 0 0 #77DD77, 3.5em 5em 0 0 #FF6961, -7em -2.5em 0 -3px #FFB347, 7em -2.5em 0 -3px #779ECB, -10.5em 2em 0 -1px #B19CD9, 10.5em 2em 0 -1px #A5D3CA;
}
.candles::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 10px;
border-radius: 50%;
background: #cca300;
box-shadow: -3.5em 5em 0 0 #4ed34e, 3.5em 5em 0 0 #ff392e, -7em -2.5em 0 -3px #ff9e14, 7em -2.5em 0 -3px #5284bd, -10.5em 2em 0 -1px #9477cb, 10.5em 2em 0 -1px #83c2b6;
}
.candles::after {
content: '';
position: absolute;
top: -2em;
right: 0;
left: 0;
margin: auto;
border-radius: 50% / 40%;
border-top-right-radius: 50% 60%;
border-top-left-radius: 50% 60%;
background: #E29822;
height: 2.5em;
width: 1.5em;
-webkit-animation: flames 0.75s infinite alternate;
animation: flames 0.75s infinite alternate;
box-shadow: 0 0 0 1px #e8ad4f, -3.5em 5em 1px 0 #E29822, 3.5em 5em 1px 0 #E29822, -7em -2.5em 1px 0 #E29822, 7em -2.5em 1px 0 #E29822, -10.5em 2em 1px 0 #E29822, 10.5em 2em 1px 0 #E29822;
}
Conclusion :-
Hence, An Animated Birthday Cake has been created using CSS3 properties.
Note:- The above code will run over all modern browsers such as on Firefox 7.0.1, Chrome 15.0, Internet Explorer 9.0 , Safari 5.1.1.
0 Comment(s)