3

Estoy aprendiendo a utilizar los keyframes y animation de CSS3.

Estoy creando una Galaxia y deseo poner un texto pero no logro centrarlo verticalmente, he intentado de todo pero no lo he logrado. ¿Cómo puedo hacerlo?

* {
  padding:0;
  margin:0;
}
@keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-5000px 5000px;}
}
@keyframes move-clouds-back {
    from {background-position: 0;}
    to {background-position:10000px 0;}
}

@keyframes move-clouds-back-red {
    from {background-position: 0;}
    to {background-position:10000px 0;}
}

@keyframes small-meteor {
  0%   {background-size:15px;}
  25%  {background-size:20px;}
  50%  {background-size:25px;}
  75%  {background-size:20px;}
  100% {background-size:15px;}
}

@keyframes move-meteor1-sm {
  from {background-position:500px -500px;}
  to   {background-position:80px 900px;}
}
@keyframes move-meteor2-sm{
  from {background-position:800px -80px;}
  to   {background-position:380px 900px;}
}
@keyframes move-meteor3-sm{
  from {background-position:100px -300px;}
  to   {background-position:-180px 900px;}
}
@keyframes move-meteor4-sm{
  from {background-position:2500px 100px;}
  to   {background-position:1200px 900px;}
}
@keyframes move-meteor5-sm{
  from {background-position:1200px 100px;}
  to   {background-position:800px 900px;}
}

@keyframes big-meteor {
  0%   {background-size:35px;}
  25%  {background-size:45px;}
  50%  {background-size:55px;}
  75%  {background-size:45px;}
  100% {background-size:35px;}
}
@keyframes move-meteor1-bg{
  from {background-position:680px -150px;}
  to   {background-position:100px 900px;}
}
@keyframes move-meteor2-bg{
  from {background-position:1500px -10px;}
  to   {background-position:850px 900px;}
}
@keyframes move-meteor3-bg{
  from {background-position:1000px -500px;}
  to   {background-position:450px 900px;}
}
@keyframes move-meteor4-bg{
  from {background-position:250px -850px;}
  to   {background-position:-550px 900px;}
}

@keyframes medium-meteor{
  0%   {background-size:25px;}
  25%  {background-size:30px;}
  50%  {background-size:35px;}
  75%  {background-size:30px;}
  100% {background-size:25px;}
}

@keyframes move-meteor1-md{
  from {background-position:380px -10px;}
  to   {background-position:-450px 1900px;}
}
@keyframes move-meteor2-md{
  from {background-position:950px -10px;}
  to   {background-position:450px 1900px;}
}
 
@keyframes brightness-sun{
  20%  {box-shadow: 0px 0px 40px 3px #FF7A20;
  background-color: #ff6700;}
  40%  {box-shadow: 0px 0px 40px 5px #FF6320;
  background-color: #ff4d00;}
  60%  {box-shadow: 0px 0px 40px 7px #FF7A20;
  background-color: #ff6700;}
  80%  {box-shadow: 0px 0px 40px 5px #FF6320;
  background-color: #ff4d00;}
  100% {box-shadow: 0px 0px 40px 0px #FF9120;
  background-color: #ff8100;}
}

/*@keyframes ray_anim { 
		0% { -webkit-transform: rotate(0deg); transform: rotate(0deg);}    
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg);}
}*/

#stars, #twinkling, #clouds-red, #clouds-red2, #clouds-red3, #clouds-black, .meteor,
#container-sun
{
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  position:absolute;
}

/*
** Sun
*/
#container-sun{
  top:-65px;
  left:-75px;
  z-index:2;
  width:150px;
  height:150px;
  border-radius:50%;
  background-color: #ff8100;
  opacity:0.75;
  box-shadow: 0px 0px 40px 0px #FF9120; 
  animation: brightness-sun 10s linear infinite;
}

#container-sun > .container-ray {
  position:absolute;
  margin:auto;
  top:0px;
  left:0;
  right:0;
  bottom:0;
  width:70px;
  animation: ray_anim 120s linear infinite;
}

#container-sun > .container-ray > .ray {
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
		background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%); 
    margin-left:10px;
    border-radius:80% 80% 0 0;
    position:absolute;
  
  z-index:2;
    opacity:0.2;
}

.ray-bg{
  height:170px;
  width:20px;
}
@keyframes size-ray-sm{ 
	0%   {height:100px;}
  10%  {height:95px;}
  20%  {height:90px;}
  30%  {height:85px;}
  40%  {height:80px;}
  50%  {height:75px;}
  60%  {height:80px;}
  70%  {height:85px;}
  80%  {height:90px;}
  90%  {height:95px;}
  100% {height:100px;}
}
.ray-sm{
  height: 100px;
  width: 10px;
}

/*Big ray*/
.ray1 {    
    transform: rotate(360deg);
    top:165px;
    left: 15px;
}

.ray-sm.ray2{
  animation: size-ray-sm 3s linear infinite, move-ray2 3s linear infinite;
}
@keyframes move-ray2{
  0% {transform: rotate(-30deg);top: 150px;left: 85px;}
  10% {left:84px;}
  20% {left:83px;}
  30% {left:82px;}
  40% {left:81px;}
  50% {transform: rotate(-31deg);left:80px;}
  60% {left:81px;}
  70% {left:82px;}
  80% {left:83px;}
  90% {left:84px;}
  100% {transform: rotate(-30deg);top: 150px;left: 85px;}
}

.ray-sm.ray4{
  animation: size-ray-sm 3s linear infinite, move-ray4 3s linear infinite;
} 
@keyframes move-ray4{
  0% {transform: rotate(-78deg);top: 45px;left: 150px;}
  10% {left:149px;}
  20% {top:46px;left:148px;}
  30% {left:147px;}
  40% {left:146px;}
  50% { transform: rotate(-79deg);left:145px;}
  60% {left:146px;}
  70% {left:147px;}
  80% {top:46px;left:148px;}
  90% {left:149px;}
  100% {transform: rotate(-78deg);top: 45px;left: 150px;}
}
/*Small ray*/
.ray2 {    
    transform: rotate(-30deg);
    top: 150px;
    left: 85px;
}

/*Big ray*/
.ray3 {
  transform: rotate(-50deg);
  top: 95px;
  left: 150px; 
}

/*Small ray*/
.ray4 {
  transform: rotate(-78deg);
  top: 45px;
  left: 150px;   
}

.meteor{
  /*background: transparent url('https://image.flaticon.com/icons/svg/139/139699.svg') no-repeat top center;*/
  /*background: transparent url('https://image.flaticon.com/icons/svg/180/180707.svg') no-repeat top center;*/
  /*background: transparent url('https://image.flaticon.com/icons/svg/728/728096.svg') no-repeat top center;*/
  background: transparent url('http://i.imgur.com/KgvLW3q.png') no-repeat top center;
  /*background: transparent url('https://i.imgur.com/hwRmI29.png') no-repeat top center;*/
  
  background-size:25px;
}

/*
** Small meteors
*/

.meteor1-sm, .meteor2-sm, .meteor3-sm, .meteor4-sm, .meteor5-sm{
  z-index:2;
}

.meteor1-sm{
  animation:small-meteor 16s linear infinite, move-meteor1-sm 16s linear infinite;
}

.meteor2-sm{
  animation:small-meteor 16s linear infinite, move-meteor2-sm 16s linear infinite;
}

.meteor3-sm{
  animation:small-meteor 16s linear infinite, move-meteor3-sm 16s linear infinite;
}

.meteor4-sm{
  animation:small-meteor 16s linear infinite, move-meteor4-sm 16s linear infinite;
}

.meteor5-sm{
  animation:small-meteor 16s linear infinite, move-meteor5-sm 16s linear infinite;
}

/*
** Big meteors
*/

.meteor1-bg, .meteor2-bg, .meteor3-bg, .meteor4-bg{
  z-index:6;
}
.meteor1-bg{
  animation:big-meteor 8s linear infinite, move-meteor1-bg 8s linear infinite;
}

.meteor2-bg{
  animation:big-meteor 8s linear infinite, move-meteor2-bg 8s linear infinite;
}

.meteor3-bg{
  animation:big-meteor 8s linear infinite, move-meteor3-bg 8s linear infinite;
}

.meteor4-bg{
  animation:big-meteor 8s linear infinite, move-meteor4-bg 8s linear infinite; 
}

/*
** Medium meteors
*/
.meteor1-md, .meteor2-md{
  z-index:4;
}

.meteor1-md{
  animation:medium-meteor 12s linear infinite, move-meteor1-md 12s linear infinite; 
}

.meteor2-md{
  animation:medium-meteor 12s linear infinite, move-meteor2-md 12s linear infinite; 
}

/*
** Stars
*/

#stars {
  background:#000 url('http://www.script-tutorials.com/demos/360/images/stars.png') repeat top center;
  z-index:0;
}


/*
** Twinkling stars
*/
#twinkling{
  background:transparent url('http://www.script-tutorials.com/demos/360/images/twinkling.png') repeat top center;
  z-index:1;
  
  -moz-animation:move-twink-back 100s linear infinite;
  -ms-animation:move-twink-back 100s linear infinite;
  -o-animation:move-twink-back 100s linear infinite;
  -webkit-animation:move-twink-back 150s linear infinite;
  animation:move-twink-back 150s linear infinite;
}

/*
** Black clouds
*/
#clouds-black{
    background:transparent url('http://www.script-tutorials.com/demos/360/images/clouds2.png') repeat-x left top;
  z-index:2;
   opacity:0.7;
  -moz-animation:move-clouds-back 200s linear infinite;
  -ms-animation:move-clouds-back 200s linear infinite;
  -o-animation:move-clouds-back 200s linear infinite;
  -webkit-animation:move-clouds-back 200s linear infinite;
  animation:move-clouds-back 280s linear infinite;
}

/*
** Red clouds
*/

#clouds-red {
  z-index:3;
}

/*
** Movement of red clouds
*/
#clouds-red, #clouds-red2, #clouds-red3 {
  background: transparent url('http://www.script-tutorials.com/demos/360/images/clouds3.png') repeat-x left center;
  
  -moz-animation:move-clouds-back-red 200s linear infinite;
  -ms-animation:move-clouds-back-red 200s linear infinite;
  -o-animation:move-clouds-back-red 200s linear infinite;
  -webkit-animation:move-clouds-back-red 200s linear infinite;
  animation:move-clouds-back-red 200s linear infinite;
}
#clouds-red2{
  z-index:4;
}
#clouds-red3{
  z-index:5;
}

#word{
  width:100%;
  height:100%;
  text-align:center;
}

#word:before{
  content: "";
  display:inline-block;
  vertical-align:middle;
  height:100%;
}
 
#word > div{
  max-width:100%;
  display:inline-block;
  vertical-align:middle;
  font-size:50px;
  z-index:10;
  background: orange;
  position:absolute;
  color: #FFDD1B;
  font-family: Pacifico;
}

#word > div:hover{
  color:#FFF;
  animation: neon 1s ease-in-out infinite alternate;
}

@keyframes neon {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FFDD1B, 0 0 70px #FFDD1B, 0 0 80px #FFDD1B, 0 0 100px #FFDD1B, 0 0 150px #FFDD1B;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FFDD1B, 0 0 35px #FFDD1B, 0 0 40px #FFDD1B, 0 0 50px #FFDD1B, 0 0 75px #FFDD1B;
  }
}
<div id="word">
  <div>Galaxy</div>
</div>
<div id="container-sun">
  <div class="container-ray">
    <div class="ray ray-bg ray1"></div>
    <div class="ray ray-sm ray2"></div>
    <div class="ray ray-bg ray3"></div>
    <div class="ray ray-sm ray4"></div>
  </div>
</div>
<div id="stars"></div>
<div id="twinkling"></div>
<div id="clouds-red"></div>
<div id="clouds-red2"></div>
<div class="meteor meteor1-sm"></div>
<div class="meteor meteor2-sm"></div>
<div class="meteor meteor3-sm"></div>
<div class="meteor meteor4-sm"></div>
<div class="meteor meteor1-md"></div>
<div class="meteor meteor2-md"></div>
<div class="meteor meteor1-bg"></div>
<div class="meteor meteor2-bg"></div>
<div class="meteor meteor3-bg"></div>
<div class="meteor meteor4-bg"></div>
<div id="clouds-red3"></div>
<div id="clouds-black"></div>

1
  • ¿Sirve alguna respuesta?
    – Shaz
    Commented el 2 mar. 2018 a las 14:20

4 respuestas 4

2

Hay varias formas de centrar un div una de ellas es poniendo el siguiente estilo. Lo que hace el estilo es calcular la distancia que debe estar desde el top y left con tu div (en este caso el 50% del div conetenedor) y solo son aplicables cuando se tiene el atributo position en el valor absolute o fixed hasta ese punto la esquina superior izquierda de tu div seria el centro del div contenedor. Para centrar el div interno se usa después el transform mas el translate que lo centra a ese punto exacto del centro tanto vertical y horizontal.

.div-center {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);

}

Ejemplo Modificado

* {
  padding:0;
  margin:0;
}
@keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-5000px 5000px;}
}
@keyframes move-clouds-back {
    from {background-position: 0;}
    to {background-position:10000px 0;}
}

@keyframes move-clouds-back-red {
    from {background-position: 0;}
    to {background-position:10000px 0;}
}

@keyframes small-meteor {
  0%   {background-size:15px;}
  25%  {background-size:20px;}
  50%  {background-size:25px;}
  75%  {background-size:20px;}
  100% {background-size:15px;}
}

@keyframes move-meteor1-sm {
  from {background-position:500px -500px;}
  to   {background-position:80px 900px;}
}
@keyframes move-meteor2-sm{
  from {background-position:800px -80px;}
  to   {background-position:380px 900px;}
}
@keyframes move-meteor3-sm{
  from {background-position:100px -300px;}
  to   {background-position:-180px 900px;}
}
@keyframes move-meteor4-sm{
  from {background-position:2500px 100px;}
  to   {background-position:1200px 900px;}
}
@keyframes move-meteor5-sm{
  from {background-position:1200px 100px;}
  to   {background-position:800px 900px;}
}

@keyframes big-meteor {
  0%   {background-size:35px;}
  25%  {background-size:45px;}
  50%  {background-size:55px;}
  75%  {background-size:45px;}
  100% {background-size:35px;}
}
@keyframes move-meteor1-bg{
  from {background-position:680px -150px;}
  to   {background-position:100px 900px;}
}
@keyframes move-meteor2-bg{
  from {background-position:1500px -10px;}
  to   {background-position:850px 900px;}
}
@keyframes move-meteor3-bg{
  from {background-position:1000px -500px;}
  to   {background-position:450px 900px;}
}
@keyframes move-meteor4-bg{
  from {background-position:250px -850px;}
  to   {background-position:-550px 900px;}
}

@keyframes medium-meteor{
  0%   {background-size:25px;}
  25%  {background-size:30px;}
  50%  {background-size:35px;}
  75%  {background-size:30px;}
  100% {background-size:25px;}
}

@keyframes move-meteor1-md{
  from {background-position:380px -10px;}
  to   {background-position:-450px 1900px;}
}
@keyframes move-meteor2-md{
  from {background-position:950px -10px;}
  to   {background-position:450px 1900px;}
}
 
@keyframes brightness-sun{
  20%  {box-shadow: 0px 0px 40px 3px #FF7A20;
  background-color: #ff6700;}
  40%  {box-shadow: 0px 0px 40px 5px #FF6320;
  background-color: #ff4d00;}
  60%  {box-shadow: 0px 0px 40px 7px #FF7A20;
  background-color: #ff6700;}
  80%  {box-shadow: 0px 0px 40px 5px #FF6320;
  background-color: #ff4d00;}
  100% {box-shadow: 0px 0px 40px 0px #FF9120;
  background-color: #ff8100;}
}

/*@keyframes ray_anim { 
		0% { -webkit-transform: rotate(0deg); transform: rotate(0deg);}    
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg);}
}*/

#stars, #twinkling, #clouds-red, #clouds-red2, #clouds-red3, #clouds-black, .meteor,
#container-sun
{
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  position:absolute;
}

/*
** Sun
*/
#container-sun{
  top:-65px;
  left:-75px;
  z-index:2;
  width:150px;
  height:150px;
  border-radius:50%;
  background-color: #ff8100;
  opacity:0.75;
  box-shadow: 0px 0px 40px 0px #FF9120; 
  animation: brightness-sun 10s linear infinite;
}

#container-sun > .container-ray {
  position:absolute;
  margin:auto;
  top:0px;
  left:0;
  right:0;
  bottom:0;
  width:70px;
  animation: ray_anim 120s linear infinite;
}

#container-sun > .container-ray > .ray {
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
		background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%); 
    margin-left:10px;
    border-radius:80% 80% 0 0;
    position:absolute;
  
  z-index:2;
    opacity:0.2;
}

.ray-bg{
  height:170px;
  width:20px;
}
@keyframes size-ray-sm{ 
	0%   {height:100px;}
  10%  {height:95px;}
  20%  {height:90px;}
  30%  {height:85px;}
  40%  {height:80px;}
  50%  {height:75px;}
  60%  {height:80px;}
  70%  {height:85px;}
  80%  {height:90px;}
  90%  {height:95px;}
  100% {height:100px;}
}
.ray-sm{
  height: 100px;
  width: 10px;
}

/*Big ray*/
.ray1 {    
    transform: rotate(360deg);
    top:165px;
    left: 15px;
}

.ray-sm.ray2{
  animation: size-ray-sm 3s linear infinite, move-ray2 3s linear infinite;
}
@keyframes move-ray2{
  0% {transform: rotate(-30deg);top: 150px;left: 85px;}
  10% {left:84px;}
  20% {left:83px;}
  30% {left:82px;}
  40% {left:81px;}
  50% {transform: rotate(-31deg);left:80px;}
  60% {left:81px;}
  70% {left:82px;}
  80% {left:83px;}
  90% {left:84px;}
  100% {transform: rotate(-30deg);top: 150px;left: 85px;}
}

.ray-sm.ray4{
  animation: size-ray-sm 3s linear infinite, move-ray4 3s linear infinite;
} 
@keyframes move-ray4{
  0% {transform: rotate(-78deg);top: 45px;left: 150px;}
  10% {left:149px;}
  20% {top:46px;left:148px;}
  30% {left:147px;}
  40% {left:146px;}
  50% { transform: rotate(-79deg);left:145px;}
  60% {left:146px;}
  70% {left:147px;}
  80% {top:46px;left:148px;}
  90% {left:149px;}
  100% {transform: rotate(-78deg);top: 45px;left: 150px;}
}
/*Small ray*/
.ray2 {    
    transform: rotate(-30deg);
    top: 150px;
    left: 85px;
}

/*Big ray*/
.ray3 {
  transform: rotate(-50deg);
  top: 95px;
  left: 150px; 
}

/*Small ray*/
.ray4 {
  transform: rotate(-78deg);
  top: 45px;
  left: 150px;   
}

.meteor{
  /*background: transparent url('https://image.flaticon.com/icons/svg/139/139699.svg') no-repeat top center;*/
  /*background: transparent url('https://image.flaticon.com/icons/svg/180/180707.svg') no-repeat top center;*/
  /*background: transparent url('https://image.flaticon.com/icons/svg/728/728096.svg') no-repeat top center;*/
  background: transparent url('http://i.imgur.com/KgvLW3q.png') no-repeat top center;
  /*background: transparent url('https://i.imgur.com/hwRmI29.png') no-repeat top center;*/
  
  background-size:25px;
}

/*
** Small meteors
*/

.meteor1-sm, .meteor2-sm, .meteor3-sm, .meteor4-sm, .meteor5-sm{
  z-index:2;
}

.meteor1-sm{
  animation:small-meteor 16s linear infinite, move-meteor1-sm 16s linear infinite;
}

.meteor2-sm{
  animation:small-meteor 16s linear infinite, move-meteor2-sm 16s linear infinite;
}

.meteor3-sm{
  animation:small-meteor 16s linear infinite, move-meteor3-sm 16s linear infinite;
}

.meteor4-sm{
  animation:small-meteor 16s linear infinite, move-meteor4-sm 16s linear infinite;
}

.meteor5-sm{
  animation:small-meteor 16s linear infinite, move-meteor5-sm 16s linear infinite;
}

/*
** Big meteors
*/

.meteor1-bg, .meteor2-bg, .meteor3-bg, .meteor4-bg{
  z-index:6;
}
.meteor1-bg{
  animation:big-meteor 8s linear infinite, move-meteor1-bg 8s linear infinite;
}

.meteor2-bg{
  animation:big-meteor 8s linear infinite, move-meteor2-bg 8s linear infinite;
}

.meteor3-bg{
  animation:big-meteor 8s linear infinite, move-meteor3-bg 8s linear infinite;
}

.meteor4-bg{
  animation:big-meteor 8s linear infinite, move-meteor4-bg 8s linear infinite; 
}

/*
** Medium meteors
*/
.meteor1-md, .meteor2-md{
  z-index:4;
}

.meteor1-md{
  animation:medium-meteor 12s linear infinite, move-meteor1-md 12s linear infinite; 
}

.meteor2-md{
  animation:medium-meteor 12s linear infinite, move-meteor2-md 12s linear infinite; 
}

/*
** Stars
*/

#stars {
  background:#000 url('http://www.script-tutorials.com/demos/360/images/stars.png') repeat top center;
  z-index:0;
}


/*
** Twinkling stars
*/
#twinkling{
  background:transparent url('http://www.script-tutorials.com/demos/360/images/twinkling.png') repeat top center;
  z-index:1;
  
  -moz-animation:move-twink-back 100s linear infinite;
  -ms-animation:move-twink-back 100s linear infinite;
  -o-animation:move-twink-back 100s linear infinite;
  -webkit-animation:move-twink-back 150s linear infinite;
  animation:move-twink-back 150s linear infinite;
}

/*
** Black clouds
*/
#clouds-black{
    background:transparent url('http://www.script-tutorials.com/demos/360/images/clouds2.png') repeat-x left top;
  z-index:2;
   opacity:0.7;
  -moz-animation:move-clouds-back 200s linear infinite;
  -ms-animation:move-clouds-back 200s linear infinite;
  -o-animation:move-clouds-back 200s linear infinite;
  -webkit-animation:move-clouds-back 200s linear infinite;
  animation:move-clouds-back 280s linear infinite;
}

/*
** Red clouds
*/

#clouds-red {
  z-index:3;
}

/*
** Movement of red clouds
*/
#clouds-red, #clouds-red2, #clouds-red3 {
  background: transparent url('http://www.script-tutorials.com/demos/360/images/clouds3.png') repeat-x left center;
  
  -moz-animation:move-clouds-back-red 200s linear infinite;
  -ms-animation:move-clouds-back-red 200s linear infinite;
  -o-animation:move-clouds-back-red 200s linear infinite;
  -webkit-animation:move-clouds-back-red 200s linear infinite;
  animation:move-clouds-back-red 200s linear infinite;
}
#clouds-red2{
  z-index:4;
}
#clouds-red3{
  z-index:5;
}

#word{
  width:100%;
  height:100%;
  text-align:center;
}

#word:before{
  content: "";
  display:inline-block;
  vertical-align:middle;
  height:100%;
}
 
#word > div{
  max-width:100%;
  display:inline-block;
  vertical-align:middle;
  font-size:50px;
  z-index:10;
  background: orange;
  position:absolute;
  color: #FFDD1B;
  font-family: Pacifico;
}

#word > div:hover{
  color:#FFF;
  animation: neon 1s ease-in-out infinite alternate;
}

@keyframes neon {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FFDD1B, 0 0 70px #FFDD1B, 0 0 80px #FFDD1B, 0 0 100px #FFDD1B, 0 0 150px #FFDD1B;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FFDD1B, 0 0 35px #FFDD1B, 0 0 40px #FFDD1B, 0 0 50px #FFDD1B, 0 0 75px #FFDD1B;
  }
}

.div-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
<div id="word"  >
  <div class="div-center">Galaxy</div>
</div>
<div id="container-sun">
  <div class="container-ray">
    <div class="ray ray-bg ray1"></div>
    <div class="ray ray-sm ray2"></div>
    <div class="ray ray-bg ray3"></div>
    <div class="ray ray-sm ray4"></div>
  </div>
</div>
<div id="stars"></div>
<div id="twinkling"></div>
<div id="clouds-red"></div>
<div id="clouds-red2"></div>
<div class="meteor meteor1-sm"></div>
<div class="meteor meteor2-sm"></div>
<div class="meteor meteor3-sm"></div>
<div class="meteor meteor4-sm"></div>
<div class="meteor meteor1-md"></div>
<div class="meteor meteor2-md"></div>
<div class="meteor meteor1-bg"></div>
<div class="meteor meteor2-bg"></div>
<div class="meteor meteor3-bg"></div>
<div class="meteor meteor4-bg"></div>
<div id="clouds-red3"></div>
<div id="clouds-black"></div>

1

Una opción con flexbox, utilizando sus famosas propiedades para centrar en ambos ejes:

display:flex;
justify-content: center;
align-items: center;

Aunque hay que agregar el típico código:

body, html {
  height: 100%;
}

No logré verificar rápidamente si esto afecta algunas animaciones.

* {
  padding:0;
  margin:0;
}
@keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-5000px 5000px;}
}
@keyframes move-clouds-back {
    from {background-position: 0;}
    to {background-position:10000px 0;}
}

@keyframes move-clouds-back-red {
    from {background-position: 0;}
    to {background-position:10000px 0;}
}

@keyframes small-meteor {
  0%   {background-size:15px;}
  25%  {background-size:20px;}
  50%  {background-size:25px;}
  75%  {background-size:20px;}
  100% {background-size:15px;}
}

@keyframes move-meteor1-sm {
  from {background-position:500px -500px;}
  to   {background-position:80px 900px;}
}
@keyframes move-meteor2-sm{
  from {background-position:800px -80px;}
  to   {background-position:380px 900px;}
}
@keyframes move-meteor3-sm{
  from {background-position:100px -300px;}
  to   {background-position:-180px 900px;}
}
@keyframes move-meteor4-sm{
  from {background-position:2500px 100px;}
  to   {background-position:1200px 900px;}
}
@keyframes move-meteor5-sm{
  from {background-position:1200px 100px;}
  to   {background-position:800px 900px;}
}

@keyframes big-meteor {
  0%   {background-size:35px;}
  25%  {background-size:45px;}
  50%  {background-size:55px;}
  75%  {background-size:45px;}
  100% {background-size:35px;}
}
@keyframes move-meteor1-bg{
  from {background-position:680px -150px;}
  to   {background-position:100px 900px;}
}
@keyframes move-meteor2-bg{
  from {background-position:1500px -10px;}
  to   {background-position:850px 900px;}
}
@keyframes move-meteor3-bg{
  from {background-position:1000px -500px;}
  to   {background-position:450px 900px;}
}
@keyframes move-meteor4-bg{
  from {background-position:250px -850px;}
  to   {background-position:-550px 900px;}
}

@keyframes medium-meteor{
  0%   {background-size:25px;}
  25%  {background-size:30px;}
  50%  {background-size:35px;}
  75%  {background-size:30px;}
  100% {background-size:25px;}
}

@keyframes move-meteor1-md{
  from {background-position:380px -10px;}
  to   {background-position:-450px 1900px;}
}
@keyframes move-meteor2-md{
  from {background-position:950px -10px;}
  to   {background-position:450px 1900px;}
}
 
@keyframes brightness-sun{
  20%  {box-shadow: 0px 0px 40px 3px #FF7A20;
  background-color: #ff6700;}
  40%  {box-shadow: 0px 0px 40px 5px #FF6320;
  background-color: #ff4d00;}
  60%  {box-shadow: 0px 0px 40px 7px #FF7A20;
  background-color: #ff6700;}
  80%  {box-shadow: 0px 0px 40px 5px #FF6320;
  background-color: #ff4d00;}
  100% {box-shadow: 0px 0px 40px 0px #FF9120;
  background-color: #ff8100;}
}

/*@keyframes ray_anim { 
		0% { -webkit-transform: rotate(0deg); transform: rotate(0deg);}    
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg);}
}*/

#stars, #twinkling, #clouds-red, #clouds-red2, #clouds-red3, #clouds-black, .meteor,
#container-sun
{
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  position:absolute;
}

/*
** Sun
*/
#container-sun{
  top:-65px;
  left:-75px;
  z-index:2;
  width:150px;
  height:150px;
  border-radius:50%;
  background-color: #ff8100;
  opacity:0.75;
  box-shadow: 0px 0px 40px 0px #FF9120; 
  animation: brightness-sun 10s linear infinite;
}

#container-sun > .container-ray {
  position:absolute;
  margin:auto;
  top:0px;
  left:0;
  right:0;
  bottom:0;
  width:70px;
  animation: ray_anim 120s linear infinite;
}

#container-sun > .container-ray > .ray {
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
		background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%); 
    margin-left:10px;
    border-radius:80% 80% 0 0;
    position:absolute;
  
  z-index:2;
    opacity:0.2;
}

.ray-bg{
  height:170px;
  width:20px;
}
@keyframes size-ray-sm{ 
	0%   {height:100px;}
  10%  {height:95px;}
  20%  {height:90px;}
  30%  {height:85px;}
  40%  {height:80px;}
  50%  {height:75px;}
  60%  {height:80px;}
  70%  {height:85px;}
  80%  {height:90px;}
  90%  {height:95px;}
  100% {height:100px;}
}
.ray-sm{
  height: 100px;
  width: 10px;
}

/*Big ray*/
.ray1 {    
    transform: rotate(360deg);
    top:165px;
    left: 15px;
}

.ray-sm.ray2{
  animation: size-ray-sm 3s linear infinite, move-ray2 3s linear infinite;
}
@keyframes move-ray2{
  0% {transform: rotate(-30deg);top: 150px;left: 85px;}
  10% {left:84px;}
  20% {left:83px;}
  30% {left:82px;}
  40% {left:81px;}
  50% {transform: rotate(-31deg);left:80px;}
  60% {left:81px;}
  70% {left:82px;}
  80% {left:83px;}
  90% {left:84px;}
  100% {transform: rotate(-30deg);top: 150px;left: 85px;}
}

.ray-sm.ray4{
  animation: size-ray-sm 3s linear infinite, move-ray4 3s linear infinite;
} 
@keyframes move-ray4{
  0% {transform: rotate(-78deg);top: 45px;left: 150px;}
  10% {left:149px;}
  20% {top:46px;left:148px;}
  30% {left:147px;}
  40% {left:146px;}
  50% { transform: rotate(-79deg);left:145px;}
  60% {left:146px;}
  70% {left:147px;}
  80% {top:46px;left:148px;}
  90% {left:149px;}
  100% {transform: rotate(-78deg);top: 45px;left: 150px;}
}
/*Small ray*/
.ray2 {    
    transform: rotate(-30deg);
    top: 150px;
    left: 85px;
}

/*Big ray*/
.ray3 {
  transform: rotate(-50deg);
  top: 95px;
  left: 150px; 
}

/*Small ray*/
.ray4 {
  transform: rotate(-78deg);
  top: 45px;
  left: 150px;   
}

.meteor{
  /*background: transparent url('https://image.flaticon.com/icons/svg/139/139699.svg') no-repeat top center;*/
  /*background: transparent url('https://image.flaticon.com/icons/svg/180/180707.svg') no-repeat top center;*/
  /*background: transparent url('https://image.flaticon.com/icons/svg/728/728096.svg') no-repeat top center;*/
  background: transparent url('http://i.imgur.com/KgvLW3q.png') no-repeat top center;
  /*background: transparent url('https://i.imgur.com/hwRmI29.png') no-repeat top center;*/
  
  background-size:25px;
}

/*
** Small meteors
*/

.meteor1-sm, .meteor2-sm, .meteor3-sm, .meteor4-sm, .meteor5-sm{
  z-index:2;
}

.meteor1-sm{
  animation:small-meteor 16s linear infinite, move-meteor1-sm 16s linear infinite;
}

.meteor2-sm{
  animation:small-meteor 16s linear infinite, move-meteor2-sm 16s linear infinite;
}

.meteor3-sm{
  animation:small-meteor 16s linear infinite, move-meteor3-sm 16s linear infinite;
}

.meteor4-sm{
  animation:small-meteor 16s linear infinite, move-meteor4-sm 16s linear infinite;
}

.meteor5-sm{
  animation:small-meteor 16s linear infinite, move-meteor5-sm 16s linear infinite;
}

/*
** Big meteors
*/

.meteor1-bg, .meteor2-bg, .meteor3-bg, .meteor4-bg{
  z-index:6;
}
.meteor1-bg{
  animation:big-meteor 8s linear infinite, move-meteor1-bg 8s linear infinite;
}

.meteor2-bg{
  animation:big-meteor 8s linear infinite, move-meteor2-bg 8s linear infinite;
}

.meteor3-bg{
  animation:big-meteor 8s linear infinite, move-meteor3-bg 8s linear infinite;
}

.meteor4-bg{
  animation:big-meteor 8s linear infinite, move-meteor4-bg 8s linear infinite; 
}

/*
** Medium meteors
*/
.meteor1-md, .meteor2-md{
  z-index:4;
}

.meteor1-md{
  animation:medium-meteor 12s linear infinite, move-meteor1-md 12s linear infinite; 
}

.meteor2-md{
  animation:medium-meteor 12s linear infinite, move-meteor2-md 12s linear infinite; 
}

/*
** Stars
*/

#stars {
  background:#000 url('http://www.script-tutorials.com/demos/360/images/stars.png') repeat top center;
  z-index:0;
}


/*
** Twinkling stars
*/
#twinkling{
  background:transparent url('http://www.script-tutorials.com/demos/360/images/twinkling.png') repeat top center;
  z-index:1;
  
  -moz-animation:move-twink-back 100s linear infinite;
  -ms-animation:move-twink-back 100s linear infinite;
  -o-animation:move-twink-back 100s linear infinite;
  -webkit-animation:move-twink-back 150s linear infinite;
  animation:move-twink-back 150s linear infinite;
}

/*
** Black clouds
*/
#clouds-black{
    background:transparent url('http://www.script-tutorials.com/demos/360/images/clouds2.png') repeat-x left top;
  z-index:2;
   opacity:0.7;
  -moz-animation:move-clouds-back 200s linear infinite;
  -ms-animation:move-clouds-back 200s linear infinite;
  -o-animation:move-clouds-back 200s linear infinite;
  -webkit-animation:move-clouds-back 200s linear infinite;
  animation:move-clouds-back 280s linear infinite;
}

/*
** Red clouds
*/

#clouds-red {
  z-index:3;
}

/*
** Movement of red clouds
*/
#clouds-red, #clouds-red2, #clouds-red3 {
  background: transparent url('http://www.script-tutorials.com/demos/360/images/clouds3.png') repeat-x left center;
  
  -moz-animation:move-clouds-back-red 200s linear infinite;
  -ms-animation:move-clouds-back-red 200s linear infinite;
  -o-animation:move-clouds-back-red 200s linear infinite;
  -webkit-animation:move-clouds-back-red 200s linear infinite;
  animation:move-clouds-back-red 200s linear infinite;
}
#clouds-red2{
  z-index:4;
}
#clouds-red3{
  z-index:5;
}

body, html {
  height: 100%;
}

#word{
  width:100%;
  height:100%;
  display:flex;
  justify-content: center;
  align-items: center;
}

 
#word > div{
  max-width:100%;
  font-size:50px;
  z-index:10;
  background: orange;
  color: #FFDD1B;
  font-family: Pacifico;
}

#word > div:hover{
  color:#FFF;
  animation: neon 1s ease-in-out infinite alternate;
}

@keyframes neon {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FFDD1B, 0 0 70px #FFDD1B, 0 0 80px #FFDD1B, 0 0 100px #FFDD1B, 0 0 150px #FFDD1B;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FFDD1B, 0 0 35px #FFDD1B, 0 0 40px #FFDD1B, 0 0 50px #FFDD1B, 0 0 75px #FFDD1B;
  }
}
<div id="word">
  <div>Galaxy</div>
</div>
<div id="container-sun">
  <div class="container-ray">
    <div class="ray ray-bg ray1"></div>
    <div class="ray ray-sm ray2"></div>
    <div class="ray ray-bg ray3"></div>
    <div class="ray ray-sm ray4"></div>
  </div>
</div>
<div id="stars"></div>
<div id="twinkling"></div>
<div id="clouds-red"></div>
<div id="clouds-red2"></div>
<div class="meteor meteor1-sm"></div>
<div class="meteor meteor2-sm"></div>
<div class="meteor meteor3-sm"></div>
<div class="meteor meteor4-sm"></div>
<div class="meteor meteor1-md"></div>
<div class="meteor meteor2-md"></div>
<div class="meteor meteor1-bg"></div>
<div class="meteor meteor2-bg"></div>
<div class="meteor meteor3-bg"></div>
<div class="meteor meteor4-bg"></div>
<div id="clouds-red3"></div>
<div id="clouds-black"></div>

2
  • ¿Siempre con flexbox hay que agregar un height de 100% en las etiquetas body y html?
    – Hoose
    Commented el 2 mar. 2018 a las 16:19
  • Teniendo en cuenta que se necesita una referencia o contenedor para la posición, me temo que en este contexto específico, sí.
    – Shaz
    Commented el 2 mar. 2018 a las 16:50
1

La forma màs sencilla y nativa es usar display table al 100% con display table cell y al cell agregar vertical align middle con text align center.

0

Lo puedes hacer utilizando las propiedades top, bottom, left y right y dejándolas en 0, que, combinado con la propiedad margin: auto te centrará el div en el centro de la pantalla.

Ten en cuenta que le tendrás que poner una anchura y una altura fijas ya que si no el div se te expandirá tanto como pueda, es decir, te ocupará toda la pantalla.

#word > div{
  max-height: 60px; /* NUEVO */
  max-width: 180px; /* NUEVO */
  display: inline-block;
  font-size:50px;
  z-index:10;
  background: orange;
  position:absolute;
  color: #FFDD1B;
  font-family: Pacifico;
  top: 0; /* NUEVO */
  left: 0; /* NUEVO */
  right: 0; /* NUEVO */
  bottom: 0; /* NUEVO */
  margin: auto; /* NUEVO */
}

Tu ejemplo modificado:

* {
  padding:0;
  margin:0;
}
@keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-5000px 5000px;}
}
@keyframes move-clouds-back {
    from {background-position: 0;}
    to {background-position:10000px 0;}
}

@keyframes move-clouds-back-red {
    from {background-position: 0;}
    to {background-position:10000px 0;}
}

@keyframes small-meteor {
  0%   {background-size:15px;}
  25%  {background-size:20px;}
  50%  {background-size:25px;}
  75%  {background-size:20px;}
  100% {background-size:15px;}
}

@keyframes move-meteor1-sm {
  from {background-position:500px -500px;}
  to   {background-position:80px 900px;}
}
@keyframes move-meteor2-sm{
  from {background-position:800px -80px;}
  to   {background-position:380px 900px;}
}
@keyframes move-meteor3-sm{
  from {background-position:100px -300px;}
  to   {background-position:-180px 900px;}
}
@keyframes move-meteor4-sm{
  from {background-position:2500px 100px;}
  to   {background-position:1200px 900px;}
}
@keyframes move-meteor5-sm{
  from {background-position:1200px 100px;}
  to   {background-position:800px 900px;}
}

@keyframes big-meteor {
  0%   {background-size:35px;}
  25%  {background-size:45px;}
  50%  {background-size:55px;}
  75%  {background-size:45px;}
  100% {background-size:35px;}
}
@keyframes move-meteor1-bg{
  from {background-position:680px -150px;}
  to   {background-position:100px 900px;}
}
@keyframes move-meteor2-bg{
  from {background-position:1500px -10px;}
  to   {background-position:850px 900px;}
}
@keyframes move-meteor3-bg{
  from {background-position:1000px -500px;}
  to   {background-position:450px 900px;}
}
@keyframes move-meteor4-bg{
  from {background-position:250px -850px;}
  to   {background-position:-550px 900px;}
}

@keyframes medium-meteor{
  0%   {background-size:25px;}
  25%  {background-size:30px;}
  50%  {background-size:35px;}
  75%  {background-size:30px;}
  100% {background-size:25px;}
}

@keyframes move-meteor1-md{
  from {background-position:380px -10px;}
  to   {background-position:-450px 1900px;}
}
@keyframes move-meteor2-md{
  from {background-position:950px -10px;}
  to   {background-position:450px 1900px;}
}
 
@keyframes brightness-sun{
  20%  {box-shadow: 0px 0px 40px 3px #FF7A20;
  background-color: #ff6700;}
  40%  {box-shadow: 0px 0px 40px 5px #FF6320;
  background-color: #ff4d00;}
  60%  {box-shadow: 0px 0px 40px 7px #FF7A20;
  background-color: #ff6700;}
  80%  {box-shadow: 0px 0px 40px 5px #FF6320;
  background-color: #ff4d00;}
  100% {box-shadow: 0px 0px 40px 0px #FF9120;
  background-color: #ff8100;}
}

/*@keyframes ray_anim { 
		0% { -webkit-transform: rotate(0deg); transform: rotate(0deg);}    
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg);}
}*/

#stars, #twinkling, #clouds-red, #clouds-red2, #clouds-red3, #clouds-black, .meteor,
#container-sun
{
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  position:absolute;
}

/*
** Sun
*/
#container-sun{
  top:-65px;
  left:-75px;
  z-index:2;
  width:150px;
  height:150px;
  border-radius:50%;
  background-color: #ff8100;
  opacity:0.75;
  box-shadow: 0px 0px 40px 0px #FF9120; 
  animation: brightness-sun 10s linear infinite;
}

#container-sun > .container-ray {
  position:absolute;
  margin:auto;
  top:0px;
  left:0;
  right:0;
  bottom:0;
  width:70px;
  animation: ray_anim 120s linear infinite;
}

#container-sun > .container-ray > .ray {
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
		background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%); 
    margin-left:10px;
    border-radius:80% 80% 0 0;
    position:absolute;
  
  z-index:2;
    opacity:0.2;
}

.ray-bg{
  height:170px;
  width:20px;
}
@keyframes size-ray-sm{ 
	0%   {height:100px;}
  10%  {height:95px;}
  20%  {height:90px;}
  30%  {height:85px;}
  40%  {height:80px;}
  50%  {height:75px;}
  60%  {height:80px;}
  70%  {height:85px;}
  80%  {height:90px;}
  90%  {height:95px;}
  100% {height:100px;}
}
.ray-sm{
  height: 100px;
  width: 10px;
}

/*Big ray*/
.ray1 {    
    transform: rotate(360deg);
    top:165px;
    left: 15px;
}

.ray-sm.ray2{
  animation: size-ray-sm 3s linear infinite, move-ray2 3s linear infinite;
}
@keyframes move-ray2{
  0% {transform: rotate(-30deg);top: 150px;left: 85px;}
  10% {left:84px;}
  20% {left:83px;}
  30% {left:82px;}
  40% {left:81px;}
  50% {transform: rotate(-31deg);left:80px;}
  60% {left:81px;}
  70% {left:82px;}
  80% {left:83px;}
  90% {left:84px;}
  100% {transform: rotate(-30deg);top: 150px;left: 85px;}
}

.ray-sm.ray4{
  animation: size-ray-sm 3s linear infinite, move-ray4 3s linear infinite;
} 
@keyframes move-ray4{
  0% {transform: rotate(-78deg);top: 45px;left: 150px;}
  10% {left:149px;}
  20% {top:46px;left:148px;}
  30% {left:147px;}
  40% {left:146px;}
  50% { transform: rotate(-79deg);left:145px;}
  60% {left:146px;}
  70% {left:147px;}
  80% {top:46px;left:148px;}
  90% {left:149px;}
  100% {transform: rotate(-78deg);top: 45px;left: 150px;}
}
/*Small ray*/
.ray2 {    
    transform: rotate(-30deg);
    top: 150px;
    left: 85px;
}

/*Big ray*/
.ray3 {
  transform: rotate(-50deg);
  top: 95px;
  left: 150px; 
}

/*Small ray*/
.ray4 {
  transform: rotate(-78deg);
  top: 45px;
  left: 150px;   
}

.meteor{
  /*background: transparent url('https://image.flaticon.com/icons/svg/139/139699.svg') no-repeat top center;*/
  /*background: transparent url('https://image.flaticon.com/icons/svg/180/180707.svg') no-repeat top center;*/
  /*background: transparent url('https://image.flaticon.com/icons/svg/728/728096.svg') no-repeat top center;*/
  background: transparent url('http://i.imgur.com/KgvLW3q.png') no-repeat top center;
  /*background: transparent url('https://i.imgur.com/hwRmI29.png') no-repeat top center;*/
  
  background-size:25px;
}

/*
** Small meteors
*/

.meteor1-sm, .meteor2-sm, .meteor3-sm, .meteor4-sm, .meteor5-sm{
  z-index:2;
}

.meteor1-sm{
  animation:small-meteor 16s linear infinite, move-meteor1-sm 16s linear infinite;
}

.meteor2-sm{
  animation:small-meteor 16s linear infinite, move-meteor2-sm 16s linear infinite;
}

.meteor3-sm{
  animation:small-meteor 16s linear infinite, move-meteor3-sm 16s linear infinite;
}

.meteor4-sm{
  animation:small-meteor 16s linear infinite, move-meteor4-sm 16s linear infinite;
}

.meteor5-sm{
  animation:small-meteor 16s linear infinite, move-meteor5-sm 16s linear infinite;
}

/*
** Big meteors
*/

.meteor1-bg, .meteor2-bg, .meteor3-bg, .meteor4-bg{
  z-index:6;
}
.meteor1-bg{
  animation:big-meteor 8s linear infinite, move-meteor1-bg 8s linear infinite;
}

.meteor2-bg{
  animation:big-meteor 8s linear infinite, move-meteor2-bg 8s linear infinite;
}

.meteor3-bg{
  animation:big-meteor 8s linear infinite, move-meteor3-bg 8s linear infinite;
}

.meteor4-bg{
  animation:big-meteor 8s linear infinite, move-meteor4-bg 8s linear infinite; 
}

/*
** Medium meteors
*/
.meteor1-md, .meteor2-md{
  z-index:4;
}

.meteor1-md{
  animation:medium-meteor 12s linear infinite, move-meteor1-md 12s linear infinite; 
}

.meteor2-md{
  animation:medium-meteor 12s linear infinite, move-meteor2-md 12s linear infinite; 
}

/*
** Stars
*/

#stars {
  background:#000 url('http://www.script-tutorials.com/demos/360/images/stars.png') repeat top center;
  z-index:0;
}


/*
** Twinkling stars
*/
#twinkling{
  background:transparent url('http://www.script-tutorials.com/demos/360/images/twinkling.png') repeat top center;
  z-index:1;
  
  -moz-animation:move-twink-back 100s linear infinite;
  -ms-animation:move-twink-back 100s linear infinite;
  -o-animation:move-twink-back 100s linear infinite;
  -webkit-animation:move-twink-back 150s linear infinite;
  animation:move-twink-back 150s linear infinite;
}

/*
** Black clouds
*/
#clouds-black{
    background:transparent url('http://www.script-tutorials.com/demos/360/images/clouds2.png') repeat-x left top;
  z-index:2;
   opacity:0.7;
  -moz-animation:move-clouds-back 200s linear infinite;
  -ms-animation:move-clouds-back 200s linear infinite;
  -o-animation:move-clouds-back 200s linear infinite;
  -webkit-animation:move-clouds-back 200s linear infinite;
  animation:move-clouds-back 280s linear infinite;
}

/*
** Red clouds
*/

#clouds-red {
  z-index:3;
}

/*
** Movement of red clouds
*/
#clouds-red, #clouds-red2, #clouds-red3 {
  background: transparent url('http://www.script-tutorials.com/demos/360/images/clouds3.png') repeat-x left center;
  
  -moz-animation:move-clouds-back-red 200s linear infinite;
  -ms-animation:move-clouds-back-red 200s linear infinite;
  -o-animation:move-clouds-back-red 200s linear infinite;
  -webkit-animation:move-clouds-back-red 200s linear infinite;
  animation:move-clouds-back-red 200s linear infinite;
}
#clouds-red2{
  z-index:4;
}
#clouds-red3{
  z-index:5;
}

#word{
  width:100%;
  height:100%;
  text-align:center;
}

#word:before{
  content: "";
  display:inline-block;
  vertical-align:middle;
  height:100%;
}
 
#word > div{
  max-height: 60px;
  max-width: 180px;
  display: inline-block;
  font-size:50px;
  z-index:10;
  background: orange;
  position:absolute;
  color: #FFDD1B;
  font-family: Pacifico;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

#word > div:hover{
  color:#FFF;
  animation: neon 1s ease-in-out infinite alternate;
}

@keyframes neon {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FFDD1B, 0 0 70px #FFDD1B, 0 0 80px #FFDD1B, 0 0 100px #FFDD1B, 0 0 150px #FFDD1B;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FFDD1B, 0 0 35px #FFDD1B, 0 0 40px #FFDD1B, 0 0 50px #FFDD1B, 0 0 75px #FFDD1B;
  }
}
<div id="word">
  <div>Galaxy</div>
</div>
<div id="container-sun">
  <div class="container-ray">
    <div class="ray ray-bg ray1"></div>
    <div class="ray ray-sm ray2"></div>
    <div class="ray ray-bg ray3"></div>
    <div class="ray ray-sm ray4"></div>
  </div>
</div>
<div id="stars"></div>
<div id="twinkling"></div>
<div id="clouds-red"></div>
<div id="clouds-red2"></div>
<div class="meteor meteor1-sm"></div>
<div class="meteor meteor2-sm"></div>
<div class="meteor meteor3-sm"></div>
<div class="meteor meteor4-sm"></div>
<div class="meteor meteor1-md"></div>
<div class="meteor meteor2-md"></div>
<div class="meteor meteor1-bg"></div>
<div class="meteor meteor2-bg"></div>
<div class="meteor meteor3-bg"></div>
<div class="meteor meteor4-bg"></div>
<div id="clouds-red3"></div>
<div id="clouds-black"></div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.