Skip to content

Instantly share code, notes, and snippets.

@Poltergeist

Poltergeist/dabblet.css

Created March 4, 2013 14:15
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 Poltergeist/5082485 to your computer and use it in GitHub Desktop.
Save Poltergeist/5082485 to your computer and use it in GitHub Desktop.
Download ZIP
Knight Rider Flavoured Animation
Raw
dabblet.css
/**
* Knight Rider Flavoured Animation
**/
div{
background: rgb(0,0,0); /* Old browsers */
background: -moz-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(255,0,0,1) 35%, rgba(255,0,0,1) 65%, rgba(0,0,0,1) 100%),#000; /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,1)), color-stop(35%,rgba(255,0,0,1)), color-stop(65%,rgba(255,0,0,1)), color-stop(100%,rgba(0,0,0,1))),#000; /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(255,0,0,1) 35%,rgba(255,0,0,1) 65%,rgba(0,0,0,1) 100%),#000; /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(255,0,0,1) 35%,rgba(255,0,0,1) 65%,rgba(0,0,0,1) 100%),#000; /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(255,0,0,1) 35%,rgba(255,0,0,1) 65%,rgba(0,0,0,1) 100%),#000; /* IE10+ */
background: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(255,0,0,1) 35%,rgba(255,0,0,1) 65%,rgba(0,0,0,1) 100%),#000; /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=1 ),#000; /* IE6-9 */
background-repeat:repeat-y;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
font-size:65px;
font-family:'helvetica';
display:inline-block;
animation:scroll 5s infinite linear;
}
@keyframes scroll{
0%{
background-position:calc(0% - 250px) center;
}
50%{
background-position:calc(100% + 250px) center;
}
100%{
background-position:calc(0% - 250px) center;
}
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div>Knight Rider</div>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment