代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多啦A梦</title>
<style>
* {
margin: 0px;
height: 0px;
}
body,
html {
height: 100%;
}
body {
background: rgb(85, 38, 16);
}
div {
border: 2px solid #000;
}
.box {
width: 450px;
height: 600px;
margin: 100px auto;
border: none;
}
/* ***********头部**************************** */
.head {
width: 315px;
height: 280px;
background: #0DACD6;
border-radius: 170px 170px 140px 140px;
position: relative;
box-shadow: -3px 0px 7px 0px #6A6A6A;
background-image: linear-gradient(to top right, #055262, #0DACD6, #7FDEF4);
}
/* 头部中的大胡子部分 */
.beard {
width: 270px;
height: 180px;
background: #fff;
border-radius: 256px 256px 220px 220px;
position: relative;
top: 87px;
left: 22px;
z-index: 100;
}
.eye {
float: left;
width: 74px;
height: 84px;
background: #fff;
border-radius: 37px;
position: absolute;
top: -40px;
left: 58px;
border: 2px solid #000;
}
.eye:nth-of-type(2) {
top: -40px;
left: 136px;
}
.eye span {
display: block;
width: 15px;
height: 15px;
background: #000;
border-radius: 50%;
position: absolute;
bottom: 15px;
right: 15px;
}
.eye1 span {
animation: mymove 0.5s infinite;
}
@keyframes mymove {
20% {
bottom: 35px;
right: 15px;
}
40% {
bottom: 60px;
right: 40px;
}
60% {
bottom: 30px;
left: 50px;
}
80% {
bottom: 15px;
left: 30px;
}
}
.eye:nth-of-type(2) span {
bottom: 15px;
left: 15px;
animation: mymove 0.5s infinite;
}
.nose {
width: 34px;
height: 34px;
background: #CA3E01;
position: absolute;
left: 117px;
top: 35px;
border-radius: 50%;
}
.nose .nose_small {
display: block;
background: #fff;
width: 1px;
height: 1px;
box-shadow: 0px 0px 8px 6px #fff;
position: absolute;
left: 20px;
bottom: 20px;
}
.beard i {
display: block;
width: 60px;
height: 2px;
background: #000;
position: absolute;
}
.beard i:nth-of-type(1) {
left: 30px;
top: 63px;
transform: rotate(30deg);
}
.beard i:nth-of-type(2) {
left: 24px;
top: 90px;
}
.beard i:nth-of-type(3) {
left: 30px;
top: 119px;
transform: rotate(-30deg);
}
.beard i:nth-of-type(4) {
left: 178px;
top: 60px;
transform: rotate(-30deg);
}
.beard i:nth-of-type(5) {
left: 184px;
top: 88px;
}
.beard i:nth-of-type(6) {
left: 176px;
top: 118px;
transform: rotate(30deg);
}
.beard i:nth-of-type(7) {
width: 3px;
height: 76px;
left: 134px;
top: 71px;
z-index: 99;
}
.beard i:nth-of-type(8) {
width: 120px;
height: 30px;
border-bottom: 2px solid #000;
background: #fff;
border-radius: 0px 0px 60% 60%;
position: absolute;
left: 76px;
top: 116px;
z-index: 98;
}
/* 围巾******888 */
.neck {
width: 232px;
height: 20px;
background: #9C1A00;
border-radius: 10px;
position: absolute;
bottom: -2px;
left: 40px;
z-index: 100;
}
.neck .bell {
width: 40px;
height: 40px;
/* background: #DAD215; */
position: absolute;
left: 94px;
top: 8px;
border-radius: 50%;
background-image: linear-gradient(to top right, #DAD215 60%, #F9F9B9 90%);
animation: mymove2 0.5s infinite;
}
@keyframes mymove2 {
25% {
left: 100px;
top: 10px;
}
50% {
left: 94px;
top: 8px;
}
75% {
left: 88px;
top: 10px;
}
}
.bell i:nth-of-type(1) {
width: 37px;
height: 3px;
border: 2px solid #000;
position: absolute;
top: 10px;
}
.bell i:nth-of-type(2) {
width: 10px;
height: 10px;
position: absolute;
top: 18px;
left: 16px;
background: #000;
border-radius: 50%;
}
.bell i:nth-of-type(3) {
width: 3px;
height: 12px;
background: #000;
position: absolute;
bottom: 0px;
left: 19px;
}
/* 身体*********8 */
.abody {
width: 224px;
height: 158px;
background: #0DACD6;
position: relative;
left: 46px;
top: -2px;
background: linear-gradient(to right, #0DACD6, #0077B6, #0DACD6);
}
/* ————————————————————————————身体 */
.abody .pocket {
width: 170px;
height: 170px;
position: absolute;
left: 24px;
bottom: 28px;
border-radius: 50%;
background: #fff;
overflow: hidden;
}
.abody .pocket_small {
width: 130px;
height: 65px;
position: absolute;
left: 20px;
bottom: 16px;
border-radius: 0px 0px 65px 65px;
}
.small {
width: 24px;
height: 12px;
position: absolute;
left: 100px;
bottom: -2px;
border-radius: 12px 12px 0 0;
background: #fff;
border-bottom-color: white;
}
.foot {
width: 126px;
height: 30px;
background: #fff;
border-radius: 25px 15px 15px 15px;
position: absolute;
bottom: -34px;
left: -18px;
box-shadow: -3px 0px 7px 0px #6A6A6A, 1px 0px 2px 0px inset;
}
.foot2 {
position: absolute;
bottom: -34px;
left: 116px;
border-radius: 15px 25px 15px 15px;
}
.hand {
width: 65px;
height: 65px;
border-radius: 50%;
background: #fff;
position: absolute;
left: -85px;
top: 36px;
background-image: linear-gradient(to top right, #DFDFDF 30%, #fff 50%);
}
.hand_r {
position: absolute;
left: 242px;
top: 34px;
}
.arm {
width: 52px;
height: 70px;
background: #0DACD6;
position: absolute;
left: -42px;
top: 4px;
transform: rotate(55deg);
z-index: -1;
}
.arm2 {
position: absolute;
left: 203px;
top: -2px;
transform: rotate(-55deg);
}
.bb {
border: none;
background: #0DACD6;
width: 3px;
height: 50px;
position: absolute;
left: -3px;
top: 1px;
}
.bb2 {
position: absolute;
left: 224px;
top: 1px;
}
</style>
</head>
<body>
<div class="box">
<div class="head">
<!-- ——————————脸部胡子------->
<div class="beard">
<div class="eye eye1">
<span></span>
</div>
<div class="eye">
<span></span>
</div>
<!-- 鼻子 -->
<div class="nose">
<span class="nose_small"></span>
</div>
<i class="b1"></i>
<i class="b2"></i>
<i class="b3"></i>
<i class="b4"></i>
<i class="b5"></i>
<i class="b6"></i>
<i class="b7"></i><!-- 竖胡子 -->
<i class="b8"></i><!-- 嘴巴 -->
</div>
<!-- 鼻子，铃铛 -->
<div class="neck">
<div class="bell">
<i></i><i></i><i></i>
</div>
</div>
</div>
<div class="abody">
<!-- 口袋 -->
<div class="pocket">
<div class="pocket_small"></div>
</div>
<!-- 小半圆 -->
<div class="small"></div>
<!-- 脚 -->
<div class="foot"></div>
<div class="foot foot2"></div>
<!-- 胳膊 -->
<div class="arm arm1"></div>
<div class="arm arm2"></div>
<!-- 手 -->
<div class="hand hand_l"></div>
<div class="hand hand_r"></div>
<!-- 遮身体部分边框线 -->
<div class="bb"></div>
<div class="bb bb2"></div>
</div>
</div>
</body>
</html>