Created
September 20, 2011 17:15
-
-
Save oddlyzen/1229700 to your computer and use it in GitHub Desktop.
Cool CSS Flicker Animation - from http://ringshia.com
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
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="description" content="Pratik Ringshia's website"> | |
| <meta name="keywords" content="pratik ringshia, pratik, ringshia, personal, website"> | |
| <link rel="icon" type="image/x-icon" href="/favicon.ico" /> | |
| <style type="text/css"> | |
| /* @group reset */ | |
| html, body, div, span, applet, object, iframe, | |
| h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |
| a, abbr, acronym, address, big, cite, code, | |
| del, dfn, em, font, img, ins, kbd, q, s, samp, | |
| small, strike, strong, sub, sup, tt, var, | |
| b, u, i, center, | |
| dl, dt, dd, ol, ul, li, | |
| fieldset, form, label, legend, | |
| table, caption, tbody, tfoot, thead, tr, th, td { | |
| margin: 0; | |
| padding: 0; | |
| border: 0; | |
| outline: 0; | |
| font-size: 100%; | |
| vertical-align: baseline; | |
| background: transparent; | |
| } | |
| body { | |
| line-height: 1; | |
| } | |
| ol, ul { | |
| list-style: none; | |
| } | |
| blockquote, q { | |
| quotes: none; | |
| } | |
| blockquote:before, blockquote:after, | |
| q:before, q:after { | |
| content: ''; | |
| } | |
| /* remember to define focus styles! */ | |
| :focus { | |
| outline: 0; | |
| } | |
| /* remember to highlight inserts somehow! */ | |
| ins { | |
| text-decoration: none; | |
| } | |
| del { | |
| text-decoration: line-through; | |
| } | |
| /* tables still need 'cellspacing="0"' in the markup */ | |
| table { | |
| border-collapse: collapse; | |
| border-spacing: 0; | |
| } | |
| /* @end */ | |
| @-webkit-keyframes flicker { | |
| from { | |
| opacity: 0.5; | |
| } | |
| 4% { | |
| opacity: 0.5; | |
| } | |
| 6% { | |
| opacity: 0.45; | |
| } | |
| 8% { | |
| opacity: 0.55; | |
| } | |
| 10% { | |
| opacity: 0.45; | |
| } | |
| 11% { | |
| opacity: 0.5; | |
| } | |
| 12% { | |
| opacity: 0.65; | |
| } | |
| 14% { | |
| opacity: 0.55; | |
| } | |
| 16% { | |
| opacity: 0.70; | |
| } | |
| 17% { | |
| opacity: 0.55; | |
| } | |
| 19% { | |
| opacity: 0.5; | |
| } | |
| 20% { | |
| opacity: 0.5; | |
| } | |
| 24% { | |
| opacity: 0.5; | |
| } | |
| 26% { | |
| opacity: 0.69; | |
| } | |
| 28% { | |
| opacity: 0.5; | |
| } | |
| 38% { | |
| opacity: 0.45; | |
| } | |
| 40% { | |
| opacity: 0.5; | |
| } | |
| 42% { | |
| opacity: 0.6; | |
| } | |
| 44% { | |
| opacity: 0.5; | |
| } | |
| 46% { | |
| opacity: 0.5; | |
| } | |
| 56% { | |
| opacity: 0.5; | |
| } | |
| 58% { | |
| opacity: 0.75; | |
| } | |
| 60% { | |
| opacity: 0.5; | |
| } | |
| 68% { | |
| opacity: 0.5; | |
| } | |
| 70% { | |
| opacity: .6; /*peak*/ | |
| } | |
| 72% { | |
| opacity: 0.5; | |
| } | |
| 93% { | |
| opacity: 0.5; | |
| } | |
| 95% { | |
| opacity: .6; /*peak*/ | |
| } | |
| 97% { | |
| opacity: 0.5; | |
| } | |
| to { | |
| opacity: 0.5; | |
| } | |
| } | |
| html { | |
| background-color: black; | |
| } | |
| html body { | |
| font: 12px/1.6 "Helvetica Neue", Arial, "Lucida Grande", "Lucida Sans Unicode", Lucida, Verdana; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| #wrapper { | |
| background-image: -webkit-gradient(radial, 50% -30%, 0, 50% -30%, 550, from( rgba(176, 179, 149, 1) ), to(black)); | |
| background-size: 100% 100%; | |
| background-position: top center; | |
| opacity: 0.75; | |
| -webkit-animation-name: flicker; | |
| -webkit-animation-duration: 3s; | |
| -webkit-animation-iteration-count: infinite; | |
| -webkit-animation-timing-function: linear; | |
| height: 600px; | |
| overflow: hidden; | |
| width: 100%; | |
| position: absolute; | |
| text-align: center; | |
| color: rgba(255, 255, 255, 0.8); | |
| } | |
| @-moz-document url-prefix() { | |
| div#wrapper { | |
| color: white; | |
| opacity: 1; | |
| } | |
| } | |
| #wrapper h1 { | |
| font-size: 3em; | |
| margin-top: 120px; | |
| /*text-transform: uppercase;*/ | |
| text-shadow: 0 2px rgba(0, 0, 0, 1); | |
| } | |
| #wrapper p { | |
| font-family: "Monotype Corsiva", cursive; | |
| font-size: 2em; | |
| margin-top: -15px; | |
| text-shadow: black 0 -1px; | |
| } | |
| a, a:visited { | |
| } | |
| a:hover, a:active { | |
| } | |
| </style> | |
| <!-- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools-yui-compressed.js"></script> | |
| <script type="text/javascript" src="scripts/script.js"></script> --> | |
| <title>Ringshia.com</title> | |
| </head> | |
| <body> | |
| <div id="wrapper"> | |
| <h1>Under Construction</h1> | |
| <p>Stay tuned...</p> | |
| </div> | |
| <script type="text/javascript"> | |
| var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); | |
| document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); | |
| </script> | |
| <script type="text/javascript"> | |
| try{ | |
| var pageTracker = _gat._getTracker("UA-3999826-1"); | |
| pageTracker._trackPageview(); | |
| } catch(err) {} | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment