Android Logo implemented with css3

Android Logo implemented with pure css3 without js, with simple animations, mainly using css3 transform, transition

 
The html code is as follows:

<Div class = "android">
<Div class = "head">
<Div class = "l_ant"> </div>
<Div class = "r_ant"> </div>
<Div class = "l_eye"> </div>
<Div class = "r_eye"> </div>
</Div>
<Div class = "body">
<Div class = "l_arm"> </div>
<Div class = "r_arm"> </div>
<Div class = "l_leg"> </div>
<Div class = "r_leg"> </div>
</Div>
</Div>

The css code is as follows:
*{
Margin: 0;
Padding: 0;
}
Div {
Background: # a4ca39;
Position: relative;
}
. Android {
Width: 404px;
Height: 334px;
Margin: 100px auto;
}
. Head {
Width: 220px;
Height: 110px;
Top: 32px;
Border-radius: 110px 110px 0 0;
-Webkit-transition: all 0.1 s transfer-in;
-Moz-transition: all 0.1 s bytes-in;
-Ms-transition: all 0.1 s bytes-in;
-O-transition: all 0.1 s bytes-in;
}
. L_eye,. r_eye {
Background: # fff;
Width: 20px;
Height: 20px;
Position: absolute;
Top: 42px;
Border-radius: 10px;
}
. L_eye {
Left: 50px;
}
. R_eye {
Right: 50px;
}
. L_ant,. r_ant {
Width: 6px;
Height: 50px;
Position: absolute;
Top:-34px;
Border-radius: 3px;
}
. L_ant {
Left: 50px;
-Webkit-transform: rotate (-30deg );
-Moz-transform: rotate (-30deg );
-Ms-transform: rotate (-30deg );
-O-transform: rotate (-30deg );
Transform: rotate (-30deg );
}
. R_ant {
Right: 50px;
-Webkit-transform: rotate (30deg );
-Moz-transform: rotate (30deg );
-Ms-transform: rotate (30deg );
-O-transform: rotate (30deg );
Transform: rotate (30deg );
}
. Body {
Width: 220px;
Height: 184px;
Top: 40px;
Border-radius: 0 0 25px 25px;
}
. L_arm,. r_arm,. l_leg,. r_leg {
Width: 50px;
Position: absolute;
-Webkit-transition: all 0.1 s transfer-in;
-Moz-transition: all 0.1 s bytes-in;
-Ms-transition: all 0.1 s bytes-in;
-O-transition: all 0.1 s bytes-in;
Transition: all 01 s except-in;
}
. L_arm,. r_arm {
Height: 150px;
Border-radius: 25px;
}
. L_leg,. r_leg {
Height: 80px;
Top: 182px;
Border-radius: 0 0 25px 25px;
}
. L_arm {
Left:-58px;
}
. R_arm {
Right:-58px;
}
. L_leg {
Left: 45px;
}
. R_leg {
Right: 45px;
}
. Head: hover {
-Webkit-transform: rotate (-5deg) translate (-4px,-8px );
-Moz-transform: rotate (-5deg) translate (-4px,-8px );
-Ms-transform: rotate (-5deg) translate (-4px,-8px );
-O-transform: rotate (-5deg) translate (-4px,-8px );
Transform: rotate (-5deg) translate (-4px,-8px );
}
. L_arm: hover {
-Webkit-transform: rotate (15deg) translate (-14px, 0 );
-Moz-transform: rotate (15deg) translate (-14px, 0 );
-Ms-transform: rotate (15deg) translate (-14px, 0 );
-O-transform: rotate (15deg) translate (-14px, 0 );
Transform: rotate (15deg) translate (-14px, 0 );
}
. R_arm: hover {-webkit-transform: rotate (-30deg) translate (30px, 0 );
-Moz-transform: rotate (-30deg) translate (30px, 0 );
-Ms-transform: rotate (-30deg) translate (30px, 0 );
-O-transform: rotate (-30deg) translate (30px, 0 );
Transform: rotate (-30deg) translate (30px, 0 );

}

Preview: In firefox, chrome, opera, and ie9, preview the effect:

 

In ie6, ie7, and ie8, the support for css3 is not very good. The preview effect is as follows: