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>