Nave alienígena

815 byby.createsite

Abrir no Editor Publique Seu Código

Recomendado

4 November 2024

Modelo de barra de navegação HTML CSS

17 July 2025

Código de barras de navegação HTML SVG

28 June 2025

Navegação da barra lateral HTML do painel OMIC EST

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

Modelo de barra de navegação HTML CSS

Código de barras de navegação HTML SVG

Navegação da barra lateral HTML do painel OMIC EST

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS