css3绘制百度的小度熊

2020-05-08 08:19:04易采站长站整理

 


/*左侧辅助要素*/
.head .arcLeft {
position: absolute;
top: 36px;
left: 23px;
width: 80px;
height: 30px;
background-color: #e1b79b;
border-radius: 50%/ 50%;
transform: rotate(-45deg);
}

/*右侧辅助要素*/
.head .arcRight {
position: absolute;
top: 34px;
right: 16px;
width: 80px;
height: 30px;
background-color: #e1b79b;
border-radius: 50%/ 50%;
transform: rotate(43deg);
}

身体

终于完成了头部的绘制,接下来就开始身体的绘制,同样需要先分析一下身体里包括那些部分,我们可以看到身体里主要包括胳膊,肚子和腿。


 

我们为了看清楚各部分位置,可以先给身体容器加上背景颜色,最后再去掉。


/*度熊身体*/
.body {
width: 208px;
height: 217px;
margin: -10px auto;
position: relative;
}

胳膊

我们先来添加小度熊的胳膊,最后位置可以再微调。

 


/*左侧胳膊*/
.body .armLeft {
width: 53px;
height: 150px;
background-color: #e1b79b;
border: 2px solid #a57662;
border-radius: 50% 50%/60% 30%;
transform: rotate(10deg);
left: 6px;
position: absolute;
}

/*右侧胳膊*/
.body .armRight {
width: 53px;
height: 150px;
background-color: #e1b79b;
border: 2px solid #a57662;
border-radius: 50% 50%/60% 30%;
transform: rotate(-14deg);
position: absolute;
right: 6px;
}

肚子

绘制好胳膊我们就可以绘制小度熊,肉嘟嘟的肚子了。


 

知识点来了,这里绘制的肚子有一点想鸡蛋形,其实还是利用border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;这个属性来设置的,通过改变半径大小,实现这种鸡蛋形的图案绘制。

之前说的可能漏了一句,我们的要素大部分是基于position: absolute来定位的,因为这个属性可以设置层级,便于我们图案的压盖。这里的肚子就要设置高一点的层级,压盖住之前绘制的胳膊图案。

 


/*肚子*/
.body .tummy {
width: 144px;
height: 200px;