Skip to content

Instantly share code, notes, and snippets.

@sashareds

sashareds/dabblet.css

Forked from alexmwalker/dabblet.css
Created February 23, 2012 18:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save sashareds/1894375 to your computer and use it in GitHub Desktop.
Save sashareds/1894375 to your computer and use it in GitHub Desktop.
Download ZIP
Google's Doodle and Why My Brain Hertz
Raw
dabblet.css
/**
* Google's Doodle and Why My Brain Hertz
*/
#wavescreen{
width:380px;
height:223px;
margin: 100px auto;
border:1px #ddd dashed;
background: url(http://sitepointstatic.com/examples/css3/animation/hertz.png);
animation: hertz 4s infinite linear;
position:relative;
}
#wavescreen:before, #wavescreen:after{
content:"";
display:block;
position:absolute;
top:0;
left:-10px;
width:10px;
height:223px;
background: #fff;
box-shadow:
0px 0px 10px #fff,
0px 0px 10px #fff,
0px 0px 20px #fff,
0px 0px 20px #fff;
}
#wavescreen:after{
left:100%;
}
@keyframes hertz {
0% {background-position:0px 0px;}
100% {background-position:-380px 0px;}
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div id="wavescreen"></div>
Raw
settings.json
{"view":"split","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment