?

之前寫過一個類似的，css3繪制android機器人圖形。谷歌最近發布了android3，這次的圖形挺好看的，很多地方都用到圓角，所以就想到用css3來實現。點擊觀看演示 隔天再做了些修改，比之前的好看很多了。頭部更圓了,點擊觀看演示

?

主要做的變動，去掉class為head的層，和body層合并在一起，形成一個整體，頭部下面的空白處用白色的條塊覆蓋。

1.html代碼如下

<div class="android"> <div class="body"> <div class="eye-left"></div> <div class="eye-right"></div> <div class="ear-left"></div> <div class="ear-right"></div> <div class="fringe1"></div> <div class="fringe2"></div> <div class="fringe3"></div> <div class="fringe4" style="border-left:none;border-right:none"></div> <div class="needle1"></div> <div class="needle2" style="border:none"></div> <div class="needle3" style="border:none"></div> </div> <div class="wing"> <div class="wing-left"></div> <div class="wing-right"></div> </div> </div>

2.css代碼如下

.android{ width:480px; margin:0 auto; position:relative; } .android div{ position:absolute; border:2px #27b5e7 solid; } .eye-left,.eye-right{ width:18px; height:18px; border-radius:9px; background:#27b5e7; top:28px; } .eye-left{ left:35px; } .eye-right{ right:35px; } .ear-left,.ear-right{ width:6px; height:40px; border-radius:3px; background:#000; top:-25px; } .ear-left{ -webkit-transform:rotate(-35deg); -moz-transform:rotate(-35deg); -o-transform:rotate(-35deg); transform:rotate(-35deg); left:20px; } .ear-right{ -webkit-transform:rotate(35deg); -moz-transform:rotate(35deg); -o-transform:rotate(35deg); transform:rotate(35deg); right:20px; } .body{ width:176px; height:300px; background:#000; border-radius:88px; z-index:3; top:214px; left:148px; } .fringe1,.fringe2,.fringe3{ background:#27b5e7; background:-webkit-gradient(linear, 0% 0%, 100% 0%, from(#27B5E7), to(#27B5E7), color-stop(.4,#004579),color-stop(.6,#004579)); background:-moz-linear-gradient(100% 0% 180deg,#27B5E7, #004579, #27B5E7 100%); width:172px; height:37px; border:none; } .fringe1{ top:83px; } .fringe2{ top:156px; } .fringe3{ top:227px; border-radius:0 0 30px 30px; } .fringe4{ background:#fff; width:180px; height:5px; top:75px; left:-2px; } .needle1{ width:26px; height:69px; background:#0076b3; background:-webkit-gradient(linear, 0% 0%, 100% 0%, from(#27B5E7), to(#27B5E7), color-stop(.4,#004579),color-stop(.6,#004579)); background:-moz-linear-gradient(100% 0% 180deg,#27B5E7, #004579, #27B5E7 100%); bottom:-72px; left:73px; } .needle2,.needle3{ width:40px; height:140px; border-radius:20px/70px; background:#fff; border:none; bottom:-140px; } .needle2{ left:47px; } .needle3{ right:47px; } .wing,.wing-left,.wing-right{ background:#d6d2f3; opacity:0.8; } .wing-left,.wing-right{ width:150px; height:50px; border-radius:25px; top:35px; } .wing{ width:476px; height:74px; border-radius:37px; top:300px; } .wing-left{ -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -o-transform:rotate(-45deg); transform:rotate(-45deg); left:45px; } .wing-right{ -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg); right:49px; }

轉載于:https://www.cnblogs.com/wenbinzhou/archive/2011/02/05/1949284.html

總結

以上是生活随笔為你收集整理的css3:绘制android3蜂巢Honeycomb的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。