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/
<!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