Nave alienígena

1,024 byby.createsite

Abrir en el editor Publica tu código

Recomendado

10 November 2024

Barra de navegación simple

14 April 2023

Barra de navegación CSS responsiva

14 October 2024

Una plantilla de página web para "Anes Development" con un mensaje de bienvenida y navegación.

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