[CSS3技术]由纯CSS打造的Android机器人

[tr][td]android的logo是一个有几个简单图形组成的机器人。本文的主要内容就是用纯CSS3技术和较少的HTML代码完成这个logo的绘制。



需要支持CSS3技术的浏览器来查看效果（ie9，火狐，谷歌或者opera都可）。

[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]

复制代码

[*].android {
[*] position: absolute;
[*] left: 320px;
[*] top: 230px;
[*]}
[*]/**** BODY ****/
[*].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 ****/
[*].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 ****/
[*].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 ****/
[*].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; }

复制代码





转载本文需注明转自HTML5中国


[/td][/tr]