-
-
Save jensgro/2964439 to your computer and use it in GitHub Desktop.
CSS Animation - Crawl
This file contains 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
| /** | |
| * CSS Animation - Crawl | |
| */ | |
| body{ | |
| background: #000 url(http://1.bp.blogspot.com/-GgGP4aPcInM/TpcOxhGNlGI/AAAAAAAAAcw/6XeuuHb-qI0/s1600/Star%2BScape.jpg); | |
| font:700 16px Arial, Helvetica, sans-serif; | |
| padding:4em 0; | |
| min-height: 100%; | |
| color:#ffee77; | |
| text-align:center; | |
| text-align: justify; | |
| text-justify: newspaper; | |
| text-shadow:0 0 10px rgba(255,255,255,.6); | |
| font-weight:700; | |
| perspective:500px; | |
| } | |
| div#content { | |
| margin:0 50%; | |
| width:32em; | |
| left:-16em; | |
| position:absolute; | |
| animation: crawler 19s infinite linear; | |
| } | |
| h1{ | |
| font:700 70px Arial Narrow, Helvetica, sans-serif; | |
| text-align:center; | |
| text-transform:uppercase; | |
| } | |
| p{ | |
| font-size:32px; | |
| } | |
| p:nth-of-type(1) { | |
| text-align:center | |
| } | |
| @keyframes crawler { | |
| 0%{transform: translate3d(0px, 100px, 0px) rotateX(80deg);} | |
| 70%{opacity:1} | |
| 100% {transform: translate3d(0px, -200px, -300px) rotateX(80deg);opacity:0} | |
| } |
This file contains 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
| <!-- content to be placed inside <body>…</body> --> | |
| <div id="content"> | |
| <p>Episode IV</p> | |
| <h1>A New Hope</h1> | |
| <p>It is a time of Civil War. | |
| Rebel spaceships, striking from a | |
| hidden base, have won their | |
| first victory against the evil | |
| Galactic Empire.</p> | |
| <p>During the battle, Rebel spies | |
| managed to steal secret plans | |
| to the Empire's ultimate weapon, | |
| the DEATH STAR, an armored space | |
| station with enough power to destroy | |
| an entire planet.</p> | |
| <p>Pursued by the Empire’s sinister agents, | |
| Princess Leia races home aboard her starship, | |
| custodian of the stolen plans that can save | |
| her people and restore freedom to the galaxy... | |
| </p> | |
| </div> |
This file contains 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
| {"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment