Skip to content

Instantly share code, notes, and snippets.

@olizilla
Created October 13, 2013 12:44
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 olizilla/6961915 to your computer and use it in GitHub Desktop.
Save olizilla/6961915 to your computer and use it in GitHub Desktop.
img {
width:200px;
opacity:0;
position:absolute;
top:0;
z-index:1;
}
body{
margin:0;
}
.nodebot{
margin:0;
z-index:2;
opacity: 1;
width:500px;
height:500px;
background-color: #F8E01E;
position:relative;
}
.nodebot .icon{
position:absolute;
bottom:8%;
right:8%;
width:45.6%;
height:50%;
}
.nodebot .icon * {
background: #2e2e2c;
}
.nodebot .icon .bobble{
width:12.5%;
height:12%;
border-radius: 100%;
margin:5% auto -3.8%;
}
.nodebot .antenna{
width:6%;
margin:0 auto 4%;
height:16.5%;
border-bottom-left-radius: 80% 30%;
border-bottom-right-radius: 80% 30%;
}
.nodebot .head{
width: 100%;
height: 48.5%;
border-top-left-radius: 15% 25%;
border-top-right-radius: 15% 25%;
position:relative;
}
.nodebot .head .eye{
width:18%;
height:33.5%;
margin:0 18.2%;
border-radius: 100%;
background-color: #F8E01E;
display: inline-block;
position:absolute;
top:26%;
left: 0px;
transition:all 0.1s;
}
.nodebot .eye.right{
left: auto;
right:0;
}
.nodebot .head .eye.blink {
height: 6%;
top:36%;
border-radius: 0;
background-color: #000;
}
.nodebot .neck{
border-radius: 20px;
width: 69%;
height: 6%;
margin: 3.6% auto 0;
}
.nodebot .neck:last-child{
width: 48%;
}
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class="nodebot">
<div class="icon">
<div class="bobble"></div>
<div class="antenna"></div>
<div class="head">
<div class="eye left"></div>
<div class="eye right"></div>
</div>
<div class="neck"></div>
<div class="neck"></div>
</div>
</div>
<img src="https://raw.github.com/nodebots/www/gh-pages/logo/nodebot-450x450.png"/>
</body>
</html>
setInterval(function(){
setTimeout(toggleEyes,100);
setTimeout(toggleEyes,200);
setTimeout(toggleEyes,300);
setTimeout(toggleEyes,400);
}, 6000);
function toggleEyes () {
$('.nodebot .eye').toggleClass('blink');
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment