CSS绘制百度小熊
效果图如下：
HTML代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="./baiduBear.css"/>
</head>
<body>
<div class="content">
<div class="head">
<div class="ear leftEar">
<div class="innerEar"></div>
</div>
<div class="ear rightEar">
<div class="innerEar"></div>
</div>
<div class="face">
<div class="eye leftEye">
<div class="innerEye"></div>
</div>
<div class="eye rightEye">
<div class="innerEye"></div>
</div>
<div class="mouth">
<div class="noseTop"></div>
<div class="noseBottom"></div>
</div>
</div>
</div>
<div class="body">
<div class="neck"></div>
<div class="arm leftArm"></div>
<div class="arm rightArm"></div>
<div class="belly">
<div class="underbelly"></div>
<div class="bellyLine"></div>
</div>
<div class="leg leftLeg">
<div class="toenail"></div>
</div>
<div class="leg rightLeg">
<div class="toenail"></div>
</div>
<div class="shadow"></div>
</div>
</div>
</body>
</html>CSS代码如下：
.content {
position: absolute;
top: calc(50% - 300px);
left: calc(50% - 200px);
width: 400px;
height: 600px;
}
/* 上半部分 */
.head {
position: relative;
z-index: 10;
}
/* 脸 */
.face {
position: relative;
top: 60px;
width: 220px;
height: 180px;
margin: auto;
border: 2px solid rgb(165, 127, 107);
border-radius: 80% 80% 80% 80%/90% 90% 60% 60%;
background-color: rgb(219, 184, 159);
}
/* 耳朵 */
.ear {
position: absolute;
width: 40px;
height: 40px;
border: 2px solid rgb(165, 127, 107);
border-radius: 50%/50%;
background-color: rgb(219, 184, 159);
}
/* 左耳 */
.leftEar {
top: 65px;
left: 95px;
}
/* 右耳 */
.rightEar {
top: 65px;
right: 95px;
}
/* 耳蜗 */
.innerEar {
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%/50%;
background-color: rgb(234, 216, 199);
}
/* 左耳耳蜗 */
.leftEar > .innerEar {
top: 10px;
left: 10px;
}
/* 右耳耳蜗 */
.rightEar > .innerEar {
top: 10px;
right: 10px;
}
/* 眼睛 */
.eye {
position: absolute;
width: 40px;
height: 50px;
background-color: #fff;
}
/* 左眼 */
.leftEye {
left: 45px;
top: 60px;
border-radius: 90% 70% 90% 90%/90% 90% 90% 90%;
}
/* 右眼 */
.rightEye {
top: 60px;
right: 45px;
border-radius: 70% 90% 90% 90%/90% 90% 90% 90%;
}
/* 眼珠 */
.innerEye {
position: absolute;
width: 20px;
height: 25px;
border-radius: 90%/90%;
background-color: rgb(75, 24, 22);
}
/* 左眼珠 */
.leftEye > .innerEye {
top: 10px;
left: 13px;
}
/* 右眼珠 */
.rightEye > .innerEye {
top: 10px;
right: 13px;
}
/* 嘴 */
.mouth {
position: relative;
top: 115px;
width: 70px;
height: 50px;
margin: auto;
border-radius: 70%/70%;
background-color: rgb(247, 249, 231);
}
/* 鼻子上半部分(半个椭圆) */
.noseTop {
position: relative;
top: 8px;
width: 18px;
height: 10px;
margin: auto;
border-radius: 50%/100% 100% 0 0; /* 实现椭圆的代码 */
background-color: rgb(75, 24, 22);
}
/* 鼻子下半部分(倒三角形) */
/* 宽和高都设为0,设置border-top的颜色，其他边的颜色都为透明，设置border的宽度。倒三角形其实就是border-top */
.noseBottom {
position: relative;
top: 8px;
margin: auto;
/* 下面四行是实现倒三角形的代码 */
width: 0px;
height: 0px;
border: 9px solid;
border-color: rgb(75, 24, 22) transparent transparent transparent;
}
/* 下半部分 */
.body {
position: relative;
width: 200px;
height: 300px;
margin: auto;
}
/* 手臂 */
.arm {
position: absolute;
top: 30px;
width: 40px;
height: 130px;
border: 2px solid rgb(165, 127, 107);
background-color: rgb(219, 184, 159);
}
/* 左边手臂 */
.leftArm {
border-radius: 80% 20%/90% 20%;
}
/* 右边手臂 */
.rightArm {
right: 0px;
border-radius: 20% 80%/20% 90%;
}
/* 整个肚子 */
.belly {
position: relative;
width: 140px;
height: 200px;
margin: auto;
border: solid rgb(165, 127, 107);
/* 设置boder-bottom为0,用下面.bellyLine的border代替 */
border-width: 2px 2px 0 2px;
border-radius: 70% 70% 80% 80%/90% 90% 40% 40%;
background-color: rgb(219, 184, 159);
}
/* 白色的小肚子 */
.underbelly {
position: relative;
top: 110px;
width: 60px;
height: 70px;
margin: auto;
border-radius: 60% 60% 55% 55%/90% 90% 30% 30%;
background-color: rgb(247, 249, 231);
}
/* 腿 */
.leg {
position: absolute;
width: 38px;
height: 70px;
margin-top: -42px;
border: solid rgb(165, 127, 107);
background-color: rgb(219, 184, 159);
}
/* 左腿 */
.leftLeg {
left: 29px;
border-width: 0 0 2px 2px;
border-radius: 0 0% 70% 90%/100% 100% 50% 90%;
}
/* 右腿 */
.rightLeg {
right: 29px;
border-width: 0 2px 2px 0;
border-radius: 0 0% 90% 70%/100% 100% 90% 50%;
}
/* 脖子 */
.neck {
position: absolute;
top: 50%;
left: 50%;
z-index: 8;
transform: translate(-50%, -50%);
top: 55px;
width: 150px;
height: 40px;
background-color: rgb(219, 184, 159);
}
/* 白色的小肚子下面的线 */
.bellyLine {
position: relative;
top: -72px;
z-index: 4;
width: 130px;
height: 200px;
margin: auto;
border: 2px solid;
border-color: transparent transparent rgb(165, 127, 107) transparent;
border-radius: 70% 70% 80% 80%/90% 90% 40% 40%;
}
/* 脚指甲 */
.toenail {
position: relative;
top: 60px;
width: 18px;
height: 50px;
margin: auto;
border: 2px solid;
border-top-left-radius: 90% 20%;
border-top-right-radius: 90% 20%;
border-color: rgb(165, 127, 107) transparent transparent transparent;
}
/* 底部的阴影 */
.shadow {
width: 150px;
height: 50px;
margin: auto;
margin-top: 10px;
border-radius: 90%/90%;
background-color: rgb(233, 236, 238);
}