Drone Animation

rohitwushu
Jan 12, 2026 3
Live Preview

Live Editor

<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>
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);
	
}

}
Categories

Drone Animation

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
