Created
May 29, 2012 00:37
-
-
Save alexmwalker/2821893 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
Wow amazing i think these are the mistakes i have repeatedly doing when writing with the content. Especially by checking with the spelling i am spending much time. And some distractions likewise you are telling by checking with the email and so on. I hope it will be useful for me in future. Please keep update like this.over here Website for school uk