How to make a beautiful Stand Fan Using CSS Only | CSS Animation.

CodewithNizami February 5, 2022

0 1 5 minutes read

Dear friends in this articles we learn about How to make a beautiful Stand Fan Using CSS Only | CSS Animation. If you like our article then visit more.

Table of Contents

CSS Creative

After this, you have to open the code editor and save it by selecting a new file and remember that while saving the file, you must write dot html because the browser has to explain it from html itself, without html we can not run any language That’s why it is very important for us to come to html for make a stand fan with css animation.

CSS Animation

Now you have to do coding, your file has also been created, now time has come to do your coding, so before starting coding, you must know about html css because whatever code we will write, it is in html and css only. That’s why these languages are very important to you, so let’s start coding now and make a stand fan using css animation.

Press ctrl + 1 and see the shortcut feature of Visual Studio Code in front of you, using which makes our work easy and very quick, when you do ctrl + 1, then the complete syntax of html will open in front of you, using which we create a website We can create web applications, all the code that is written is written inside it, so it is very important for us to learn html if we want to become a web developer, then well then we know how login form design from further coding do.

Dear friends, in this article we will tell you how to make a stand fan using html and css and how to give animation together. So let’s know how to make a fan. First of all you should have knowledge of html and css because if you don’t understand then what is the use of seeing code, so I would advise you to first learn html and css, after that you can read this article and use our given source code on your own. Can add to the project. If you want to learn html and css well. So you can learn by going to w3school, there you will also get the option of running, so that you can easily run the code after reading and see, so I will recommend you to w3school itself.

HTML for make Fan

Now open your vs code editor and go to the right top section and click on file and select new file then save filename.html after this press ctrl+1 then html syntax generate automatically on your editor. This feature inbuild only visual code editor so i suggested you download this editor and make projects easily because it is a best code editor software. And this design for stand fan project make a fast with visual studio code editor.

Now we will learn how to write html for stand fan. So let’s know that first you have to go to the body tag, after that you will take the div tag and together with the class whose name is to be named motor. Then after that we will take div tag again and we will name its class as stand. Again we will take div tag and name its class as bottom stand after that we will take div tag again and we will name its class as petal1. Again we will take div tag and name its class as Pankhdi 2, then again take div tag and name its class as Pankdi 3. Now in the last we will take the div tag and name its class as center.

CSS for Fan Design

Now we will design the stand fan using css. So let’s design, first of all you have to know how we write css. We write css in 3 ways first we can write inline and second we can write it internal and third we can write it external so that we have to create new css file but in this article we have used internal css so that We will not have to create css file separately and we can work inside the same file.

First of all we have to go inside the head section and going inside we have to take style tag then we will take * tag and by applying curly braces open and close in it we will keep margin as 0 and padding as 0. And will keep its box sizing border box. Then we will take the body tag and flex the display in it, then we will center the justify content, after that we will center the align items and also make the background color rgb.

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: rgb(22, 22, 22);
}

Now we will take motor class and make the position absolute in it after that we will keep the width as 70px from the top and the width as 70px after that we will make the border 50% radius then we will take background color rgb in it after that we will box it Will give shadow Then we will take stand class and in that we will put margin 86px from top after that we will take width 20px and then we will take height 250px and then last we will take box shadow inset.

.motor{
position: absolute;
top: 30%;
width: 70px;
height: 70px;
border-radius: 50%;
background-color: rgb(61, 65, 66);
box-shadow: 0 0 100px rgb(4, 255, 129);
,
.stand{
margin-top: 86px;
width: 20px;
height: 250px;
box-shadow: inset 0 0 10px rgb(153, 153, 153);
,

Source Code..

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fan by Code with Nizami</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: rgb(22, 22, 22);
        }
        .moter{
            position: absolute;
            top: 30%;
            width: 70px;
            height: 70px;
            border-radius: 50%;
            background-color: rgb(61, 65, 66);
            box-shadow: 0 0 100px rgb(4, 255, 129);
        }
        .stand{
            margin-top: 86px;
            width: 20px;
            height: 250px;
            box-shadow: inset 0 0 10px rgb(153, 153, 153);
        }
        .bottom-stand{
            position: absolute;
            bottom: 95px;
            left: 632px;
            width: 100px;
            height: 50px;
            border-radius: 50% 50% 0 0;
            background-color: rgb(34, 34, 34);
            box-shadow: inset 0 0 10px rgb(153, 153, 153);
        }
        .pankhdi-1{
            position: absolute;
            top: 63px;
            left: 665px;
            width: 35px;
            height: 160px;
            border-radius: 5px 5px 50% 50%;
            background-color: rgb(4, 255, 129);
            transform-origin: bottom;
            transform: rotateZ(0deg);
            animation: animate 3s linear infinite;
        }
        @keyframes animate{
            0%{
                transform: rotateZ(0deg);
            }
            30%{
                transform: rotateZ(100deg);
            }
            50%{
                transform: rotateZ(200deg);
            }
            90%{
                transform: rotateZ(300deg);
            }
            100%{
                transform: rotateZ(380deg);
            }
        }
        .pankhdi-2{
            position: absolute;
            top: 63px;
            left: 665px;
            width: 35px;
            height: 160px;
            border-radius: 5px 5px 50% 50%;
            background-color: rgb(4, 255, 129);
            transform-origin: bottom;
            transform: rotateZ(125deg);
            animation: animateTwo 3s linear infinite;
        }
        @keyframes animateTwo{
            0%{
                transform: rotateZ(125deg);
            }
            30%{
                transform: rotateZ(225deg);
            }
            50%{
                transform: rotateZ(325deg);
            }
            90%{
                transform: rotateZ(425deg);
            }
            100%{
                transform: rotateZ(605deg);
            }
        }
        .pankhdi-3{
            position: absolute;
            top: 63px;
            left: 665px;
            width: 35px;
            height: 160px;
            border-radius: 5px 5px 50% 50%;
            background-color: rgb(4, 255, 129);
            transform-origin: bottom;
            transform: rotateZ(235deg);
            animation: animateThree 3s linear infinite;
        }
        @keyframes animateThree{
            0%{
                transform: rotateZ(235deg);
            }
            30%{
                transform: rotateZ(335deg);
            }
            50%{
                transform: rotateZ(435deg);
            }
            90%{
                transform: rotateZ(535deg);
            }
            100%{
                transform: rotateZ(715deg);
            }
        }
        .center{
            position: absolute;
            top: 203px;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgb(151, 35, 0);
        }
    </style>
</head>
<body>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
</body>
</html>