How to create Candle Animation using CSS ?
To create Candle animation, we take the basic approach of Pure CSS., Here we are using some animation techniques like move and rotate to create the Candle more effectively.
Approach: First we create a container class. In container class, we create another class named candle-body and in this class, we create another two class candle-stick and candle-flames. In the candle-body selector, we set the height and width of the candle body. To add the stick in the candle body, we use some CSS properties in the candle-stick selector after that we add candle flames we add some animation in the candle-flames selector like move and rotate. We are describing some properties and selectors which we have used in the CSS file:
- background: It is used to add background effects for elements.
- border-radius: It defines the radius of the element’s corners.
- animation: The animation is created by gradually changing from one set of CSS styles to another.
- @keyframes: The @keyframes rules specifies the animation code.
- gradient: It provides the smooth transitions between two or more specified colors.
- z-index: z-index sets the z-order of a positioned element.
- box-shadow:- box-shadow attaches one or more shadows to an element.
- transform: It applies a 2D or 3D transformation to an element. It allows you to rotate, move, skew, etc., elements.
Below is the implementation of the above approach.
HTML
<!DOCTYPE html><html> <head> <title>Candle Animation using CSS</title> <!--CSS File--> <style type="text/css"> .container { height: 100vh; width: 100vw; align-items: center; justify-content: center; background: rgb(26, 25, 25); animation: change-background 3s infinite linear; } .candle-body { position: absolute; width: 100px; height: 350px; background: linear-gradient( rgb(209, 158, 64), rgb(165, 96, 11), rgb(241, 85, 12), rgb(109, 47, 3) 50%, rgba(0, 0, 0, 0.6) ); bottom: 1%; left: 50% } .candle-body:before { content: ""; position: absolute; } .candle-body:after { content: ""; position: absolute; top: -25px; height: 50px; width: 100px; border-radius: 50px; background: radial-gradient( rgb(226, 95, 34), rgb(168, 117, 23), rgb(255, 149, 18), rgb(112, 49, 3) ); transform: rotateX(55deg); box-shadow: insert 2px 3px 4px rgba(0, 0, 0, 0.2), insert -2px -3px 4px rgba(0, 0, 0, 0.2); } .candle-stick { width: 7px; height: 40px; position: absolute; top: -40px; left: 50px; background: linear-gradient( rgb(7, 7, 204) 2%, rgb(15, 0, 0) 80%, rgb(248, 165, 11) 99% ); border-radius: 50% 50% 20% 20%; z-index: 10; } .candle-flames { position: absolute; background: linear-gradient( rgb(224, 216, 216) 50%, rgb(233, 157, 17), rgb(12, 12, 226) ); border-radius: 50% 50% 30% 30%; width: 30px; height: 100px; top: -120px; left: 35px; animation: move 1s linear infinite, rotate 2s linear infinite; box-shadow: 70px -50px 100px rgb(228, 70, 13), -70px -50px 100px rgb(180, 52, 6); } @keyframes move { 0% { transform: rotateZ(1deg); } 100% { transform: rotateZ(-1deg); } } @keyframes rotate { 0% { top: -120px; left: 40px; } 100% { top: -120px; left: 40px; } } @keyframes change-background { 0%, 60%, 98%, 100% { background: rgb(3, 52, 65); } 61%, 97% { background: #000; } } </style></head> <body> <div class="container"> <div class="candle-body"> <div class="candle-stick"></div> <div class="candle-flames"></div> </div> </div></body> </html> |
Output:
.png)