接上回,我们把蓝胖子的头画齐了,现在我们画他的项圈和铃铛
在header中添加一组div
<div class="necklet_wrap">
<div class="necklet_border"></div>
</div>
.necklet_wrap {
width: 100%;
height: 400px;
}
.necklet_border {
width: 314px;
height: 260px;
margin: -242px auto;
border-radius: 50%;
background-color: #e5002a;
border: 2px solid #1f1f1f;
}
image.png
好,我们的蓝胖子就快完成了,只需要在添加上,黄色的铃铛就可以了。
在necklet_wrap中我们添加一组div用作蓝胖子的铃铛
<div class="bell_wrap">
<div class="bell_border">
<div class="bell_rounded"></div>
<div class="bell_circle"></div>
<div class="bell_line"></div>
</div>
</div>
铃铛需要四部分组成,我们一个一个来,先规定外框的大小,再画一个球
.bell_wrap {
width: 100%;
height: 100px;
}
.bell_border {
width: 65px;
height: 65px;
margin: 228px auto 0;
border-radius: 50%;
background-color: #f5e842;
border: 2px solid #1f1f1f;
}
image.png
再添加一些铃铛的细节
.bell_rounded {
width: 65px;
height: 10px;
margin: 13px 0 0 -2px;
border-radius: 10px;
border: 2px solid #1f1f1f;
background-color: #f5e842;
}
image.png
再添加铃铛中空的圆形和分界线,让铃铛看起来更加立体
.bell_circle {
width: 14px;
height: 14px;
margin: 9px auto 0;
border-radius: 50%;
border: 2px solid #1f1f1f;
background-color: #7b6857;
}
.bell_line {
width: 3px;
height: 17px;
margin: 0 auto;
background-color: #1f1f1f;
}
image.png
好,现在我们蓝胖子就完成了~
现在我把代码整体发一下
html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<!--画布-->
<div class="main_container">
<div class="head_wrap">
<div class="header">
<div class="face">
<!--眼睛-->
<div class="eye_wrap">
<div class="eye_inner_container">
<div class="eye_left">
<div class="eye">
<div class="eyeball"></div>
</div>
</div>
<div class="eye_right">
<div class="eye">
<div class="eyeball"></div>
</div>
</div>
</div>
</div>
<!--鼻子-->
<div class="nose_wrap">
<div class="nose">
<div class="nose_white"></div>
</div>
</div>
<!--嘴-->
<div class="mouth_wrap">
<div class="mouth_line"></div>
<div class="mouth_border">
<div class="mouth_black"></div>
</div>
</div>
<!--胡子-->
<div class="mustache_wrap">
<ul class="mustache_left">
<li class="mustache_one">
<div class="mustache_line"></div>
</li>
<li class="mustache_two">
<div class="mustache_line"></div>
</li>
<li class="mustache_three">
<div class="mustache_line"></div>
</li>
</ul>
<ul class="mustache_right">
<li class="mustache_one">
<div class="mustache_line"></div>
</li>
<li class="mustache_two">
<div class="mustache_line"></div>
</li>
<li class="mustache_three">
<div class="mustache_line"></div>
</li>
</ul>
</div>
</div>
<!--项圈-->
<div class="necklet_wrap">
<div class="necklet_border"></div>
<!--铃铛-->
<div class="bell_wrap">
<div class="bell_border">
<div class="bell_rounded"></div>
<div class="bell_circle"></div>
<div class="bell_line"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
text-decoration: none;
box-sizing: border-box;
list-style: none;
}
.main_container {
width: 565px;
height: 560px;
margin: 0 auto;
overflow: hidden; }
.head_wrap {
width: 405px;
height: 650px;
margin: 40px auto 0;
overflow: hidden; }
.header {
width: 400px;
height: 365px;
background-color: #089ce4;
border-radius: 50%;
border: 2px solid #1f1f1f;
margin: 0 auto;
}
.face {
width: 360px;
height: 300px;
margin: 65px auto 0;
border-radius: 50%;
border: 2px solid #1f1f1f;
background-color: #ffffff;
position: relative;
}
.eye_wrap {
width: 100%;
height: 106px;
}
.eye_inner_container {
width: 172px;
margin: -40px auto 0;
}
.eye_left,.eye_right {
width: 86px;
height: 104px;
border: 2px solid #1f1f1f;
border-radius: 50% 50% 50% 50%/55% 60% 45% 45%;
-webkit-border-radius: 50% 50% 50% 50%/55% 60% 45% 45%;
float: left;
position: relative;
background-color: #ffffff;
}
.eye_left {
transform: rotate(12deg);
-ms-transform: rotate(12deg);
-moz-transform: rotate(12deg);
-webkit-transform: rotate(12deg);
-o-transform: rotate(12deg);
}
.eye_right {
transform: rotate(-12deg);
-ms-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
-webkit-transform: rotate(-12deg);
-o-transform: rotate(-12deg);
margin: 0 0 0 -1px;
}
.eye_left .eye, .eye_right .eye {
width: 26px;
height: 34px;
border-radius: 50%;
border: 2px solid #1f1f1f;
background-color: #1f1f1f;
}
.eye_left .eye {
position: absolute;
left: 40px;
top: 35px;
transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
}
.eye_right .eye {
position: absolute;
right: 40px;
top: 35px;
transform: rotate(10deg);
-ms-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-webkit-transform: rotate(10deg);
-o-transform: rotate(10deg);
}
.eye_left .eye .eyeball, .eye_right .eye .eyeball {
width: 8px;
height: 11px;
background-color: #ffffff;
border-radius: 50%;
margin: 8px 6px;
}
.eye_right .eyebrow {
transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
margin: 22px 0 0 2px;
}
.nose_wrap {
width: 100%;
position: relative;
}
.nose {
width: 54px;
height: 54px;
position: absolute;
top: -28px;
left: 151px;
border-radius: 50%;
background-color: #e5002a;
border: 2px solid #1f1f1f;
overflow: hidden;
}
.nose_white {
width: 14px;
height: 14px;
margin: 12px 17px;
border-radius: 50%;
background-color: #ffffff;
}
.mouth_wrap {
width: 100%;
height: 190px;
overflow: hidden;
}
.mouth_line {
width: 2px;
height: 130px;
background-color: #000000;
margin: 26px auto 0;
}
.mouth_border {
width: 100%;
height: 40px;
overflow: hidden;
transform: rotate(180deg);
}
.mouth_black {
width: 120px;
height: 100px;
margin: 8px auto 0;
border: 3px solid #1f1f1f;
border-radius: 50%;
}
.mustache_wrap {
width: 100%;
height: 150px;
padding: 0 40px;
position: absolute;
top: 90px;
}
.mustache_wrap ul {
width: 50%;
height: 150px;
float: left;
}
.mustache_wrap ul li {
width: 100%;
height: 33%;
}
.mustache_line {
width: 90px;
height: 2px;
background-color: #000000;
}
.mustache_wrap ul.mustache_right li {
margin: 0 0 0 40px;
}
.mustache_wrap ul.mustache_left .mustache_one .mustache_line {
transform: rotate(25deg);
-ms-transform: rotate(25deg);
-moz-transform: rotate(25deg);
-webkit-transform: rotate(25deg);
-o-transform: rotate(25deg);
margin: 0 0 0 5px;
}
.mustache_wrap ul.mustache_left .mustache_three .mustache_line {
transform: rotate(-25deg);
-ms-transform: rotate(-25deg);
-moz-transform: rotate(-25deg);
-webkit-transform: rotate(-25deg);
-o-transform: rotate(-25deg);
margin: 0 0 0 5px;
}
.mustache_wrap ul.mustache_right .mustache_one .mustache_line {
transform: rotate(-25deg);
-ms-transform: rotate(-25deg);
-moz-transform: rotate(-25deg);
-webkit-transform: rotate(-25deg);
-o-transform: rotate(-25deg); }
.mustache_wrap ul.mustache_right .mustache_three .mustache_line {
transform: rotate(25deg);
-ms-transform: rotate(25deg);
-moz-transform: rotate(25deg);
-webkit-transform: rotate(25deg);
-o-transform: rotate(25deg);
}
.necklet_wrap {
width: 100%;
height: 400px;
}
.necklet_border {
width: 314px;
height: 260px;
margin: -242px auto;
border-radius: 50%;
background-color: #e5002a;
border: 2px solid #1f1f1f;
}
.bell_wrap {
width: 100%;
height: 100px;
}
.bell_border {
width: 65px;
height: 65px;
margin: 228px auto 0;
border-radius: 50%;
background-color: #f5e842;
border: 2px solid #1f1f1f;
}
.bell_rounded {
width: 65px;
height: 10px;
margin: 13px 0 0 -2px;
border-radius: 10px;
border: 2px solid #1f1f1f;
background-color: #f5e842;
}
.bell_circle {
width: 14px;
height: 14px;
margin: 9px auto 0;
border-radius: 50%;
border: 2px solid #1f1f1f;
background-color: #7b6857;
}
.bell_line {
width: 3px;
height: 17px;
margin: 0 auto;
background-color: #1f1f1f;
}
网友评论