css3绘制百度的小度熊

/*嘴巴*/
.head .mouse {
width: 99px;
height: 76px;
background-color: #f7f9e5;
position: absolute;
left: 50%;
transform: translate(-50%,0);
border-radius: 50% / 50%;
top: 187px;
}

鼻子

虽然嘴巴就是一个普通的椭圆，但是鼻子比较特殊，鼻子我们可以看作是一个半椭圆+三角形组成。

 

知识点又来了，怎么样用css画半椭圆和三角形呢？

我们可以利用 border-radius: 50%/100% 100% 0 0; 来实现半椭圆的绘制。

 

我们利用将width和height设置为0，通过border属性来实现三角形的绘制。

 

我为了操作方便，在给鼻子设置来一个容器，使其居中，便于调整。

/*鼻子容器*/
.head .nose {
width: 18px;
height: 14px;
position: absolute;
left: 50%;
margin-left: -9px;
top: 13px;
}
/* 鼻子上部分-半椭圆*/
.nose .noseTop {
width: 18px;
height: 8px;
background-color: #511313;
border-radius: 50%/100% 100% 0 0;
}
 /* 鼻子下部分-三角形*/
.nose .noseBottom {
width: 0;
height: 0;
border-width: 9px 9px 0;
border-style: solid;
border-color: #511313 transparent transparent;
position: relative;
}

耳朵内部

终于完成了头部的操作，结果发现耳朵少了点什么，原来耳朵少了内部的要素，我们就分别给耳朵内部加点东西。

 

/* 左耳朵内部*/
.earLeft .earCon {
width: 40px;
height: 60px;
background-color: #eed8c5;
border-radius: 50%/ 40% 40% 30% 30%;
margin-left: 17px;
margin-top: 15px;
transform: rotate(-3deg);
}
 /*右耳朵内部*/
.earRight .earCon {
width: 40px;
height: 60px;
background-color: #eed8c5;
border-radius: 50%/ 40% 40% 30% 30%;
margin-left: 17px;
margin-top: 15px;
transform: rotate(-3deg);
}

辅助要素

小度熊的头部绘制完了，但是耳朵的地方还不够完美，因为头部的轮廓线把耳朵遮住了，我们想让头部和耳朵连在一起，这就用到了我们的辅助要素。我们可以把辅助要素设置成和头部一样的颜色，将头部与耳朵间的轮廓线盖住，这样就看起来好多了。