Skip to content

Instantly share code, notes, and snippets.

@daviddarnes

daviddarnes/dabblet.html

Created May 24, 2012 21:49
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 daviddarnes/2784430 to your computer and use it in GitHub Desktop.
Save daviddarnes/2784430 to your computer and use it in GitHub Desktop.
Download ZIP
To the Batmobile!
Raw
dabblet.html
<!DOCTYPE html>
<style>
body, html {
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
background: black;
}
.photo {
-webkit-animation: spin .8s linear infinite;
}
div {
width: 100%;
height: 100%;
position: absolute;
background: url(http://dl.dropbox.com/u/17172969/photo.jpg) center;
}
.one {
z-index: 10;
opacity: 0.1;
-webkit-transform: rotate(45deg);
}
.two {
z-index: 9;
opacity: 0.2;
-webkit-transform: rotate(40deg);
}
.three {
z-index: 8;
opacity: 0.3;
-webkit-transform: rotate(35deg);
}
.four {
z-index: 7;
opacity: 0.4;
-webkit-transform: rotate(30deg);
}
.five {
z-index: 6;
opacity: 0.5;
-webkit-transform: rotate(25deg);
}
.six {
z-index: 5;
opacity: 0.6;
-webkit-transform: rotate(20deg);
}
.seven {
z-index: 4;
opacity: 0.7;
-webkit-transform: rotate(15deg);
}
.eight {
z-index: 3;
opacity: 0.8;
-webkit-transform: rotate(10deg);
}
.nine {
z-index: 2;
opacity: 0.9;
-webkit-transform: rotate(5deg);
}
.ten {
z-index: 1;
opacity: 1;
-webkit-transform: rotate(0deg);
}
span {
z-index: 5;
position: relative;
display: block;
height: 100%;
width: 100%;
background: url(http://dl.dropbox.com/u/17172969/symbol.svg) center no-repeat;
-webkit-animation: scale 1s ease-in-out alternate infinite;
-webkit-filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.3));
}
@-webkit-keyframes scale {
0% {-webkit-transform: scale(0.01);}
100% {-webkit-transform: scale(8);}
}
@-webkit-keyframes spin {
0% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);}
}
</style>
<body>
<div class="photo">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
<div class="six"></div>
<div class="seven"></div>
<div class="eight"></div>
<div class="nine"></div>
<div class="ten"></div>
</div>
<span></span>
</body>
</html>
Raw
settings.json
{"view":"split-vertical","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