DevPlatform
Home
Components
Search
Submit
Earn
Login
Sign Up Free
Drone Animation - Preview | DevPlatform
DevPlatform
Categories
Accordion
Animation
Box Shadow
Button
Card
Footer
Form
Gallery
Hero Section
Inputs
Loader
Marquee
Modal
Modules
Navbar
Progress Bar
Radio Buttons
Search-Bar
Sections
Slider
Tab
Timeline
Toggle
Drone Animation
rohitwushu
Jan 12, 2026
3
0
Share
Live Preview
Refresh
Live Editor
HTML
CSS
JS
HTML
CSS
JavaScript
1
<div class="drone-wrapper"> <div class="drone-body"> <div class="light"> </div> </div> <div class="arm"> <div class="propeller"> </div> </div> <div class="arm"> <div class="propeller"> </div> </div> <div class="arm"> <div class="propeller"> </div> </div> <div class="arm"> <div class="propeller"> </div> </div> <div class="arm"> <div class="propeller"> </div> </div> <div class="arm"> <div class="propeller"> </div> </div> </div>
1
body { height: 100vh; margin: 0; background: radial-gradient(circle at center, #1e3c72, #2a5298); display: flex; justify-content: center; align-items: center; overflow: hidden; transform: scale(70%); } .drone-wrapper { position: relative; width: 300px; height: 300px; animation: float 3s ease-in-out infinite; } .drone-body { position: absolute; width: 70px; height: 150px; background: linear-gradient(to bottom, #3a3a3a, #111); top: 57%; left: 50%; border-radius: 50px; transform: translate(-50%, -50%); box-shadow: inset 0 0 20px #000, 0 8px 20px rgba(0, 0, 0, 0.6); z-index: 1; } .light { width: 14px; height: 14px; border-radius: 50%; background: red; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 10px red; animation: blink 1s infinite alternate; } @keyframes blink { 0% { opacity: 1; } 100% { opacity: 0.3; } } .arm { position: absolute; width: 90px; height: 10px; background: linear-gradient(to right, #333, #000); border-radius: 10px; transform-origin: 0% 50%; } .propeller { position: absolute; width: 60px; height: 6px; background: rgba(255, 255, 255, 0.7); border-radius: 50%; top: 2px; left: 57px; transform-origin: center; animation: spin 0.6s linear infinite; box-shadow: 0 0 8px rgba(255, 255, 255, 0.3); } .arm:nth-child(2) { transform: rotate(0deg) translateX(30px); top: 43%; left: 50%; } .arm:nth-child(3) { transform: rotate(48deg) translateX(30px); top: 40%; left: 50%; } .arm:nth-child(4) { transform: rotate(130deg) translateX(30px); top: 40%; left: 50%; } .arm:nth-child(5) { transform: rotate(180deg) translateX(30px); top: 43%; left: 50%; } .arm:nth-child(6) { transform: rotate(240deg) translateX(30px); top: 50%; left: 50%; } .arm:nth-child(7) { transform: rotate(300deg) translateX(30px); top: 50%; left: 50%; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
1
Comments
0
Want to comment?
Please
login
or
sign up
to post comments.
No comments yet
Be the first to comment on this component!
Comments 0
Want to comment?
Please login or sign up to post comments.
No comments yet
Be the first to comment on this component!