Skip to content

Instantly share code, notes, and snippets.

/dabblet.css

Created May 2, 2012 07:30
Show Gist options
  • Save anonymous/2574800 to your computer and use it in GitHub Desktop.
Save anonymous/2574800 to your computer and use it in GitHub Desktop.
Download ZIP
these rules only apply to first fan
Raw
dabblet.css
body {
width: 580px;
margin: 0 auto;
font-family: sans-serif;
font-size: 12px;
color: #666;
}
.fan {
position: relative;
width: 120px;
height: 120px;
-webkit-transition: all .333s ease-in-out;
-moz-transition:all .333s ease-in-out;
transition: all .333s ease-in-out;
margin: 12px;
float: left;
}
.fan div {
position: absolute;
top: 0;
left: 0;
background: rgba(255,255,100,0.6) ;
width: 100px;
height: 100px;
-webkit-transition: all .333s ease-in-out;
-moz-transition: all .333s ease-in-out;
transition: all .333s ease-in-out;
}
.fan div:first-child {
background: rgba(128,225,225,0.3) ;
}
.fan > div+div {
background: rgba(128,200,255,0.6) ;
}
.fan div+div+div {
background: rgba(128,200,128,0.6) ;
}
.fan div+div+div+div {
background: rgba(228,255,100,0.6) ;
}
.fan:hover {
-webkit-transform: rotate(-40deg);
-moz-transform: rotate(-40deg);
top:10px;
}
.fan:hover div {
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
transform: rotate(10deg);
width: 120px;
height: 120px;
top: -10px;
left: 5px;
box-shadow: 0 2px 10px rgba(128,128,128,0.3);
}
/* these rules only apply to first fan*/
.fan:hover div+div {
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
transform: rotate(20deg);
top: -15px;
left: 10px;
}
.fan:hover div+div+div {
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
transform: rotate(30deg);
top: -20px;
left: 15px;
}
.fan:hover div+div+div+div {
-webkit-transform: rotate(40deg);
-moz-transform: rotate(40deg);
transform: rotate(40deg);
top: -25px;
left: 20px;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<h1>CSS Fans </h1>
<div class="fan">
<div>2</div>
<div>3</div>
<div>4</div>
<div>foo</div>
</div>
<div class="fan">
<div>2
<div>3
<div>4
<div>bar</div>
</div>
</div>
</div>
</div>
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