Designing a Working Table Fan using HTML and CSS
Last Updated :
24 May, 2023
In this article, we will design a Working Table-fan using HTML and CSS.
List of HTML tags used:
- Polyline: The <polyline> element is used to create the HTML <svg> element which is a container for SVG graphics any shape that consists of only straight lines
- div: The <div> tag defines a division or a section in an HTML document.
- svg: The HTML <svg> element is a container for SVG graphics
- circle: The HTML <circle> element is used to create circle
- style: The HTML <style> element is used to provide internal CSS.
Example: Here is the implementation of the above method.
HTML
<!DOCTYPE html>
< html >
< head >
< style >
.blade_container {
width: 180px;
height: 180px;
margin: auto;
margin-top: 50px;
animation: blade 1s linear infinite;
}
@keyframes blade {
0% {
transform: rotate(360deg);
}
}
.rode {
width: 15px;
height: 150px;
background-color: black;
margin: auto;
margin-top: 0px;
}
.main_container {
background-color: #308D46;
border-radius: 50%;
height: 180px;
width: 180px;
margin: auto;
}
</ style >
</ head >
< body >
< center >
< h3 style = "color:green" >Its Geek Time</ h3 >
< div class = "main_container" >
< div class = "blade_container" >
< svg width = "100%" height = "100%" >
< polyline style="stroke-linejoin:miter;
stroke:white; stroke-width:12;
fill:white;" points=
"90 90, 0 90, 90 90,
90 0,90 90,180 90,
90 90,90 180,90 90,
27 27,90 90,
153 27,90 90,
27 153,
90 90,
153 153" />
</ svg >
</ div >
</ div >
< img src =
style = "z-index:-1;" >
</ center >
</ body >
</ html >
|
Output:
Share your thoughts in the comments
Please Login to comment...