CSS3 implements Android icons and css3android
<! DOCTYPE html>
<Html>
<Head>
<Title> CSS3 Android icon </title>
<Style>
. Android {
Position: absolute;
Left: 320px;
Top: 230px;
}
. Body {
Width: 336px;
Height: 285px;
Background-color: # A5C63B;
Border-radius: 0px 0px 30px 30px;
Position: absolute;
}
. Body: before,
. Body: after {
Background-color: # A5C63B;
Content :'';
Width: 75px;
Height: 122px;
Bottom:-122px;
Position: absolute;
Border-radius: 0px 0px 50px 50px;
}
. Body: before {left: 68px ;}
. Body: after {right: 68px ;}
. Head {
Width: 336px;
Height: 155px;
Background-color: # A5C63B;
Border-radius: 200px 200px 0px 0px;
Position: absolute;
Top:-170px;
}
. Head: before,
. Head: after {
Background-color: # A5C63B;
Content :'';
Width: 10px;
Height: 53px;
Position: absolute;
Top:-30px;
Border-radius: 20px 20px 0px 0px;
}
. Head: after {-webkit-transform: translate (63px, 0px) rotate (-30deg);-moz-transform: translate (63px, 0px) rotate (-30deg ); -o-
Transform: translate (63px, 0px) rotate (-30deg );}
. Head: before {-webkit-transform: translate (255px, 0px) rotate (30deg);-moz-transform: translate (255px, 0px) rotate (30deg);-o-
Transform: translate (255px, 0px) rotate (30deg );}
. Arms: before,
. Arms: after {
Background-color: # A5C63B;
Content :'';
Width: 75px;
Height: 233px;
Top:-8px;
Position: absolute;
Border-radius: 40px 40px 40px 40px;
}
. Arms: before {left:-90px ;}
. Arms: after {right:-90px ;}
. Eyes: before,
. Eyes: after {
Background-color: # FFFFFF;
Content :'';
Width: 27px;
Height: 27px;
Top: 68px;
Position: absolute;
Border-radius: 20px;
}
. Eyes: before {left: 78px ;}
. Eyes: after {right: 78px ;}
</Style>
</Head>
<Body>
<Div> http://www.999jiujiu.com/</div>
<Div class = "android">
<Div class = "head">
<Div class = "eyes"> </div>
</Div>
<Div class = "body">
<Div class = "arms"> </div>
</Div>
</Div>
</Body>
</Html>