Bonfire Animation Effect using CSS
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.25vh; background-color: #725442; clip-path: polygon(30% 0%, 70% 0%, 100% 100%, 0% 100%);}.log_1 { left: 49.25vw; transform: rotate(45deg);}.log_2 { top: 64vh; left: 51.25vw;}.log_3 { left: 53.25vw; transform: rotate(-45deg);}.log_circle { background-color: #91725c; position: fixed;}.log_circle_1 { height: 35px; width: 32px; border-radius: 40px; top: 68.75vh; left: 47.5vw;}.log_circle_2 { height: 37px; width: 37px; border-radius: 100px; top: 71vh; left: 50.9vw;}.log_circle_3 { height: 35px; width: 32px; border-radius: 40px; top: 68.75vh; left: 55vw;}.flame_container { position: fixed; top: 50vh; left: 50vw; transform: translate(-50%, -50%); width: 60px; height: 60px; animation: flame_flickering 3ms 200ms ease-in infinite alternate;}.flame { bottom: 0; position: absolute; border-radius: 50% 0 50% 50%; transform: rotate(-45deg) 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(-1deg); } 15% { transform: rotate(1deg) scaleY(0.95); } 30% { transform: rotate(-1deg) scaleY(0.9); } 45% { transform: rotate(1deg) scaleY(0.95); } 60% { transform: rotate(-1deg) scaleY(1); } 75% { transform: rotate(1deg) scaleY(1.05); } 90% { transform: rotate(-1deg) scaleY(1); } 100% { transform: rotate(1deg); }} |
Output:
Bonfire Animation
Please Login to comment...