Ever built a fan with no JavaScript? 🌀 Just pure CSS magic. This 5-minute trick will blow your mind (pun intended).
🎯 Why This Project?
This is a fun and simple project to practice CSS animations. You’ll build a working fan that spins endlessly using @keyframes. It’s great for beginners learning frontend development or anyone looking to create engaging UI effects with just HTML and CSS.
🔧 What You’ll Learn
CSS @keyframes animation
Transform and rotation techniques
Structuring shapes using div elements
How to make your animations smooth and responsive
📦 Live Demo + Source Code
👉 YouTube Tutorial:
🧠 How It Works
The fan blades are created using styled divs positioned and rotated.
The .fan container is rotated using the @keyframes spin animation.
CSS transform: rotate() and transform-origin create the spinning effect.
It’s fully done in CSS — no JavaScript is used!
📌 Why It’s Useful
Great practice for CSS animation fundamentals
Can be reused in UI themes (e.g., weather apps, cooling indicators, loaders)
Looks cool in your frontend portfolio 😎
💡 Bonus Ideas
Add on/off switch using JavaScript
Add a speed controller using input range
Make it responsive or themed for dark/light mode
🙌 Wrap Up
This mini-project is a perfect example of how powerful CSS alone can be. Try tweaking the animation speed or adding more blades!
If this made you smile or taught you something, drop a ❤️ and share it with a frontend friend!
🔗 Stay Connected
⭐ GitHub | 📺 YouTube WhatsApp
🏷️ Tags:
Top comments (0)