/css3-android-robot-arms.html
Created Aug 17, 2013
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