Subtle animation of the shadow beneath the text, simulating the text getting near the page.
Created
February 16, 2014 08:43
-
-
Save alvaropinot/9031264 to your computer and use it in GitHub Desktop.
A Pen by NeatNait.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="http://fonts.googleapis.com/css?family=Audiowide" rel="stylesheet" type="text/css"> | |
| <link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'> | |
| <h1>Audiowide</h1> | |
| <p>made with love at <a href="#">neatnait</a></p> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment