Skip to content

Instantly share code, notes, and snippets.

@ryanfitton

ryanfitton/css3-android-robot-arms.html

Created August 17, 2013 21:26
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 ryanfitton/6258769 to your computer and use it in GitHub Desktop.
Save ryanfitton/6258769 to your computer and use it in GitHub Desktop.
Download ZIP
A revised copy of an earlier Gist found here: https://gist.github.com/ryanfitton/6196475/ The right arm of the Android bot now animated so that it simulates waving. A demo of this can be found here: http://codepen.io/ryanfitton/pen/xuikf or http://ryanfitton.co.uk/blog/animated-android-bot-created-in-css3-code-snippet/
Raw
css3-android-robot-arms.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>ryanfitton.co.uk - Android robot using CSS3</title>
<meta name="description" content="ryanfitton.co.uk - Android robot using CSS3">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
<style type="text/css">
body {
font-family: 'Droid Sans', sans-serif;
color:#ffffff;
}
#android-bot {
width: 700px;
margin:0 auto;
}
.antenna, #head, #android-torso, .arm, .leg {
background:#a4c739;
}
#antennas {
width: 400px;
height: 100px;
margin: 0 auto;
}
.antenna {
width: 10px;
height: 100px;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
float: left;
position: relative;
top: 40px;
}
#antenna-left {
left: 70px;
transform:rotate(-33deg);
-webkit-transform: rotate(-33deg);
-moz-transform: rotate(-33deg);
-ms-transform: rotate(-33deg);
-o-transform: rotate(-33deg);
}
#antenna-right {
left: 310px;
transform:rotate(33deg);
-webkit-transform: rotate(33deg);
-moz-transform: rotate(33deg);
-ms-transform: rotate(33deg);
-o-transform: rotate(33deg);
}
#head {
width: 400px;
margin: 0 auto;
height: 200px;
border-radius: 200px 200px 0 0;
-webkit-border-radius: 200px 200px 0 0;
-moz-border-radius: 200px 200px 0 0;
-ms-border-radius: 200px 200px 0 0;
-o-border-radius: 200px 200px 0 0;
margin-bottom: 10px;
}
.eye {
width: 30px;
height: 30px;
border-radius: 15px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px;
background-color: white;
float: left;
position: relative;
top: 100px;
}
#eye-left {
left: 90px;
}
#eye-right {
left: 250px;
}
.android-body {
width: 620px;
height: 400px;
margin: 0 auto;
text-align: center;
}
#upper.android-body {
position: relative;
}
#android-torso {
position: relative;
width: 400px;
height: 400px;
float: left;
border-radius: 0 0 50px 50px;
-webkit-border-radius: 0 0 50px 50px;
-moz-border-radius: 0 0 50px 50px;
-ms-border-radius: 0 0 50px 50px;
-o-border-radius: 0 0 50px 50px;
margin:0 10px;
}
#android-text p {
position: absolute;
margin: 0;
}
.bottom#android-text p {
font-size: 95px;
bottom:20px;
left: 30px;
}
.right#android-text p {
font-size: 80px;
bottom:140px;
right: -90px;
transform:rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
}
.arm {
width: 100px;
height: 325px;
float: left;
border-radius: 100px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
-ms-border-radius: 100px;
-o-border-radius: 100px;
}
#arm-right {
-webkit-animation: wave 2s ease-in-out infinite;
-moz-animation: wave 2s ease-in-out infinite;
animation: wave 2s ease-in-out infinite;
top:-260px;
right: -10px;
position: absolute;
}
@-webkit-keyframes wave {
0% {
-webkit-transform: rotate(0deg) translate(0px);
transform: rotate(0deg) translate(0px);
}
50% {
-webkit-transform: rotate(30deg) translate(50px);
transform: rotate(30deg) translate(50px);
}
100% {
-webkit-transform: rotate(0deg) translate(0px);
transform: rotate(0deg) translate(0px);
}
}
@-moz-keyframes wave {
0% {
-moz-transform: rotate(0deg) translate(0px);
transform: rotate(0deg) translate(0px);
}
50% {
-moz-transform: rotate(30deg) translate(50px);
transform: rotate(30deg) translate(50px);
}
100% {
-moz-transform: rotate(0deg) translate(0px);
transform: rotate(0deg) translate(0px);
}
}
@keyframes wave {
0% {
-moz-transform: rotate(0deg) translate(0px);
-webkit-transform: rotate(0deg) translate(0px);
-o-transform: rotate(0deg) translate(0px);
transform: rotate(0deg) translate(0px);
}
50% {
-moz-transform: rotate(30deg) translate(50px);
-webkit-transform: rotate(30deg) translate(50px);
-o-transform: rotate(30deg) translate(50px);
transform: rotate(30deg) translate(50px);
}
100% {
-moz-transform: rotate(0deg) translate(0px);
-webkit-transform: rotate(0deg) translate(0px);
-o-transform: rotate(0deg) translate(0px);
transform: rotate(0deg) translate(0px);
}
}
#lower.android-body {
width: 400px;
height: 200px;
margin: 0 auto;
}
.leg {
width: 100px;
height: 200px;
float: left;
border-radius: 0 0 100px 100px;
-webkit-border-radius: 0 0 100px 100px;
-moz-border-radius: 0 0 100px 100px;
-ms-border-radius: 0 0 100px 100px;
-o-border-radius: 0 0 100px 100px;
}
#leg-left {
margin-left: 75px;
}
#leg-right {
margin-left: 50px;
}
</style>
</head>
<body>
<!-- Created: 09/08/2013. Added CSS3 rotating arm 17/08/2013. Requires a modern browser such as Google Chrome, Mozilla FireFox or Apple Safari. Tested on Google Chrome Version 28.0.1500.95 m -->
<div id="android-bot"><!-- Start Android Bot -->
<div id="antennas"><!-- Antennas -->
<div id="antenna-left" class="antenna"></div>
<div id="antenna-right" class="antenna"></div>
</div>
<div id="head"><!-- Head and Eyes -->
<div id="eye-left" class="eye"></div>
<div id="eye-right" class="eye"></div>
</div>
<div id="upper" class="android-body"><!-- Upper Body, Text and Arms -->
<div id="arm-left" class="arm"></div>
<div id="android-torso">
<div id="android-text" class="bottom"><!-- class="bottom" or class="top" Info: To change text position, alter class from 'bottom' to 'right' -->
<p>Android</p>
</div>
</div>
<div id="arm-right" class="arm">
</div>
</div>
<div id="lower" class="android-body"><!-- Legs -->
<div id="leg-left" class="leg"></div>
<div id="leg-right" class="leg"></div>
</div>
</div><!-- End Android Bot -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment