Frontend Forever

Windmill 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 Windmill 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.

Today, I'm only going to use HTML and CSS to make this windmill animation.

Windmill History

One of the major pieces of technology that allowed our forefathers to convert the strength of the wind into a physical force that can be utilized for a variety of tasks, from the most common ones like moving water and grinding grains to the many more industrial and agricultural requirements, are windmills.

3700 years ago, in the second millennium BC, the Babylonian king Hammurabi is said to have revealed his plans to harness the power of the wind by utilizing an automated network of irrigation windmills to supply water to his land.

The building of windmills, which were primarily used to create wind pumps, was a skill that immigrants who immigrated to North America brought with them. In 1930, when wind pump mills were at their most prevalent, the US was home to over 600,000. Many of them are still in use today, mainly in isolated areas with poor water distribution systems.

Due to a resurgence in environmental awareness in the 1990s and 2000s, the federal government of the United States created incentives for the use of renewable energy sources. In addition to offering tax breaks and investment incentives for wind generating projects, the federal government-funded research, and development to assist bring down the price of wind turbines.

STEPS TO CREATE :

Name the new file windmill.html when creating it.
Download the backdrop photos from the area below.
Divide a container class, then add all of its children.
Place all parent classes as fans, stands, and circles.
Give all the classes some styles.
Place everything in the center.
Make three copies of it to represent the three windmills.
Start coding after watching my tutorial.
The windmill animation must now be completed.
I hope this tutorial was informative for you.

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: 1350px;
	height: 400px;
}
body{
	position: absolute;
	width: 100%;
	height: 100vh;
	background: url(https://www.frontendforever.com/uploads/assets/bg1.jpg);
	background-size: cover;
}
.stand{
	position: absolute;
	width: 4%;
	height: 55%;
	background: linear-gradient(90deg,#ffffff,#6c6666);
	box-shadow:inset -10px -10px 5px gray,inset 5px 5px 10px gray; 
  	left: 630px;
	bottom: 0%;
	border-bottom: 3px solid rgba(0,250,0,0.2);
}		
.fan{
	position: relative;
	width: 80px;
	height: 80px;
	background:radial-gradient(#20BDFF,#5433FF);
	margin-left: 618px;
	margin-top: 20%;
	border: 1px solid black;
	border-radius: 50%; 
	animation: rotate 15s linear infinite;
}
@keyframes rotate{
	from{

}
	to{
		transform: rotateZ(360deg);
	}
}
.fan span{
	background: linear-gradient(90deg,skyblue,grey);
	width: 50%;
	height: 300px;
	border-radius: 50% 50% 0px 0px;
}
.fan span:nth-child(1){
	position: absolute;
	left: -120px;
	top: -30px;
	transform: rotateZ(-120deg);
}
.fan span:nth-child(2){
	position: absolute;
	left: 160px;
	top: -30px;
	transform: rotateZ(120deg);
}
.fan span:nth-child(3){
	position: absolute;
	left: 20px;
	top: -270px;
	transform: rotateZ(360deg);
}
.circle{
	width: 50px;
	height: 50px;
	background: radial-gradient(gray,white);
	border-radius: 50%;
	position: absolute;
	border: 1px solid gray;
	left: 634px;
	top: 285px;
}
/*----------------------------------------*/
.stand1{
	position: absolute;
	width: 3%;
	height: 35%;
	background: linear-gradient(90deg,#ffffff,#6c6666);
	box-shadow: inset -3px -3px 5px gray,inset 5px 5px 10px gray;
	left: 155px;
	bottom: 0%;
	border-bottom: 3px solid rgba(0,250,0,0.2);
}
.fan1{
	position: relative;
	width: 60px;
	height: 60px;
	background:radial-gradient(#20BDFF,#5433FF);
	border: 1px solid black;
	margin-left: 145px;
	margin-top: 4%;
	border-radius: 50%; 
	animation: rotate 15s linear infinite;
}
.fan1 span{
	background: linear-gradient(90deg,skyblue,gray);
	width: 40%;
	height: 150px;
	border-radius: 50% 50% 0px 0px;
}
.fan1 span:nth-child(1){
	position: absolute;
	left: -50px;
	top: -5px;
	transform: rotateZ(-120deg);
}
.fan1 span:nth-child(2){
	position: absolute;
	left: 90px;
	top: -5px;
	transform: rotateZ(120deg);
}
.fan1 span:nth-child(3){
	position: absolute;
	left: 20px;
	top: -130px;
	transform: rotateZ(360deg);
}
.circle1{
	width: 40px;
	height: 40px;
	background: radial-gradient(gray,white);
	border-radius: 50%;
	position: absolute;
	border: 1px solid gray;
	left: 155px;
	bottom: 200px;
}
/*---------------------------------------------*/
.stand2{
	position: absolute;
	width: 3%;
	height: 35%;
	background: linear-gradient(90deg,#ffffff,#6c6666);
	box-shadow: inset -3px -3px 5px gray,inset 5px 5px 10px gray;
	right: 160px;
	bottom: 0%;
	border-bottom: 3px solid rgba(0,250,0,0.2);
}
.fan2{
	position: relative;
	width: 60px;
	height: 60px;
	background:radial-gradient(#20BDFF,#5433FF);
	border: 1px solid black;
	margin-left: 1140px;
	margin-top: -4%;
	border-radius: 50%; 
	animation: rotate 15s linear infinite;
}
.fan2 span{
	background: linear-gradient(90deg,skyblue,gray);
	width: 40%;
	height: 150px;
	border-radius: 50% 50% 0px 0px;
}
.fan2 span:nth-child(1){
	position: absolute;
	right:80px;
	top: -5px;
	transform: rotateZ(-120deg);
}
.fan2 span:nth-child(2){
	position: absolute;
	right: -50px;
	top: -5px;
	transform: rotateZ(120deg);
}
.fan2 span:nth-child(3){
	position: absolute;
	right: 20px;
	top: -130px;
	transform: rotateZ(360deg);
}
.circle2{
	width: 40px;
	height: 40px;
	background: radial-gradient(gray,white);
	border: 1px solid gray;
	border-radius: 50%;
	position: absolute;
	right: 156px;
	bottom: 192px;
}

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

Windmill Animation

About this Code

Windmill History

Images

Youtube Tutorial Video

Source Code

Leave a Comment

You need to login first to comment.

About Us

Frontend Forever