css3:绘制android3蜂巢Honeycomb

 

之前写过一个类似的，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;	
}