由纯CSS打造的Android机器人

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

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

1. <div class="android">
   
2.     <div class="head">
   
3.         <div class="eyes"></div>
   
4.     </div>
   
5.     <div class="body">
   
6.         <div class="arms"></div>
   
7.     </div>
   
8. </div>

复制代码

1. .android {
   
2.     position: absolute;
   
3.     left: 320px;
   
4.   top: 230px;
   
5. }
   
6. /**** BODY ****/
   
7. .body {
   
8.     width: 336px;
   
9.     height: 285px;
   
10.     background-color: #A5C63B;
    
11.     border-radius: 0px 0px 30px 30px;
    
12.     position: absolute;
    
13. }
    
14. .body:before,
    
15. .body:after {
    
16.     background-color: #A5C63B;
    
17.     content: '';
    
18.     width: 75px;   
    
19.     height: 122px;
    
20.     bottom: -122px;
    
21.     position: absolute;
    
22.     border-radius: 0px 0px 50px 50px;
    
23. }
    
24. .body:before { left: 68px; }
    
25. .body:after{ right: 68px; }
    
26. /**** HEAD ****/
    
27. .head {
    
28.     width: 336px;
    
29.     height: 155px;
    
30.     background-color: #A5C63B;
    
31.     border-radius: 200px 200px 0px 0px;
    
32.     position: absolute;
    
33.     top: -170px;
    
34. }
    
35. .head:before,
    
36. .head:after {
    
37.     background-color: #A5C63B;
    
38.     content: '';
    
39.     width: 10px;   
    
40.     height: 53px;
    
41.     position: absolute;
    
42.     top: -30px;
    
43.     border-radius: 20px 20px 0px 0px;
    
44. }
    
45. .head:after { -webkit-transform: translate(63px, 0px) rotate(-30deg); -moz-transform:translate(63px, 0px) rotate(-30deg); -o-transform:translate(63px, 0px) rotate(-30deg);  }
    
46. .head:before{ -webkit-transform: translate(255px, 0px) rotate(30deg); -moz-transform:translate(255px, 0px) rotate(30deg); -o-transform:translate(255px, 0px) rotate(30deg);  }
    
47. /**** ARMS ****/
    
48. .arms:before,
    
49. .arms:after {
    
50.     background-color: #A5C63B;
    
51.     content: '';
    
52.     width: 75px;   
    
53.     height: 233px;
    
54.     top: -8px;
    
55.     position: absolute;
    
56.     border-radius: 40px 40px 40px 40px;  
    
57. }
    
58. .arms:before { left: -90px; }
    
59. .arms:after{ right: -90px; }
    
60. /**** EYES ****/
    
61. .eyes:before,
    
62. .eyes:after {
    
63.     background-color: #FFFFFF;
    
64.     content: '';
    
65.     width: 27px;   
    
66.     height: 27px;
    
67.     top: 68px;
    
68.     position: absolute;
    
69.     border-radius: 20px;
    
70. }
    
71. .eyes:before { left: 78px; }
    
72. .eyes:after{ right: 78px; }

复制代码


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

【由纯CSS打造的Android机器人】相关文章

1. 由纯CSS打造的Android机器人

2. 创意无限：纯CSS打造各种形状钻石

3. HTML5和jQuery打造的3D相册

4. JavaScript+HTML5打造的开源Timeline

5. 施密特用早期Android手机批驳乔布斯Android抄袭论

6. 2014谷歌I/O大会：八大新品重磅发布 打造全方位Android生态圈

7. CSS3教程：background-clip和background-origin

8. 苹果称Kindle Fire加剧Android平台碎片化

9. Android 4.0 Ice Cream Sandwich中的彩蛋

10. 釜底抽薪:微软让所有Android和iOS用户在浏览器内也能体验Windows Phone ...

本文来源：https://www.51html5.com/a881.html