Frontend Forever

Candle Animation

About this Code

Hello reader, I am frontendforever. Nice to meet you again in this free code sharing website. In this post I am going to explain about Candle Animation. If you are new to this website, we recommend you to subscribe to our youtube channel and watch the videos. Ok lets dive into the code.

History of candles

There is proof that the first candles were created in China during the Qin Dynasty, roughly 200 years B.C., using whale fat. Around the same time, wax leftover from boiling cinnamon was used to make them in India.

Wick also got better. It was produced from paper, flax, hemp, and cotton with varying burning times and the requirement to trim the wicks to the braided cotton. The wicks were also chemically infused to control the burning pace and they coil while they burn, requiring trimming itself.

Candles are still used today as decorative things and as a light source in emergencies, despite not being a large source of illumination. They are used as decorations and for events (birthdays, religious ceremonies), to set the mood (dinners and other gatherings; plain, colored, and scented).

Images

These are the output images of the code. You can click on the image to enlarge it. also you can click the try it button to see the output.

Youtube Tutorial Video

If you are a visual learner and want to learn how to use this code, you can watch the video below.
and also this video contains the clear step by step explanation and the output of the code.

Source Code

This is the source code of the code. You can copy and paste the code to your editor.

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
.container{
	width: 100%;
	height: 100vh;
	background: black;
}
.candle{
	position: absolute;
	width: 100px;
	height: 330px;
	background: linear-gradient(orange,darkorange,sienna,saddlebrown,rgba(0,0,0,0.4) 90%);
	bottom: 2%;
	left: 45%;
}
.candle:before{
	content: '';
	position: absolute;
}
.candle:after{
	content: '';
	position: absolute;
	top: -25px;
	height: 50px;
	width: 100%;
	border-radius: 50%;
	background: radial-gradient(sienna,orange,darkorange,saddlebrown);
	transform: rotateX(60deg);
	box-shadow: inset 3px 3px 5px rgba(0,0,0,0.2),
				inset -3px -3px 5px rgba(0,0,0,0.2);
}
.thread{
	width: 5px;
	height: 35px;
	position: absolute;
	top: -35px;
	left: 45px;
	background: linear-gradient(blue 2%,black 80%,orange 99%);
	border-radius: 50% 50% 20% 20%;
	z-index: 10;
}
.fire{
	position: absolute;
	width: 25px;
	height: 100px;
	background: linear-gradient(white 50%,orange,blue);
	border-radius: 50% 50% 30% 30%;
	box-shadow: 70px -50px 100px orangered,-70px -50px 100px orangered;
	top: -120px;
	left: 35px;
	animation: move 1s linear infinite,rotate 2s linear infinite;
}
@keyframes move{
	0%{
		transform: rotateZ(1deg);
	}
	100%{
		transform: rotateZ(-1deg);
	}
}
@keyframes rotate{
	0%{
		top: -119px;
		left: 34px;
	}
	100%{
		top: -121px;
		left: 36px;
	}
}

And also you can click the try it button to see the output of the code in our web Code Playground.
You can also download the code to the zip format by clicking the download button. The download process is little bit complex, you need ti await for 10 seconds. after that you can download the code by clicking the generated download link.

Download

Try It

Frontend Forever

Candle Animation

About this Code

Images

Youtube Tutorial Video

Source Code

Leave a Comment

You need to login first to comment.

About Us

Frontend Forever