Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Designing a Working Table fan using CSS?
CSS is a stylesheet language used to style HTML elements and create visually appealing websites. With CSS animations and transformations, we can create interactive elements like a working table fan that rotates continuously.
In this article, we will create a working table fan using HTML and CSS. We'll use SVG elements to draw the fan blades and CSS animations to make them rotate.
Syntax
@keyframes animation-name {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.element {
animation: animation-name duration timing-function iteration-count;
}
HTML SVG Graphics
SVG (Scalable Vector Graphics) is used to create vectorbased graphics in HTML. The key SVG elements we'll use are
<svg> Container element for SVG graphics
<circle> Creates circular shapes with attributes like cx, cy, r, fill, and stroke
<polyline> Creates shapes made of straight lines using points coordinates
SVG Circle Syntax
<svg> <circle cx="value" cy="value" r="value" stroke="color" fill="color" /> </svg>
SVG Polyline Syntax
<polyline points="x1,y1 x2,y2 x3,y3" stroke="color" fill="color" />
Example: Working Table Fan
The following example demonstrates how to create a working table fan using HTML and CSS
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align: center;
text-decoration: underline;
color: #2c5530;
margin-bottom: 30px;
}
.fan-container {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 50px;
}
.blade-container {
width: 180px;
height: 180px;
animation: rotate 0.1s linear infinite;
margin-bottom: 10px;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.stick {
width: 20px;
height: 120px;
background: linear-gradient(to bottom, #8b4513, #654321);
margin-bottom: 10px;
border-radius: 10px;
}
.base {
width: 120px;
height: 25px;
background: linear-gradient(to bottom, #8b4513, #654321);
border-radius: 12px;
box-shadow: 0 3px 6px rgba(0,0,0,0.3);
}
</style>
</head>
<body>
<h1>Working Table Fan</h1>
<div class="fan-container">
<div class="blade-container">
<svg width="100%" height="100%" viewBox="0 0 180 180">
<!-- Fan blades -->
<polyline points="90,90 20,90 90,90 90,20 90,90 160,90 90,90 90,160"
stroke="#654321"
stroke-width="12"
stroke-linecap="round" />
<polyline points="90,90 35,35 90,90 145,35 90,90 35,145 90,90 145,145"
stroke="#654321"
stroke-width="12"
stroke-linecap="round" />
<!-- Center hub -->
<circle cx="90" cy="90" r="20" fill="#8b4513" stroke="#654321" stroke-width="3" />
</svg>
</div>
<div class="stick"></div>
<div class="base"></div>
</div>
</body>
</html>
A working table fan appears with rotating blades. The fan has brown-colored blades that spin continuously, connected to a cylindrical stand with a circular base. The animation creates a realistic spinning effect.
Key Animation Properties
| Property | Description |
|---|---|
@keyframes |
Defines the animation sequence |
animation |
Shorthand for all animation properties |
transform: rotate() |
Rotates the element by specified degrees |
animation-duration |
Sets how long the animation takes |
Conclusion
Creating a working table fan with CSS demonstrates the power of CSS animations and SVG graphics. By combining keyframe animations with transform properties, we can create realistic rotating effects for interactive web elements.
534 Views
