How To Create a Fan Using Only HTML and CSS?


STEP 1:

Add <div class="fan"></div> inside the body section.

 

STEP 2:

Add an image inside the div. <img src="fan.png" alt="fan"> Download Image(Click Here)
<!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" />
         <link rel="stylesheet" href="style.css" />
         <title>Fan</title>
         </head>
         <body>
         <div class="fan">
         <img src="fan.png" alt="fan">
         </div>
         </body>
        </html>

STEP 2: 

Add this CSS Code.

.fan{
        width: 400px;
        height: 400px;
         margin:auto;
         position: relative;
         top:40px;
         border: 2px solid black;
         animation: spin 0.5s infinite linear;
        border-radius: 50%;
        padding: 50px;
        

        

        }
        img{
         width: 400px;
         height: 400px;
         position:absolute;
        

        }
        @keyframes spin {
         100%{
         transform: rotateZ(360deg);
         }
        }


Trending Posts

How To Create a Fake Facebook Login Clone Using Only HTML and CSS?

How To Create A Parallelogram Using HTML and CSS?

60hz vs 90hz vs 120hz | Which One is Best? | What is Refresh Rate?

HP, Dell, Apple, Lenovo, Asus - Which Brand Laptop Should I Buy?

How To Create A Magic 8 Ball Using HTML, CSS, and JavaScript?

12MP vs 48MP vs 64MP vs 108MP | Does More Megapixel Equal Better Image Quality?

How To Create A Trapezium Using HTML and CSS?

5 Websites To Increase Your Typing Speed

How To Create A Semi-circle Using Only HTML and CSS?

6 Useful Websites For Students