最近看了個視頻，用css繪圖，感覺是一個挺有意思的東西，於是乎就動手用css畫了一個粗糙的哆啦A夢
效果圖：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>哆啦A夢</title>
<style type="text/css">
.box{
width:600px;
height:600px;
margin:0 auto;
border:none;
/*position: relative;*/
}
div{
border:1px solid #000;
}
.header{
width:200px;
height:200px;
border-radius: 50%;
background:#13a8d5;
position:relative;
box-shadow: -2px 2px 10px #504e4e;
z-index: 12;
left:5px;
}
.face{
width:160px;
height:160px;
border-radius: 50%;
position:absolute;
top:39px;
left:20px;
background:#fff;
}
.face .eyes{
width:30px;
height:40px;
border-radius: 20px;
position: absolute;
left:50%;
top:-10px;
margin-left:-30px;
background:#fff;
}
.face .eyes_i{
margin-left:2px;
}
.face .eyes .eyes_a{
width:6px;
height:6px;
border-radius: 50%;
background:#000;
position:absolute;
top:25px;
right:4px;
}
.face .eyes .eyes_b{
right:18px;
}
.face .nose{
width:20px;
height:20px;
border-radius:50%;
position:absolute;
top:26px;
left:50%;
margin-left:-9px;
background:#8a071d;
/*background: radial-gradient(#fbf5f5 0%, #8a071d 30%);*/
}
.face .nose .nose_a{
width:8px;
height:8px;
position:absolute;
top:4px;
right:3px;
border:none;
border-radius:50%;
/*box-shadow: 0 0 2px #fbf5f5;*/
/*background:#fbf5f5;*/
background: radial-gradient(#fbf5f5 0%,rgba(255,255,255,.2) 100%);
}
.face .nose_i{
width:0px;
height:80px;
background:#000;
position: absolute;
top:47px;
left:50%;
border-radius: 1px;
margin-left:1px;
}
.face .mouth{
width:100px;
height:100px;
border-radius:50%;
border-top-color: rgba(0,0,0,0);
border-left-color: rgba(0,0,0,0);
border-right-color: rgba(0,0,0,0);
border-bottom-color: #000;
position:absolute;
top:28px;
left:50%;
margin-left:-50px;
}
.face .lines{
width:40px;
height:40px;
border:none;
position:absolute;
top:66px;
left:16px;
}
.face .lines_i{
transform: rotate(180deg);
top:48px;
left:108px;
}
.face .lines .line{
width:40px;
/*height:1px;*/
margin-top:10px;
background:#000;
}
.face .lines .line_i{
transform:rotate(26deg);
margin-bottom:10px;
position: absolute;
top:-20px;
left:2px;
}
.face .lines .line_a{
position: absolute;
}
.face .lines .line_b{
transform:rotate(-26deg);
position: absolute;
top:20px;
left:2px;
}
/*身體*/
.boday{
position: relative;
border:none;
top:-16px;
left:27px;
}
.bodys{
width:160px;
height:158px;
background: #13a8d5;
position:absolute;
z-index:10;
}
.neck{
width:174px;
height:20px;
border:none;
background:#971e06;
position: absolute;
left:-8px;
z-index: 15;
border-radius:20px;
}
.body_s{
width:162px;
height:58px;
background: #13a8d5;
position:absolute;
z-index:12;
border:none;
}
.arm{
width:40px;
height:80px;
background:#13a8d5;
border-top:none;
transform:rotate(45deg);
position: absolute;
top:20px;
left:-34px;
}
.arms{
transform:rotate(315deg);
left:154px;
}
.hands{
width:50px;
height:50px;
border-radius:50%;
background:#fff;
position:absolute;
top:66px;
left:-70px;
}
.hans_i{
left:180px;
}
.leg{
width:90px;
height:20px;
border-radius:140px 80px 80px 40px;
position:absolute;
left:-10px;
top:159px;
z-index:13;
background:#fff;
}
.legs{
border-radius:80px 140px 40px 80px;
left:82px;
}
.dots{
width:20px;
height:10px;
border-bottom:none;
position: absolute;
left:70px;
top:153px;
z-index: 12;
background: #fff;
border-radius:20px 20px 0 0;
}
.tummy{
width:130px;
height:130px;
border-radius: 50%;
background:#fff;
position: absolute;
z-index: 13;
left:15px;
}
.pocket{
width:100px;
height:50px;
border-radius: 0 0 100px 100px;
background:#fff;
position: absolute;
top:64px;
left:31px;
z-index: 14;
}
.bell{
width:30px;
height:30px;
border-radius:50%;
background:#f9f303;
position:absolute;
left:63px;
top:10px;
z-index: 15;
}
.bell .bells{
width:26px;
height:2px;
border-radius:8px;
position: absolute;
top:6px;
left:1px;
}
.bell .bells_i{
width:5px;
height:5px;
border-radius:50%;
background:#000;
position: absolute;
top:14px;
left:11px;
}
.bell .bells_a{
width:1px;
height:10px;
/*border:none;*/
background:#000;
border-radius:2px;
position:absolute;
top:20px;
left:13px;
}
</style>
</head>
<body>
<div class="box">
<div class="header">
<div class="face">
<div class="eyes">
<div class="eyes_a"></div>
</div>
<div class="eyes eyes_i"><div class="eyes_a eyes_b"></div></div>
<div class="nose">
<div class="nose_a"></div>
</div>
<div class="nose_i"></div>
<div class="mouth"></div>
<div class="lines">
<div class="line line_i"></div>
<div class="line line_a"></div>
<div class="line line_b"></div>
</div>
<div class="lines lines_i">
<div class="line line_i"></div>
<div class="line line_a"></div>
<div class="line line_b"></div>
</div>
</div>
</div>
<div class="boday">
<div class="bodys"></div>
<div class="neck"></div>
<div class="body_s"></div>
<div class="arm"></div>
<div class="arm arms"></div>
<div class="hands"></div><div class="hands hans_i"></div>
<div class="leg"></div>
<div class="leg legs"></div>
<div class="dots"></div>
<div class="tummy"></div>
<div class="pocket"></div>
<div class="bell">
<div class="bells"></div>
<div class="bells_i"></div>
<div class="bells_a"></div>
</div>
</div>
</div>
</body>
</html>