利用H5、C3画蓝胖子
2016-10-18 本文已影响202人
小纸人儿
画叮当猫主要运用border-radius及定位，可复制代码查看具体效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 蓝胖子 </title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.wrap{
width: 800px;
margin: 50px auto;
background: #fff;
position: relative;
}
header{
margin: 0 auto;
width: 500px;
height: 440px;
background: #00b7e7;
border-radius: 50%;
border: 1px solid red;
position: relative;
}
.eyeLeft , .eyeRight{
width: 100px;
height: 130px;
border-radius: 50px;
background: #fff;
border: 2px solid #000;
position: absolute;
top: 50px;
z-index: 3;
}
.eyeLeft{
left: 146px;
}
.eyeRight{
left: 250px;
}
.eyeBallL , .eyeBallR{
width: 20px;
height: 20px;
background: #000;
border-radius: 50%;
position: absolute;
top: 65px;
z-index: 3;
}
.eyeBallL{
right: 10px;
}
.eyeBallR{
left: 10px;
}
.face{
position: relative;
z-index: 2;
}
.face .white{
width: 400px;
height: 320px;
border-radius: 50%;
background: #fff;
position: absolute;
top: 100px;
left: 50px;
}
.face .nose{
width: 45px;
height: 50px;
border-radius: 23px;
background: #cf3318;
border: 2px solid #000;
position: absolute;
top: 165px;
left: 225px;
}
.face .line{
width: 3px;
height: 160px;
background: #000;
position: absolute;
top: 218px;
left: 248px;
}
.face .mouth{
width: 280px;
height: 280px;
border-radius: 50%;
border-bottom: 5px solid #000;
position: absolute;
top: 98px;
left: 105px;
}
.face .beard .all{
width: 80px;
height: 2px;
background: #000;
position: absolute;
z-index: 2;
}
.face .beard .left{
left: 115px;
}
.face .beard .right{
left: 295px;
}
.face .beard .top , .face .beard .one{
top:220px ;
}
.face .beard .center , .face .beard .two{
top: 240px;
}
.face .beard .bottom , .face .beard .thr{
top:260px ;
}
.face .beard .top , .face .beard .thr{
transform: rotate(160deg);
}
.face .beard .bottom , .face .beard .one{
transform: rotate(200deg);
}
.neck {
width: 300px;
height: 30px;
background-color: #a31f12;
border: 2px solid black;
border-radius: 15px;
position: relative;
top: -30px;;
left: 250px;
z-index: 4;
}
.neck .bell {
width: 60px;
height: 60px;
overflow: hidden;
border: 2px solid black;
border-radius: 60px;
background-color: #cfcb3c;
position: absolute;
top: 5px;
left: 120px;
}
.bell .Bline {
width: 60px;
height: 2px;
background-color: #cfcb3c;
border: 2px solid black;
border-radius: 3px 3px 0 0;
position: absolute;
top: 15px;
}
.bell .Bcircle {
width: 20px;
height: 16px;
background: black;
border-radius: 8px;
position: absolute;
top: 25px;
left: 20px;
}
.bell .Bunderpart {
width: 3px;
height: 20px;
background-color: black;
position: absolute;
left: 28px;
top: 40px;
}
.body {
position: relative;
top: -300px;
z-index: 1;
}
.body .tummy {
width: 280px;
height: 240px;
background-color: #00b1e1;
border: 2px solid black;
position: absolute;
top: 267px;
left: 260px;
}
.body .bellyband {
width: 220px;
height: 220px;
background-color: #fff;
border: 2px solid black;
border-radius: 110px;
position: absolute;
left: 290px;
top: 267px;
}
.body .pocket {
width: 160px;
height: 160px;
border-radius: 80px;
background-color: #fff;
border: 2px solid black;
position: absolute;
top: 305px;
left: 320px;
}
.cover {
width: 164px;
height: 80px;
background-color: #fff;
border-bottom: 2px solid black;
/*border: 5px solid orange;*/
position: absolute;
top: 300px;
left: 320px;
}
.left_hand,.right_hand {
height: 100px;
width: 100px;
position: absolute;
top: 272px;
left: 248px;
}
.left_hand {
left: -10px;
}
.left_hand .Larm {
width: 70px;
height: 100px;
background-color: #00bee8;
border: 1px solid black;
position: relative;
top: 200px;
left: 535px;
transform: rotateZ(135deg);
}
.right_hand {
left: -10px;
}
.right_hand .Rarm {
width: 70px;
height: 100px;
background-color: #00bee8;
border: 1px solid black;
position: relative;
top: 200px;
left: 215px;
transform: rotateZ(45deg);
}
.left_hand .Lpalm,.right_hand .Rpalm {
width: 80px;
height: 80px;
border-radius: 40px;
border: 2px solid black;
background-color: #fff;
position: absolute;
}
.right_hand .Rpalm {
left: 580px;
top: 260px;
z-index: 1;
}
.left_hand .Lpalm {
left: 160px;
top: 260px;
z-index: 1;
}
.foot .left_foot,.foot .right_foot {
width: 150px;
height: 40px;
background-color: #fff;
border: 2px solid black;
border-radius: 80px 60px 60px 40px;
position: relative;
}
.foot .left_foot {
left: 240px;
top: 210px;
}
.foot .right_foot {
top: 165px;
left: 410px;
}
.foot .crotch {
width: 40px;
height: 20px;
background-color: #fff;
border: 2px solid black;
border-bottom: none;
border-radius: 40px 40px 0 0;
position: relative;
top: 103px;
left: 382px;
z-index: 2
}
</style>
<body>
<div class="wrap">
<!-- 头 -->
<header>
<!-- 眼 -->
<div class="eyes">
<!-- 左眼 -->
<div class="eyeLeft">
<!-- 左眼球 -->
<div class="eyeBallL"></div>
</div>
<!-- 右眼 -->
<div class="eyeRight">
<!-- 右眼球-->
<div class="eyeBallR"></div>
</div>
</div>
<!-- 脸 -->
<div class="face">
<!-- 脸型白色 -->
<div class="white"></div>
<!-- 鼻 -->
<div class="nose"></div>
<!-- 鼻梁 -->
<div class="line"></div>
<!-- 嘴 -->
<div class="mouth"></div>
<!-- 胡须 -->
<div class="beard">
<!--左胡须-->
<div class="one left all"></div>
<div class="two left all"></div>
<div class="thr left all"></div>
<!--右胡须-->
<div class="top right all"></div>
<div class="center right all"></div>
<div class="bottom right all"></div>
</div>
</div>
</header>
<!-- 脖子 -->
<div class="neck">
<!-- 铃铛 -->
<div class="bell">
<div class="Bline"></div>
<div class="Bcircle"></div>
<div class="Bunderpart"></div>
</div>
</div>
<!-- 身体 -->
<div class="body">
<!-- 肚子 -->
<div class="tummy"></div>
<!-- 肚兜 -->
<div class="bellyband"></div>
<!-- 口袋 -->
<div class="pocket"></div>
<div class="cover"></div>
</div>
<!-- 左手 -->
<div class="left_hand">
<!-- 手臂 -->
<div class="Larm"></div>
<!-- 手掌 -->
<div class="Lpalm"></div>
</div>
<!-- 右手 -->
<div class="right_hand">
<!-- 手臂 -->
<div class="Rarm"></div>
<!-- 手掌 -->
<div class="Rpalm"></div>
</div>
<!-- 脚 -->
<div class="foot">
<!-- 左脚 -->
<div class="left_foot"></div>
<!-- 右脚 -->
<div class="right_foot"></div>
<div class="crotch"></div>
</div>
</div>
</div>
</body>
</html>
效果图如下：
Paste_Image.png
