使用css画一只鲨鱼,用css3画一个属于自己的蓝胖子（下）

接上回，我们把蓝胖子的头画齐了，现在我们画他的项圈和铃铛

在header中添加一组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用作蓝胖子的铃铛

铃铛需要四部分组成，我们一个一个来，先规定外框的大小，再画一个球

.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

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;

}