Skip to content

Instantly share code, notes, and snippets.

@SonyaMoisset

SonyaMoisset/Moving Android Logo.markdown

Created August 24, 2015 14:48
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 SonyaMoisset/c11740d3501f14869a48 to your computer and use it in GitHub Desktop.
Save SonyaMoisset/c11740d3501f14869a48 to your computer and use it in GitHub Desktop.
Download ZIP
Moving Android Logo
Raw
index.html
<html>
<body>
<div class="android">
<div class="head">
<div class="left_antenna"></div>
<div class="right_antenna"></div>
<div class="left_eye"></div>
<div class="right_eye"></div>
</div>
<div class="body">
<div class="left_arm"></div>
<div class="right_arm"></div>
<div class="left_leg"></div>
<div class="right_leg"></div>
</div>
</div>
</body>
</html>
Raw
Moving Android Logo.markdown
Raw
style.css
div {
margin: 0;
padding: 0;
}
div div {
background: #000;
position: relative;
}
.android {
height: 400px;
width: 335px;
margin: 100px auto;
}
.head {
width: 220px;
height: 100px;
top: 30px;
border-radius: 110px 110px 0 0;
-moz-border-radius: 110px 110px 0 0;
-webkit-border-radius: 110px 110px 0 0;
-webkit-transition: all 0.1s ease-in;
}
.left_eye,
.right_eye {
background: #fff;
width: 20px;
height: 20px;
position: absolute;
top: 40px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.left_eye {
left: 50px;
}
.right_eye {
right: 50px;
}
.left_antenna,
.right_antenna {
width: 5px;
height: 50px;
position: absolute;
top: -35px;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}
.left_antenna {
left: 50px;
transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
}
.right_antenna {
right: 50px;
transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
}
.body {
width: 220px;
height: 185px;
top: 40px;
border-radius: 0 0 25px 25px;
-webkit-border-radius: 0 0 25px 25px;
-moz-border-radius: 0 0 25px 25px;
}
.left_arm,
.right_arm,
.left_leg,
.right_leg {
width: 50px;
position: absolute;
-webkit-transition: all 0.1s ease-in;
}
.left_arm,
.right_arm {
height: 150px;
border-radius: 25px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
}
.left_leg,
.right_leg {
height: 80px;
top: 182px;
border-radius: 0 0 25px 25px;
-moz-border-radius: 0 0 25px 25px;
-webkit-border-radius: 0 0 25px 25px;
}
.left_arm {
left: -60px;
}
.right_arm {
right: -60px;
}
.left_leg {
left: 45px;
}
.right_leg {
right: 45px;
}
.head:hover {
-webkit-transform: rotate(-5deg) translate(-5px, -10px);
-transform: rotate(-5deg) translate(-5px, -10px);
-moz-transform: rotate(-5deg) translate(-5px, -10px);
}
.left_arm:hover {
-webkit-transform: rotate(15deg) translate(-15px, 0);
-transform: rotate(15deg) translate(-15px, 0);
-moz-transform: rotate(15deg) translate(-15px, 0);
}
.right_arm:hover {
-webkit-transform: rotate(-30deg) translate(30px, 0);
-transform: rotate(-30deg) translate(30px, 0);
-moz-transform: rotate(-30deg) translate(30px, 0);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment