LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code



Audiowide

made with love at neatnait

CSS
body{
  font-family: 'Open Sans', sans-serif;
  background:#d94f79;
  color:white;
  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 2s ease alternate infinite;
}

p{
  color:rgba(255,255,255,.5);
  position:absolute;
  width:100%;
  bottom:10em;
  font-weight:300;
}

a{
  text-decoration:none;
  color:#fff;
}

@-webkit-keyframes floating-text {
  0% {  
    -webkit-transform: translateY(.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);

  }
  100% {
    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: translateY(.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);

  }
  100% {
    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: translateY(.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);

  }
  100% {
    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 floating-text {
  0% {  
    -o-transform: translateY(.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);

  }
  100% {
    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);
  }
}
@keyframes floating-text {
  0% {  
    transform: translateY(.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);

  }
  100% {
    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);
  }
}
Host Instantly Drag and Drop Website Builder

 

Description

Subtle animation of the shadow beneath the text, simulating the text getting near the page.
Term
Wed, 11/29/2017 - 11:19

Related Codes

Pen ID
Pen ID
Pen ID