Skip to content

Instantly share code, notes, and snippets.

@pawelmhm
Created July 1, 2013 14:58
Embed
What would you like to do?
almost a bicycle
/* almost a bicycle */
#bike {
width:400px;
height:250px;
position:relative;
margin:20px 0;
-webkit-transition: -webkit-transform 3s linear;
}
#bike:hover {
-webkit-transform:translateX(500px);
}
#backwheel, #frontwheel {
width:120px;
height:120px;
border:8px solid black;
position:absolute;
top:68px;
border-radius:50%;
-webkit-transition: -webkit-transform 3s ease-out;
}
#frontwheel:hover, #backwheel:hover {
-webkit-transform:rotate(720deg);
}
#frontwheel {
left:258px;
}
#backwheel {
left:35px;
}
.center {
position:absolute;
top:58px;
left:58px;
width:10px;
height:10px;
border-radius:50%;
background-color:black;
}
div[class*=spoke] {
height:1px;
width:62px;
background-color:black;
position:absolute;
top:60px;
-webkit-transform-origin:100% 50%;
}
.spoke1 {
-webkit-transform: rotate(80deg);
}
.spoke2 {
-webkit-transform: rotate(160deg);}
.spoke3 {
-webkit-transform: rotate(220deg);
}
.spoke4 {
-webkit-transform: rotate(300deg);
}
.spoke5 {
-webkit-transform:rotate(0deg);}
<!-- content to be placed inside <body>…</body> -->
<div id="bike">
<div id="frametop"></div>
<div id="framechainstay"></div>
<div id="framefork"></div>
<div id="frameseattube"></div>
<div id="frameseatstay"></div>
<div id="framedowntube"></div>
<div id="seat"></div>
<div id="handlebars"></div>
<div id="backwheel">
<div class="center"></div>
<div class="spoke1"></div>
<div class="spoke2"></div>
<div class="spoke3"></div>
<div class="spoke4"></div>
<div class="spoke5"></div>
</div>
<div id="frontwheel">
<div class="center"></div>
<div class="spoke1"></div>
<div class="spoke2"></div>
<div class="spoke3"></div>
<div class="spoke4"></div>
<div class="spoke5"></div>
</div>
</div>
// alert('Hello world!');
{"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