<!DOCTYPE html>
<html>
<head>
<title>晕死挥手的哆啦A梦</title>
<meta charset="utf-8">
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.armLeft{
animation: hh 2s linear infinite;
}
.armRight{
animation: hh1 2s linear infinite;
}
@keyframes hh1 {
0%{
transform: rotate(325deg) ;
}
50%{
transform: rotate(270deg);
}
100%{
transform:rotate(325deg);
}
}
@keyframes hh {
0%{
transform: rotate(45deg) ;
}
50%{
transform: rotate(90deg);
}
100%{
transform:rotate(45deg);
}
}
.head{
width:224px;
height:200px;
background-color: rgb(0, 176, 240);
margin:100px auto 0 auto;
border:2px solid #365162;
border-radius:50%;
position:relative;
}
.face{
width:185px;
height:135px;
border:2px solid black;
background-color:white;
border-radius:50%;
position:absolute;
margin:auto;
left:0;
right:0;
top:50px;
z-index:2;
}
.eye{
width:50px;
height:58px;
border:2px solid black;
background-color:white;
border-radius:60%;
position:absolute;
top:-30px;
z-index:2;
}
.eyeLeft{
left:40px;
}
.eyeRight{
right:40px;
}
.eyeDot{
width:20px;
height:20px;
background-color:black;
border-radius:50%;
position:absolute;
top:28px;
}
.eyeDotb{
width:10px;
height:10px;
background-color:white;
border-radius:50%;
position:absolute;
top:30px;
}
.eyeDotbleft{
right: 21px;
}
.eyeDotbright{
left: 21px;
}
.eyeDotLeft{
right:6px;
}
.eyeDotRight{
left:6px;
}
.nose{
width:20px;
height:20px;
border:1px solid black;
background-color:rgb(245,27,44);
border-radius:50%;
position:absolute;
margin:auto;
left:0;
right:0;
top:22px;
z-index:1;
}
.nosedot{
width: 8px;
height: 8px;
border-radius: 50%;
background-color: white;
}
.noseline{
width:2px;
height:68px;
background-color:black;
position:absolute;
margin:auto;
left:0;
right:0;
top:44px;
z-index:1;
}
.mouth{
width:140px;
height:100px;
border-bottom:2px solid black;
border-radius:70%;
position:absolute;
margin:auto;
left:0;
right:0;
top:12px;
z-index: 1;
}
.beard{
width:174px;
height:2px;
background-color:black;
position:absolute;
border-radius: 4px;
margin:auto;
left:0;
right:0;
top:66px;
}
.beard02{
transform:rotate(15deg);
}
.beard03{
transform:rotate(-15deg);
}
.beardSquare{
width:76px;
height:25px;
background-color:#ffffff;
position:absolute;
margin:auto;
left:0;
right:0;
top:54px;
}
/* 身体 */
.body{
width:154px;
height:126px;
background-color: rgb(0, 176, 240);
border-radius: 45px;
margin:0 auto;
position:relative;
top:-18px;
border: 1px solid black;
}
/*肚子*/
.belly{
width:118px;
height:118px;
border:2px solid black;
border-radius:50%;
background-color:white;
position:absolute;
top:-20px;
left:17px;
}
/*口袋*/
.pocket{
width:90px;
height:45px;
border:2px solid black;
border-radius:0 0 45px 45px;
position:absolute;
bottom:12px;
left:12px;
}
/*围脖*/
.tie{
width:110px;
height:6px;
border:1px solid black;
background-color:rgb(205,11,28);
border-radius:25px;
position:absolute;
top:-4px;
left:23px;
z-index:3;
}
/*铃铛*/
.bell{
width:30px;
height:30px;
background-color:#F8DC06;
border:1px solid black;
border-radius:50%;
position: absolute;
margin:auto;
left:0;
right:0;
top:3px;
}
.bellLine{
width:28px;
height:2px;
background-color:black;
position: absolute;
margin:auto;
left:0;
right:0;
top:6px;
}
.bellLine02{
width:30px;
top:10px;
}
.bellDot{
width:10px;
height: 10px;
background-color:black;
border-radius:50%;
position: absolute;
margin:auto;
left:0;
right:0;
bottom:6px;
}
.bellLine03{
width:2px;
height:6px;
top:24px;
}
.bellSquare{
width:0;
height:0;
box-shadow:0 0 5px 5px white;
position: absolute;
right:8px;
top:8px;
}
.arm{
width:30px;
height:70px;
background-color: rgb(0, 176, 240);
border:1px solid black;
position: absolute;
top:0;
z-index: -1;
}
.armLeft{
top: 7px;
left:20px;
transform-origin:left top;
transform:rotate(45deg);
}
.armRight{
top: 7px;
right:20px;
transform-origin:right top;
transform:rotate(-45deg);
}
.hand{
width:43px;
height:43px;
background-color:white;
border:1px solid black;
border-radius:50%;
position:absolute;
left:-7px;
bottom:-23px;
transform:rotate(45deg);
}
.foot{
width:80px;
height:22px;
background-color:white;
border:2px solid black;
position:absolute;
bottom:-18px;
}
.footLeft{
left:-4px;
border-radius:50% 52% 10% 20%;
}
.footRight{
right:-8px;
border-radius:50% 48% 18% 0%;
}
.line{
width:24px;
border:1px solid black;
transform: rotate(90deg);
position: absolute;
margin:auto;
left:66px;
top: 112px;
}
</style>
</head>
<body>
<div class="main">
<div class="head">
<div class="face">
<div class="eye eyeLeft">
<div class="eyeDot eyeDotLeft"></div>
<div class="eyeDotb eyeDotbleft"></div>
</div>
<div class="eye eyeRight">
<div class="eyeDot eyeDotRight"></div>
<div class="eyeDotb eyeDotbright"></div>
</div>
<div class="nose">
<div class="nosedot"></div>
</div>
<div class="noseline"></div>
<div class="mouth"></div>
<div class="beard"></div>
<div class="beard beard02"></div>
<div class="beard beard03"></div>
<div class="beardSquare"></div>
</div>
</div>
<div class="body">
<div class="belly">
<div class="pocket"></div>
</div>
<div class="tie">
<div class="bell">
<div class="bellLine"></div>
<div class="bellLine bellLine02"></div>
<div class="bellLine bellLine03"></div>
<div class="bellDot"></div>
<div class="bellSquare"></div>
</div>
</div>
<div class="arm armLeft">
<div class="hand"></div>
</div>
<div class="arm armRight">
<div class="hand"></div>
</div>
<div class="line"></div>
<div class="foot footLeft"></div>
<div class="foot footRight"></div>
</div>
</div>
</body>
</html>