In this article, we will create a Bonfire Animation effect using CSS.
Approach:
- Create wood logs: We can use the clip-path property and clip a polygon and apply some rotation such that it looks like one of its end is inside fire.
- Create flames: For flames, we are going to create 5 flames i.e. Red, Orange, Yellow, blue, and black. These flames can be easily created using border-radius property.
- Flickering effect: Keyframes property is used to create a flicker animation. To achieve this effect, we can rotate the flames left and right and at the same time scale it.
- Create a glowing effect: This is just a div converted into a circle using the border-radius property.
Example: In this example, we are using the above-explained approach.
HTML
<!DOCTYPE html> < html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< link rel = "stylesheet" href = "styles.css" >
</ head >
< body >
< div class = "logs_container" >
< div class = "log log_1" ></ div >
< div class = "log log_3" ></ div >
< div class = "log log_2" ></ div >
< div class = "log_circle log_circle_1" ></ div >
< div class = "log_circle log_circle_2" ></ div >
< div class = "log_circle log_circle_3" ></ div >
</ div >
< div class = "glowing_circle" ></ div >
< div class = "flame_container" >
< div class = "flame_red flame" ></ div >
< div class = "flame_orange flame" ></ div >
< div class = "flame_yellow flame" ></ div >
< div class = "flame_blue circle" ></ div >
< div class = "flame_black circle" ></ div >
</ div >
</ body >
</ html >
|
CSS Code: The following is the content for “styles.css” file used in the above code.
CSS
* { margin : 0 ;
padding : 0 ;
} body { background : #522e2a ;
} .glowing_circle { height : 250px ;
width : 250px ;
position : fixed ;
top : 44% ;
left : 52% ;
transform: translate( -50% , -50% );
background : #5c3631 ;
border-radius: 1000px ;
} .log { height : 60px ;
width : 30px ;
position : fixed ;
top : 63.25 vh;
background-color : #725442 ;
clip-path: polygon( 30% 0% , 70% 0% ,
100% 100% , 0% 100% );
} .log_ 1 {
left : 49.25 vw;
transform: rotate( 45 deg);
} .log_ 2 {
top : 64 vh;
left : 51.25 vw;
} .log_ 3 {
left : 53.25 vw;
transform: rotate( -45 deg);
} .log_circle { background-color : #91725c ;
position : fixed ;
} .log_circle_ 1 {
height : 35px ;
width : 32px ;
border-radius: 40px ;
top : 68.75 vh;
left : 47.5 vw;
} .log_circle_ 2 {
height : 37px ;
width : 37px ;
border-radius: 100px ;
top : 71 vh;
left : 50.9 vw;
} .log_circle_ 3 {
height : 35px ;
width : 32px ;
border-radius: 40px ;
top : 68.75 vh;
left : 55 vw;
} .flame_container { position : fixed ;
top : 50 vh;
left : 50 vw;
transform: translate( -50% , -50% );
width : 60px ;
height : 60px ;
animation: flame_flickering 3 ms 200 ms
ease-in infinite alternate;
} .flame { bottom : 0 ;
position : absolute ;
border-radius: 50% 0 50% 50% ;
transform: rotate( -45 deg) scale( 1.5 , 1.5 );
} .flame_yellow { left : 15px ;
width : 30px ;
height : 20px ;
background : gold;
box-shadow: 0px 0px 9px 4px gold;
} .flame_orange { left : 10px ;
width : 40px ;
height : 40px ;
background : orange;
box-shadow: 0px 0px 9px 4px orange;
} .flame_red { left : 5px ;
width : 50px ;
height : 60px ;
background : OrangeRed;
box-shadow: 0px 0px 5px 4px OrangeRed;
} . circle {
border-radius: 50% ;
position : absolute ;
} .flame_blue { width : 10px ;
height : 10px ;
left : 25px ;
bottom : -25px ;
background : SlateBlue;
box-shadow: 0px 0px 15px 10px SlateBlue;
} .flame_black { width : 11px ;
height : 11px ;
left : 25px ;
bottom : -40px ;
background : black ;
box-shadow: 0px 0px 15px 10px black ;
} @keyframes flame_flickering { 0% {
transform: rotate( -1 deg);
}
15% {
transform: rotate( 1 deg) scaleY( 0.95 );
}
30% {
transform: rotate( -1 deg) scaleY( 0.9 );
}
45% {
transform: rotate( 1 deg) scaleY( 0.95 );
}
60% {
transform: rotate( -1 deg) scaleY( 1 );
}
75% {
transform: rotate( 1 deg) scaleY( 1.05 );
}
90% {
transform: rotate( -1 deg) scaleY( 1 );
}
100% {
transform: rotate( 1 deg);
}
} |
Output: