Working Fan using only HTML CSS

CSS animation is a web design technique that can be used to create many interesting effects. With the help of this technique, many types of animations from simple to complex can be created. Today we created a working CSS fan animation snippet with only HTML and CSS. Since there is no need for external plugins or other scripting languages, a basic understanding of HTML and CSS is sufficient to create the project. The video tutorial below walks you through the process of creating this snippet from start to finish.

Video Tutorial:

Hope you have watched the video tutorial on 'Working Fan Using Only HTML CSS'. CSS animations change the properties of website elements at a specific point in the animation sequence. Some of these properties are position, size, color, opacity, rotation, etc. CSS animations are very popular among web designers due to their simplicity and ease of use. Designers can create amazing animations using the familiar syntax of CSS.

Our snippet today features a basic fan design. It has three blades. Each blade is given 200px width and 100px height. The CSS transform property is used to arrange the blades around the sphere in a similar fashion to a table fan. Below the fan is a checkbox that can be clicked to turn the fan on and off. A property animation-play-state of CSS animation is mainly used to give it on and off effects. The CSS transform rotate property is used on the keyframe to rotate the fan blades.

You May Also Like:

Working Fan using only HTML CSS [ Source Code ]:

To create this working fan CSS animation snippet, it's essential to generate both HTML and CSS files. You need to copy the code from the code boxes below. Paste the code into your files. Next, save the code and test it in your browser. If you encounter any issues, you can download the code from the download button below.

ADD HTML:

<html lang="en">
  <!-- divinectorweb.com -->
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Working Fan using HTML CSS</title>
    <link rel="stylesheet" href="style.css"> 
</head>
  <body>

    <input type="checkbox" id="toggle-fan"> 
    <div class="fan">
      <div class="blade"></div>
      <div class="blade"></div>
      <div class="blade"></div>
    </div>

    
  </body>
 </html>

ADD CSS:

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body {
	background: blueviolet; 
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
}
.fan {
	position: relative;
	width: 150px;
	height: 150px;
	border-radius: 50%;
	background: #ddd;
	display: flex;
	justify-content: center;
	align-items: center;
	transform-style: preserve-3d;
}
.fan:after {
	content: '';
	position: absolute;
	width: 100px;
	height: 100px;
	background: #fff;
	border-radius: 50%;
	border: 15px double blueviolet;
	box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}
.blade {
	position: absolute;
	width: 200px;
	height: 100px;
	background: #fff;
	border-radius: 50px;
	transform-origin: 50% 50%;
	box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}
.blade:nth-child(1) {
	transform: rotate(0deg) translate(150px) rotate(0deg);
}
.blade:nth-child(2) {
	transform: rotate(120deg) translate(150px) rotate(0deg);
}
.blade:nth-child(3) {
	transform: rotate(240deg) translate(150px) rotate(0deg);
}
input[type="checkbox"] {
	position: absolute;
	bottom: 50px;
	width: 40px;
	height: 40px;
}
input[type="checkbox"]+.fan {
	animation-play-state: running;
}
input[type="checkbox"]:checked+.fan {
	animation-play-state: paused;
}
@keyframes spin {
	100% {
		transform: rotate(360deg);
	}
}

We hope the source code is working for you. CSS animation is a wonderful tool that allows designers to create visually captivating effects. It also ensures accessibility and optimal performance. You can also experiment with various CSS techniques to generate additional snippets similar to this one. To access additional source code, you can visit our homepage and click the "Load More" button. Thank you for visiting our website. We hope that you will come back again soon.

DOWNLOAD CODE

Video Tutorial:

Working Fan using only HTML CSS [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Working Fan using only HTML CSS

Video Tutorial:

Working Fan using only HTML CSS [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form