CSS
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,700&subset=latin,cyrillic);
@import url(http://fonts.googleapis.com/css?family=Audiowide);
html {
overflow: hidden;
}
body{
font-family: 'Open Sans', sans-serif;
color:blue;
text-align:center;
}
h1{
font-family: 'Audiowide';
font-size:5em;
position:absolute; top:0; bottom:0; left:0; right:0;
margin:auto; height:240px; width:70%;
-webkit-animation: floating-text 2s ease alternate infinite;
-moz-animation: floating-text 2s ease alternate infinite;
-ms-animation: floating-text 2s ease alternate infinite;
-o-animation: floating-text 2s ease alternate infinite;
animation: floating-text 0.1s ease alternate infinite;
animation: floating-text 0.3s ease alternate infinite;
animation: floating-text 0.5s ease alternate infinite;
}
p{
color:red;
position:absolute;
width:100%;
bottom:10em;
font-weight:300;
}
a{
text-decoration:none;
color:red;
}
@-webkit-keyframes floating-text {
20% {
-webkit-transform: translateZ(.1em);
text-shadow:0 0 .5em rgba(255,255,255,.4),
0 0 .2em rgba(0,0,0,.3),
0 .3em .2em rgba(0,0,0,.3);
}
-50% {
text-shadow:0 0 .5em rgba(255,255,255,.4),
0 0 .2em rgba(0,0,0,.3),
0 .5em .5em rgba(0,0,0,.3);
}
}
@-moz-keyframes floating-text {
0% {
-moz-transform: translateZ(.1em);
text-shadow:0 0 .5em rgba(255,255,255,.4),
0 0 .2em rgba(0,0,0,.3),
0 .3em .2em rgba(0,0,0,.3);
}
-50% {
text-shadow:0 0 .5em rgba(255,255,255,.4),
0 0 .2em rgba(0,0,0,.3),
0 .5em .5em rgba(0,0,0,.3);
}
}
@-ms-keyframes floating-text {
0% {
-ms-transform: translateZ(.1em);
text-shadow:0 0 .5em rgba(255,255,255,.4),
0 0 .2em rgba(0,0,0,.3),
0 .3em .2em rgba(0,0,0,.3);
}
-50% {
text-shadow:0 0 .5em rgba(255,255,255,.4),
0 0 .2em rgba(0,0,0,.3),
0 .5em .5em rgba(0,0,0,.3);
}
}
@-o-keyframes...