Nave alienígena

1,172 byby.createsite

Abrir en el editor Publica tu código

Recomendado

17 July 2025

Código de barras de navegación HTML SVG

12 December 2025

Ejemplo de barra de navegación HTML CSS: Menú horizontal adaptable

10 August 2025

Animación CSS de nave espacial extraterrestre con estrellas

HTML

<div class="star medium"></div>
 <div class="star medium"></div>
 <div class="star medium"></div>
 <div class="star medium"></div>
 <div class="star medium"></div>
 <div class="star medium"></div>
 <div class="star medium"></div>
 <div class="star medium"></div>
 <div class="star medium"></div>
 <div class="star medium"></div>

<div class="star large"></div>
 <div class="star large"></div>
 <div class="star large"></div>
 <div class="star large"></div>
 <div class="star large"></div>
 <div class="star large"></div>
 <div class="star large"></div>
 <div class="star large"></div>
 <div class="star large"></div>
 <div class="star large"></div>
 <div class="container">
  <div class="sphere-container">
   <div class="sphere">

</div>
  </div>
  <div class="base">
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
  </div>
 </div>

</body>

CSS

*{
 margin: 0;
 padding:0;
}
body{
 width: 100vw;
 height:100vh;
 overflow:hidden;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 background: #000;
}
/*container com a animacao desejada */
.container{
 animation: alienAnimation 15s linear forwards;
}
@keyframes alienAnimation{
 0%{
  transform: scale(0.5) translate(0,0);
 }
 20%{
  transform: scale(2) translate(0,0);
 }
 50%{
  transform:scale(2) translate(0,150px);
 }
 51%{
  transform:scale(2) translate(0,150px);
 }
 60%{
  transform:scale(2) translate(60px,120px);
 }

70%{
  transform:scale(2) translate(-60px,90px);
 }
 80%{
  transform:scale(2) translate(60px,60px);
 }

90%{
  transform:scale(2) translate(-60px,30px);
 }
 100%{
  transform:scale(2) translate(-60px,0);
 }

}
/* estrelas */
.star {
 position: absolute;
 background: white;
 border-radius: 50%;
 animation: twinkle 2s infinite alternate;
}

.star.small {
 width: 1px;
 height: 1px;
}

.star.medium {
 width: 2px;
 height: 2px;
}

.star.large {
 width: 3px;
 height: 3px;
 box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
}

@keyframes twinkle {
 0% { opacity: 0.3; }
 100% { opacity: 1; }
}

/* Estrelas pequenas */
.star:nth-child(1) { top: 15%; left: 10%; animation-delay: 0.2s; animation-duration: 2.5s; }
.star:nth-child(2) { top: 25%; left: 25%; animation-delay: 1.1s; animation-duration: 1.8s; }
.star:nth-child(3) { top: 8%; left: 40%; animation-delay: 0.7s; animation-duration: 3.2s; }
.star:nth-child(4) { top: 35%; left: 60%; animation-delay: 1.8s; animation-duration: 2.1s; }
.star:nth-child(5) { top: 55%; left: 15%; animation-delay: 0.4s; animation-duration: 2.8s; }
.star:nth-child(6) { top: 70%; left: 35%; animation-delay: 1.5s; animation-duration: 1.6s; }
.star:nth-child(7) { top: 45%; left: 80%; animation-delay: 0.9s; animation-duration: 2.4s; }
.star:nth-child(8) { top: 80%; left: 70%; animation-delay: 1.2s; animation-duration: 3.1s; }
.star:nth-child(9) { top: 20%; left: 85%; animation-delay: 0.6s; animation-duration: 1.9s; }
.star:nth-child(10) { top: 90%; left: 20%; animation-delay: 1.7s; animation-duration: 2.6s; }
.star:nth-child(11) { top: 12%; left: 65%; animation-delay: 0.3s; animation-duration: 2.2s; }
.star:nth-child(12) { top: 38%; left: 5%; animation-delay: 1.4s; animation-duration: 2.9s; }
.star:nth-child(13) { top: 62%; left: 45%; animation-delay: 0.8s; animation-duration: 1.7s; }
.star:nth-child(14) { top: 75%; left: 90%; animation-delay: 1.6s; animation-duration: 2.3s; }
.star:nth-child(15) { top: 85%; left: 50%; animation-delay: 0.5s; animation-duration: 3.0s; }
.star:nth-child(16) { top: 30%; left: 95%; animation-delay: 1.3s; animation-duration: 1.5s; }
.star:nth-child(17) { top: 5%; left: 75%; animation-delay: 0.1s; animation-duration: 2.7s; }
.star:nth-child(18) { top: 50%; left: 30%; animation-delay: 1.9s; animation-duration: 2.0s; }
.star:nth-child(19) { top: 65%; left: 8%; animation-delay: 0.7s; animation-duration: 2.5s; }
.star:nth-child(20) { top: 95%; left: 40%; animation-delay: 1.0s; animation-duration: 1.8s; }
.star:nth-child(21) { top: 18%; left: 52%; animation-delay: 0.4s; animation-duration: 2.4s; }
.star:nth-child(22) { top: 42%; left: 12%; animation-delay: 1.5s; animation-duration: 2.8s; }
.star:nth-child(23) { top: 78%; left: 62%; animation-delay: 0.9s; animation-duration: 1.6s; }
.star:nth-child(24) { top: 28%; left: 78%; animation-delay: 1.2s; animation-duration: 3.2s; }
.star:nth-child(25) { top: 52%; left: 88%; animation-delay: 0.6s; animation-duration: 2.1s; }
.star:nth-child(26) { top: 88%; left: 15%; animation-delay: 1.8s; animation-duration: 2.6s; }
.star:nth-child(27) { top: 6%; left: 92%; animation-delay: 0.3s; animation-duration: 1.9s; }
.star:nth-child(28) { top: 72%; left: 25%; animation-delay: 1.4s; animation-duration: 2.2s; }
.star:nth-child(29) { top: 48%; left: 68%; animation-delay: 0.8s; animation-duration: 2.9s; }
.star:nth-child(30) { top: 92%; left: 85%; animation-delay: 1.6s; animation-duration: 1.7s; }
.star:nth-child(31) { top: 22%; left: 32%; animation-delay: 0.5s; animation-duration: 2.3s; }
.star:nth-child(32) { top: 58%; left: 2%; animation-delay: 1.3s; animation-duration: 3.0s; }
.star:nth-child(33) { top: 82%; left: 48%; animation-delay: 0.1s; animation-duration: 1.5s; }
.star:nth-child(34) { top: 32%; left: 72%; animation-delay: 1.9s; animation-duration: 2.7s; }
.star:nth-child(35) { top: 68%; left: 92%; animation-delay: 0.7s; animation-duration: 2.0s; }
.star:nth-child(36) { top: 98%; left: 22%; animation-delay: 1.0s; animation-duration: 2.5s; }
.star:nth-child(37) { top: 14%; left: 82%; animation-delay: 0.4s; animation-duration: 1.8s; }
.star:nth-child(38) { top: 46%; left: 38%; animation-delay: 1.5s; animation-duration: 2.4s; }
.star:nth-child(39) { top: 76%; left: 58%; animation-delay: 0.9s; animation-duration: 2.8s; }
.star:nth-child(40) { top: 26%; left: 18%; animation-delay: 1.2s; animation-duration: 1.6s; }
.star:nth-child(41) { top: 54%; left: 78%; animation-delay: 0.6s; animation-duration: 3.2s; }
.star:nth-child(42) { top: 84%; left: 38%; animation-delay: 1.8s; animation-duration: 2.1s; }
.star:nth-child(43) { top: 4%; left: 58%; animation-delay: 0.3s; animation-duration: 2.6s; }
.star:nth-child(44) { top: 64%; left: 8%; animation-delay: 1.4s; animation-duration: 1.9s; }
.star:nth-child(45) { top: 36%; left: 48%; animation-delay: 0.8s; animation-duration: 2.2s; }
.star:nth-child(46) { top: 94%; left: 68%; animation-delay: 1.6s; animation-duration: 2.9s; }
.star:nth-child(47) { top: 16%; left: 28%; animation-delay: 0.5s; animation-duration: 1.7s; }
.star:nth-child(48) { top: 44%; left: 88%; animation-delay: 1.3s; animation-duration: 2.3s; }
.star:nth-child(49) { top: 74%; left: 18%; animation-delay: 0.1s; animation-duration: 3.0s; }
.star:nth-child(50) { top: 86%; left: 78%; animation-delay: 1.9s; animation-duration: 1.5s; }

/* Estrelas médias */
.star:nth-child(51) { top: 11%; left: 35%; animation-delay: 0.7s; animation-duration: 2.7s; }
.star:nth-child(52) { top: 33%; left: 55%; animation-delay: 1.0s; animation-duration: 2.0s; }
.star:nth-child(53) { top: 59%; left: 75%; animation-delay: 0.2s; animation-duration: 2.5s; }
.star:nth-child(54) { top: 77%; left: 95%; animation-delay: 1.8s; animation-duration: 1.8s; }
.star:nth-child(55) { top: 23%; left: 65%; animation-delay: 0.4s; animation-duration: 2.4s; }
.star:nth-child(56) { top: 41%; left: 25%; animation-delay: 1.5s; animation-duration: 2.8s; }
.star:nth-child(57) { top: 67%; left: 45%; animation-delay: 0.9s; animation-duration: 1.6s; }
.star:nth-child(58) { top: 89%; left: 5%; animation-delay: 1.2s; animation-duration: 3.2s; }
.star:nth-child(59) { top: 7%; left: 85%; animation-delay: 0.6s; animation-duration: 2.1s; }
.star:nth-child(60) { top: 51%; left: 15%; animation-delay: 1.8s; animation-duration: 2.6s; }

/* Estrelas grandes */
.star:nth-child(61) { top: 19%; left: 45%; animation-delay: 0.3s; animation-duration: 1.9s; }
.star:nth-child(62) { top: 37%; left: 65%; animation-delay: 1.4s; animation-duration: 2.2s; }
.star:nth-child(63) { top: 63%; left: 85%; animation-delay: 0.8s; animation-duration: 2.9s; }
.star:nth-child(64) { top: 81%; left: 25%; animation-delay: 1.6s; animation-duration: 1.7s; }
.star:nth-child(65) { top: 29%; left: 5%; animation-delay: 0.5s; animation-duration: 2.3s; }
.star:nth-child(66) { top: 53%; left: 55%; animation-delay: 1.3s; animation-duration: 3.0s; }
.star:nth-child(67) { top: 71%; left: 75%; animation-delay: 0.1s; animation-duration: 1.5s; }
.star:nth-child(68) { top: 97%; left: 35%; animation-delay: 1.9s; animation-duration: 2.7s; }
.star:nth-child(69) { top: 13%; left: 95%; animation-delay: 0.7s; animation-duration: 2.0s; }
.star:nth-child(70) { top: 43%; left: 15%; animation-delay: 1.0s; animation-duration: 2.5s; }
/* estilo comum dos segmentos da base */
.base div{
 position: absolute;
 width: 25px;
 height: 92px;
 left: 94px;
 top: 54px;
 transform-origin: 6px 100px;
 background: radial-gradient(ellipse at 30% 30%, 
   #00ffff 0%, 
   #00e6e6 15%, 
   #0080ff 30%, 
   #004080 50%, 
   #002040 70%, 
   #001122 85%, 
   #000811 100%);
 border-radius: 2px;
 box-shadow: inset 0 0 15px rgba(0, 255, 255, 0.5),
  0 0 100px rgba(0, 128, 255, 0.3);

}
/*base */
.base{
 position: relative;
 width: 200px;
 height: 200px;
 transform-style: preserve-3d;
 scale:0.5;
 transform: rotateX(0deg) rotateY(0deg);
 margin: 50px auto;
 animation: coolRotation 3s linear forwards;

}
@keyframes coolRotation{
 0%,99%{
  transform: rotateX(-15deg) rotateY(0deg);
 }
 100%{
  transform: rotateX(0) rotateY(0deg);
 }
}
/* esfera da base (apenas um circulo visto de frente  e cor radial)*/
.base::before{
 content:'';
 width: 65px;
 height:65px;
 transform:translateX(68px) translateY(75px);
 border-radius:50%;
 background: radial-gradient(ellipse at 30% 30%, 
   #ff00ff 0%, 
   #e600e6 15%, 
   #8000ff 30%, 
   #4000aa 50%, 
   #200055 70%, 
   #110033 85%, 
   #080011 100%);
 position:absolute;
 box-shadow: inset 0 0 20px rgba(255, 0, 255, 0.6),
  0 0 30px rgba(128, 0, 255, 0.5),
  0 0 60px rgba(255, 0, 255, 0.2);
}
/* Segmentos do cone - rotação Y para posição circular + rotação X para inclinar em direção ao centro */
.base div:nth-child(1) { transform: rotateY(0deg) translateZ(120px) rotateX(60deg); }
.base div:nth-child(2) { transform: rotateY(12deg) translateZ(120px) rotateX(60deg); }
.base div:nth-child(3) { transform: rotateY(24deg) translateZ(120px) rotateX(60deg); }
.base div:nth-child(4) { transform: rotateY(36deg) translateZ(120px) rotateX(60deg); }
.base div:nth-child(5) { transform: rotateY(48deg) translateZ(120px) rotateX(60deg); }
.base div:nth-child(6) { transform: rotateY(60deg) translateZ(120px) rotateX(60deg); }
.base div:nth-child(7) { transform: rotateY(72deg) translateZ(120px) rotateX(60deg); }
.base div:nth-child(8) { transform: rotateY(84deg) translateZ(120px) rotateX(60deg); }
.base div:nth-child(9) { transform: rotateY(96deg) translateZ(120px) rotateX(60deg); }
.base div:nth-child(10) { transform: rotateY(108deg) translateZ(120px) rotateX(60deg); }
.base div:nth-child(11) { transform: rotateY(120deg) translateZ(120px) rotateX(60deg); }
.base div:nth-child(12) { transform: rotateY(132deg) translateZ(120px) rotateX(60deg); }
.base div:nth-child(13) { transform: rotateY(144deg) translateZ(120px) rotateX(60deg); }
.base div:nth-child(14) { transform: rotateY(156deg) translateZ(120px) rotateX(60deg); }
.base div:nth-child(15) { transform: rotateY(168deg) translateZ(120px) rotateX(60deg); }
.base div:nth-child(16) { transform: rotateY(180deg) translateZ(120px) rotateX(60deg); }
.base div:nth-child(17) { transform: rotateY(192deg) translateZ(120px) rotateX(60deg); }
.base div:nth-child(18) { transform: rotateY(204deg) translateZ(120px) rotateX(60deg); }
.base div:nth-child(19) { transform: rotateY(216deg) translateZ(120px) rotateX(60deg); }
.base div:nth-child(20) { transform: rotateY(228deg) translateZ(120px) rotateX(60deg); }
.base div:nth-child(21) { transform: rotateY(240deg) translateZ(120px) rotateX(60deg); }
.base div:nth-child(22) { transform: rotateY(252deg) translateZ(120px) rotateX(60deg); }
.base div:nth-child(23) { transform: rotateY(264deg) translateZ(120px) rotateX(60deg); }
.base div:nth-child(24) { transform: rotateY(276deg) translateZ(120px) rotateX(60deg); }
.base div:nth-child(25) { transform: rotateY(288deg) translateZ(120px) rotateX(60deg); }
.base div:nth-child(26) { transform: rotateY(300deg) translateZ(120px) rotateX(60deg); }
.base div:nth-child(27) { transform: rotateY(312deg) translateZ(120px) rotateX(60deg); }
.base div:nth-child(28) { transform: rotateY(324deg) translateZ(120px) rotateX(60deg); }
.base div:nth-child(29) { transform: rotateY(336deg) translateZ(120px) rotateX(60deg); }
.base div:nth-child(30) { transform: rotateY(348deg) translateZ(120px) rotateX(60deg); }