Nave alienígena

298 ByBy.inc

Abrir en el editor Publica tu código

Recomendado

25 August 2024

Efecto de desplazamiento al navegar CSS puro

17 August 2024

Plantilla de barra de navegación de Bootstrap

4 May 2025

Plantilla de barra de navegación HTML y CSS adaptable

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

Recomendado

Efecto de desplazamiento al navegar CSS puro

Plantilla de barra de navegación de Bootstrap

Plantilla de barra de navegación HTML y CSS adaptable

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS