用css画一个哆啦A梦
程序员文章站
2022-09-10 14:42:43
原图： 效果图： 虽然说没用啥什么高级的技巧，但这让我感受到了CSS的乐趣！ 好好学习，天天向上！ ......
原图：
效果图：
虽然说没用啥什么高级的技巧，但这让我感受到了css的乐趣！
好好学习，天天向上！
<!doctype html>
<html>
<head>
<title></title>
<style type="text/css">
body{
background-color: #66b3ff;
height: 300px;
overflow: hidden;
}
#head{
width: 200px;
height: 200px;
position: absolute;
left: 50%;
top:31%;
margin-left: -100px;
margin-top: -100px;
background-color: #0080ff;
border-radius: 999px;
border: 1px solid black;
}
#face{
width: 179px;
height: 150px;
position: absolute;
left: 43.4%;
top:22%;
background-color: white;
border-radius: 999px;
border: 1px solid black;
}
#lefteye{
width: 50px;
height: 60px;
position: absolute;
left:46.2%;
top:18%;
background-color: white;
border-radius: 50%;
border: 1px solid black;
}
#righteye{
width: 50px;
height: 60px;
position: absolute;
left:50%;
top:18%;
background-color: white;
border-radius: 50%;
border: 1px solid black;
}
#lefteye1{
width: 13px;
height: 20px;
position: absolute;
left:48.5%;
top:22.2%;
background-color: black;
border-radius: 50%;
border: 1px solid black;
}
#righteye1{
width: 13px;
height: 20px;
position: absolute;
left:50.5%;
top:22.2%;
background-color: black;
border-radius: 50%;
border: 1px solid black;
}
#lefteye2{
width: 5px;
height: 8px;
position: absolute;
left:48.9%;
top:23%;
background-color: white;
border-radius: 50%;
border: 1px solid black;
}
#righteye2{
width: 5px;
height: 8px;
position: absolute;
left:50.7%;
top:23%;
background-color: white;
border-radius: 50%;
border: 1px solid black;
}
#nose{
width: 25px;
height: 25px;
position: absolute;
left:49%;
top:25.5%;
background-color: red;
border-radius: 50%;
border: 1px solid black;
}
#nose1{
width: 6px;
height: 6px;
position: absolute;
left:49.5%;
top:26.5%;
background-color: white;
border-radius: 50%;
}
#line{
width: 1px;
height: 100px;
position: absolute;
left:49.9%;
top:29.7%;
background-color: white;
border-left: 2px solid #000000;
margin-left: 1px;
}
#line1{
width: 60px;
height: 1px;
position: absolute;
left:43.5%;
top:28%;
background-color: white;
border-bottom: 1px solid #000000;
margin-left: 1px;
transform:rotate(12deg);
}
#line2{
width: 60px;
height: 1px;
position: absolute;
left:43.5%;
top:32%;
background-color: white;
border-bottom: 1px solid #000000;
margin-left: 1px;
}
#line3{
width: 60px;
height: 1px;
position: absolute;
left:43.5%;
top:36%;
background-color: white;
border-bottom: 1px solid #000000;
margin-left: 1px;
transform:rotate(-12deg);
}
#line4{
width: 60px;
height: 1px;
position: absolute;
left:51.6%;
top:28%;
background-color: white;
border-bottom: 1px solid #000000;
margin-left: 1px;
transform:rotate(-12deg);
}
#line5{
width: 60px;
height: 1px;
position: absolute;
left:51.6%;
top:32%;
background-color: white;
border-bottom: 1px solid #000000;
margin-left: 1px;
}
#line6{
width: 60px;
height: 1px;
position: absolute;
left:51.6%;
top:36%;
background-color: white;
border-bottom: 1px solid #000000;
margin-left: 1px;
transform:rotate(12deg);
}
#mouse{
width: 130px;
height: 130px;
position: absolute;
left: 45.1%;
top:30%;
margin-left: -0.5px;
background-color: white;
border-radius: 0 0 65px 65px;
border-bottom: 2px solid black;
height: 65px;
}
#food{
width: 80px;
height: 62px;
position: absolute;
left:46.9%;
top:39.2%;
background-color:#ffaf60;
border-radius: 50%;
border: 1px solid black;
}
#food1{
width: 78px;
height: 57px;
position: absolute;
left:47%;
top:38.9%;
background-color: #ffaf60;
border-radius: 50%;
border: 1px solid black;
}
#food2{
width: 73px;
height: 52px;
position: absolute;
left:47.2%;
top:39.1%;
background-color:#844200;
border-radius: 50%;
}
#leftfist{
width: 50px;
height: 50px;
position: absolute;
left:45%;
top:40%;
margin-left: -15px;
margin-top: -15px;
background-color: white;
border-radius: 999px;
border: 1px solid black;
}
#rightfist{
width: 50px;
height: 50px;
position: absolute;
left:53%;
top:40%;
margin-left: -15px;
margin-top: -15px;
background-color: white;
border-radius: 999px;
border: 1px solid black;
}
#lefthand{
width: 50px;
height: 70px;
position: absolute;
left:43.3%;
top:44%;
margin-left: -15px;
margin-top: -15px;
background-color: #0080ff;
border-radius: 50%;
transform:rotate(34deg);
border: 1px solid black;
}
#righthand{
width: 50px;
height: 70px;
position: absolute;
left:54.3%;
top:44%;
margin-left: -15px;
margin-top: -15px;
background-color: #0080ff;
border-radius: 50%;
transform:rotate(-34deg);
border: 1px solid black;
}
#tummy{
width: 110px;
height: 110px;
position: absolute;
left: 53.1%;
top:58.5%;
margin-left: -100px;
margin-top: -100px;
background-color: white;
border-radius: 999px;
border: 1px solid black;
}
#bodyy{
width: 135px;
height: 115px;
position: absolute;
left: 44.7%;
top:45%;
background-color: #0080ff;
}
#cover{
width: 400px;
height: 400px;
position: absolute;
left: 35.3%;
top:62.3%;
background-color:#66b3ff;
border-radius: 50%;
}
#leftleg{
width: 80px;
height: 90px;
position: absolute;
left:42%;
top:53.5%;
margin-left: -15px;
margin-top: -15px;
background-color: white;
border-radius: 50%;
border: 1px solid black;
}
#rightleg{
width: 80px;
height: 90px;
position: absolute;
left:53.7%;
top:53.5%;
margin-left: -15px;
margin-top: -15px;
background-color: white;
border-radius: 50%;
border: 1px solid black;
}
#pocket{
width: 88px;
height: 82px;
position: absolute;
left: 46.5%;
top:51.6%;
margin-left: -0.5px;
background-color: white;
border-radius: 0 0 41px 41px;
border: 1px solid black;
height: 41px;
}
</style>
</head>
<body>
<div id="head"></div>
<div id="face"></div>
<div id="lefteye"></div>
<div id="righteye"></div>
<div id="lefteye1"></div>
<div id="righteye1"></div>
<div id="lefteye2"></div>
<div id="righteye2"></div>
<div id="nose"></div>
<div id="nose1"></div>
<div id="bodyy"></div>
<div id="tummy"></div>
<div id="mouse"></div>
<div id="line"></div>
<div id="line1"></div>
<div id="line2"></div>
<div id="line3"></div>
<div id="line4"></div>
<div id="line5"></div>
<div id="line6"></div>
<div id="food"></div>
<div id="food1"></div>
<div id="food2"></div>
<div id="lefthand"></div>
<div id="righthand"></div>
<div id="cover"></div>
<div id="leftfist"></div>
<div id="rightfist"></div>
<div id="leftleg"></div>
<div id="rightleg"></div>
<div id="pocket"></div>
</body>
</html>