Skip to content

Instantly share code, notes, and snippets.

@crazyrohila

crazyrohila/dabblet.css

Created March 1, 2013 12:47
Show Gist options
  • Save crazyrohila/5064419 to your computer and use it in GitHub Desktop.
Save crazyrohila/5064419 to your computer and use it in GitHub Desktop.
Download ZIP
moving man.
Raw
dabblet.css
/**
* moving man.
*/
#man {
position: relative;
width:350px;
transform: scale(.4);
left: -15%;
}
@keyframes moving {
from { transform: translate(0); }
to {transform: translate(3200px); }
}
#walking {
animation: moving 5s ease-in infinite;
}
@keyframes rotate {
0%{transform: rotate(0deg);}
100%{transform: rotate(360deg);}
}
#rotate {
animation: rotate 5s infinite;
}
/** face.**/
#face {
width: 70px;
height: 65px;
border:5px solid brown;
border-radius: 50%;
position: relative;
left: 36%;
}
.inner {
position:absolute;
}
.eye {
width:6px;
height:3px;
border: 2px solid black;
border-radius: 50%;
float: left;
top:25%;
}
.lefteye {
left:25%;
}
.righteye {
right:25%;
}
.nose {
width:5px;
height:25px;
background: brown;
top:25%;
left:47%;
}
.mouth {
width:30px;
height:5px;
background: brown;
left: 30%;
bottom: 15%;
border-bottom-left-radius: 20px 10px;
border-bottom-right-radius: 20px 10px;
}
#neck {
width:30px;
height:20px;
background: brown;
position:relative;
left:43%;
}
/** hands.**/
.bisep {
width:40px;
height:25px;
position: absolute;
top: 22%;
background: green;
}
.bisep.lefthand {
left:9%;
border-top-left-radius: 40px 30px;
}
.bisep.righthand {
right: 12%;
border-top-right-radius: 40px 30px;
}
.arm {
width: 30px;
height: 120px;
position: absolute;
top: 25%;
background-image: linear-gradient(top, green, gray);
transform-origin: top;
}
.arm.lefthand {
left: 9%;
border-top-left-radius: 10px 20px;
transform: rotate(10deg);
}
.arm.righthand {
right: 12%;
border-top-right-radius: 10px 20px;
transform: rotate(-10deg);
}
/** main body. **/
#main-body {
width:200px;
height:200px;
background-image: linear-gradient(top, gray, green);
position: relative;
left:20%;
border-radius: 20px;
}
.button{
width:5px;
height:5px;
border: 2px solid black;
left: 45%;
top: 10%;
border-radius:50%;
}
.button:nth-child(2) {
top: 30%;
}
.button:nth-child(3) {
top: 50%;
}
.button:nth-child(4) {
top: 70%;
}
/** legs and foot.**/
#legs {
width: 200px;
height: 130px;
position: relative;
left: 20%;
}
.leg {
width: 30px;
height: 100px;
background: gray;
position: absolute;
}
.leg.leftleg {
left: 20%;
}
.leg.rightleg {
right: 20%;
}
.foot {
width: 60px;
height: 30px;
background: black;
position: absolute;
top: 100px;
border-top-right-radius: 30px;
}
.foot.leftleg{
left: 20%;
}
.foot.rightleg {
right: 5%;
}
#board {
width: 300px;
height: 50px;
background: red;
position: relative;
left: 10%;
}
.tyre {
width: 40px;
height: 40px;
border-radius:50%;
background-image: linear-gradient(top, red, green);
float: left;
position: absolute;
top: 100%;
left: 5%;
transform: rotate(540deg);
transition: transform 10s;
}
.tyre:nth-child(2) {
left: 30%;
}
.tyre:nth-child(3) {
left: 55%;
}
.tyre:nth-child(4) {
left: 80%;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div id="man">
<div id="walking">
<div id="rotate">
<div id="face">
<div class="eye lefteye inner"></div>
<div class=" nose inner"></div>
<div class="eye righteye inner"></div>
<div class="mouth inner"></div>
</div>
<div id="neck"></div>
<div class="bisep lefthand"></div>
<div class="arm lefthand"></div>
<div class="bisep righthand"></div>
<div class="arm righthand"></div>
<div id="main-body">
<div class="button inner"></div>
<div class="button inner"></div>
<div class="button inner"></div>
<div class="button inner"></div>
</div>
<div id="legs">
<div class="leg leftleg"></div>
<div class="foot leftleg"></div>
<div class="leg rightleg"></div>
<div class="foot rightleg"></div>
</div>
<div id="board">
<div class="tyre"></div>
<div class="tyre"></div>
<div class="tyre"></div>
<div class="tyre"></div>
</div>
</div>
</div>
</div>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"separate","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