Drone | Learning Axis

HTML

CSS

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