Skip to content

Instantly share code, notes, and snippets.

@moebiuseye

moebiuseye/dabblet.css

Created June 26, 2012 16: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 moebiuseye/2997123 to your computer and use it in GitHub Desktop.
Save moebiuseye/2997123 to your computer and use it in GitHub Desktop.
Download ZIP
Untitled
Raw
dabblet.css
body{
background-color: black;
position: fixed;
display: table-cell;
vertical-align: middle;
min-height: 10em;
height: 100%;
width: 100%;
}
@keyframes spin{
0%{ transform: scale(1) rotate(0deg) ; box-shadow: 0em 0em 0em white;}
10%{ transform: scale(1.2) rotate(20deg) ; box-shadow: 0em 0em 0em white;}
20%{ transform: scale(1.5) rotate(45deg) ; box-shadow: 0em 0em 0em white;}
30%{ transform: scale(1.9) rotate(75deg) ; box-shadow: 0em 0em 0em white;}
40%{ transform: scale(2.4) rotate(110deg) ; box-shadow: 0em 0em 0em white;}
50%{ transform: scale(3.0) rotate(150deg) ; box-shadow: 0em 0em 0em white;}
60%{ transform: scale(3.7) rotate(180deg) ; box-shadow: 0em 0em 0em white;}
70%{ transform: scale(3.7) rotate(240deg) ; box-shadow: 0em 0em 1em white;}
80%{ transform: scale(3.7) rotate(360deg) ; box-shadow: 0em 0em 1.5em white;}
90%{ transform: scale(3.7) rotate(720deg) ; box-shadow: 0em 0em 3em white;}
}
@-moz-keyframes spin{
0%{ -moz-transform: scale(1) rotate(0deg) ; box-shadow: 0em 0em 0em white;}
10%{ -moz-transform: scale(1.2) rotate(20deg) ; box-shadow: 0em 0em 0em white;}
20%{ -moz-transform: scale(1.5) rotate(45deg) ; box-shadow: 0em 0em 0em white;}
30%{ -moz-transform: scale(1.9) rotate(75deg) ; box-shadow: 0em 0em 0em white;}
40%{ -moz-transform: scale(2.4) rotate(110deg) ; box-shadow: 0em 0em 0em white;}
50%{ -moz-transform: scale(3.0) rotate(150deg) ; box-shadow: 0em 0em 0em white;}
60%{ -moz-transform: scale(3.7) rotate(180deg) ; box-shadow: 0em 0em 0em white;}
70%{ -moz-transform: scale(3.7) rotate(240deg) ; box-shadow: 0em 0em 1em white;}
80%{ -moz-transform: scale(3.7) rotate(360deg) ; box-shadow: 0em 0em 1.5em white;}
90%{ -moz-transform: scale(3.7) rotate(720deg) ; box-shadow: 0em 0em 3em white;}
}
@-webkit-keyframes spin{
0%{ -webkit-transform: scale(1) rotate(0deg) ; box-shadow: 0em 0em 0em white;}
10%{ -webkit-transform: scale(1.2) rotate(20deg) ; box-shadow: 0em 0em 0em white;}
20%{ -webkit-transform: scale(1.5) rotate(45deg) ; box-shadow: 0em 0em 0em white;}
30%{ -webkit-transform: scale(1.9) rotate(75deg) ; box-shadow: 0em 0em 0em white;}
40%{ -webkit-transform: scale(2.4) rotate(110deg) ; box-shadow: 0em 0em 0em white;}
50%{ -webkit-transform: scale(3.0) rotate(150deg) ; box-shadow: 0em 0em 0em white;}
60%{ -webkit-transform: scale(3.7) rotate(180deg) ; box-shadow: 0em 0em 0em white;}
70%{ -webkit-transform: scale(3.7) rotate(240deg) ; box-shadow: 0em 0em 1em white;}
80%{ -webkit-transform: scale(3.7) rotate(360deg) ; box-shadow: 0em 0em 1.5em white;}
90%{ -webkit-transform: scale(3.7) rotate(720deg) ; box-shadow: 0em 0em 3em white;}
}
.ball {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 25%;
width: 3em;
border-radius: 1.5em 1.5em 1.5em 1.5em;
box-shadow: 0em 0em 0.5em white;
animation: spin 1s;
-moz-animation: spin 1s;
-webkit-animation: spin 0.5s;
transform: scale(3.7) rotate(720deg) ;
-moz-transform: scale(3.7) rotate(720deg) ;
-webkit-transform: scale(3.7) rotate(720deg) ;
transform-orgin: 50% 50%;
-moz-transform-orgin: 50% 50%;
-webkit-transform-orgin: 50% 50%;
}
Raw
dabblet.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html'; charset='UTF-8' />
<meta name='description' content='Lorem ipsum dolor sit amet'>
<meta name='keywords' content='Lorem ipsum dolor sit amet'>
<meta name='author' content='moebius_eye'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<link rel='stylesheet' type='text/css' href='style.css'>
<script src='../first_attempt/ajaxian.js' type='text/javascript'></script>
<script src='../first_attempt/index.js' type='text/javascript'></script>
<title>Moebius_eye's lair</title>
</head>
<body>
<img class='ball' src='http://3.bp.blogspot.com/-xTa7vJfu02c/Tz6VgR0Z5DI/AAAAAAAAA2w/f79ly0221_U/s1600/awesome-face.png' />
<script type='text/javascript'>
hashhaschanged();
</script>
</body>
</html>
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment