<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>哆啦A梦</title>
<style type="text/css">
.big{
width: 500px;
height: 680px;
border:1px solid black;
position: absolute;
left: 0;
right: 0;
margin: auto;
}
.head{
width: 300px;
height: 300px;
border-radius: 150px;
border: 2px solid #333;
background-image: -webkit-radial-gradient(99% 1%, #fff , #0C99C7 75%, black 100%);
background-image: -moz-radial-gradient(99% 1%, #fff , #0C99C7 75%, black 100%);
background-image: -ms-radial-gradient(99% 1%, #fff , #0C99C7 75%, black 100%);
box-shadow: -5px 5px 15px 2px #888 ;
position: absolute;
left: 0;
right: 0;
margin: auto;
}
.face{
width: 250px;
height: 210px;
border-radius: 175px;
background-color: #fff;
position: relative;
left: 25px;
top: 65px;
}
.left_eye{
width: 60px;
height: 70px;
border-radius: 30px;
border: 2px solid black;
background-color: #fff;
position: relative;
top: -170px;
left: 87px;
}
.left_eyeball{
width: 12px;
height: 12px;
border-radius: 6px;
background-color: black;
position: relative;
top:10px;
left:40px;
animation-name: cat;
animation-duration: 2s;
animation-timing-function: linear;
animation-fill-mode: backwards;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.right_eye{
width: 60px;
height: 70px;
border-radius: 30px;
border: 2px solid black;
background-color: #fff;
position: relative;
top: -242px;
left: 149px;
}
.right_eyeball{
width: 12px;
height: 12px;
border-radius: 6px;
background-color: black;
position: relative;
top:8px;
left:10px;
animation-name: cat;
animation-duration: 2s;
animation-timing-function: linear;
animation-fill-mode: backwards;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes cat {
from {
transform: translate(0, 0); }
20% {
transform: translate(7px, 7px); }
40% {
transform: translate(0px, 14px); }
60% {
transform: translate(7px, 21px); }
80% {
transform: translate(0px, 28px); }
to {
transform: translate(7px, 35px); }
}
.nose{
width: 28px;
height: 28px;
border-radius: 14px;
border: 2px solid black;
background-image: -webkit-radial-gradient(10px at 80% 40%,#fff,#cb3a00);
position: relative;
top: -254px;
left: 133px;
}
.mouth{
width: 1px;
height: 100px;
border: 1px solid black;
background-color: black;
position: relative;
top: -458px;
left:147px;
}
.smile{
width: 200px;
height: 200px;
border-radius: 100px;
border-bottom: 4px solid black;
position: relative;
left:48px;
top:-354px;
}
.gai{
width: 200px;
height: 65px;
background-color: #fff;
position: relative;
top:100px;
}
.beard{
width: 70px;
height: 1px;
border: 0.3px solid black;
background-color: black;
}
.lt{
position: relative;
top:-555px;
left:40px;
transform: rotate(15deg);
}
.lm{
position: relative;
top:-535px;
left:40px;
}
.lb{
position: relative;
top:-515px;
left:40px;
transform: rotate(-15deg);
}
.gt{
position: relative;
top:-564px;
left:185px;
transform: rotate(-15deg);
}
.gm{
position: relative;
top:-544px;
left:185px;
}
.gb{
position: relative;
top:-524px;
left:185px;
transform: rotate(15deg);
}
.body{
width:200px;
height: 200px;
background-color: #07abdd;
border: 2px solid #333;
position: relative;
top:290px;
left: 148px;
z-index: 10;
}
.tummy{
width: 150px;
height: 150px;
border-radius: 75px;
background-color: #fff;
border: 2px solid #000;
position: relative;
left: 25px;
top: -10px;
}
.pocket{
width: 120px;
height: 120px;
border-radius: 60px;
background-color: #fff;
border: 2px solid #000;
position: relative;
left: 15px;
top: 15px;
}
.gai_2{
width: 124px;
height: 62px;
background-color: #fff;
border-top-left-radius: 50px;
border-top-right-radius: 50px;
border-bottom: 2px solid black;
position: relative;
left: -2px;
top: -2px;
}
.left_hand{
width: 70px;
height: 55px;
background-color: #07abdd;
border: 2px solid #333;
position: relative;
top: 120px;
left: 98px;
transform-origin: 0 50%;
transform: rotate(-30deg);
box-shadow: -5px 2px 10px 2px #333;
}
.right_hand{
width: 70px;
height: 55px;
background-color: #07abdd;
border: 2px solid #333;
position: relative;
top: 23px;
left: 336px;
transform-origin: 0 50%;
transform: rotate(30deg);
box-shadow: -5px 2px 10px 2px #333;
}
.left_palm{
width: 70px;
height: 70px;
border-radius: 35px;
border: 2px solid #333;
background-color: #fff;
position: relative;
left: 50px;
top:3px;
}
.right_palm{
width: 70px;
height: 70px;
border-radius: 35px;
border: 2px solid #333;
background-color: #fff;
position: relative;
left: 373px;
top:-73px;
}
.rod{
width: 210px;
height: 25px;
border-radius: 100px;
border: 2px solid #000;
background-image: linear-gradient(to top,#640C04,#B13206);
position: relative;
left: 143px;
top: -200px;
z-index: 20;
}
.gai_3{
width: 5px;
height: 60px;
background-color:#07abdd;
position: relative;
left: 148px;
top: -215px;
z-index: 15
}
.gai_4{
width: 5px;
height: 60px;
background-color:#07abdd;
position: relative;
left: 348px;
top: -275px;
z-index: 15;
}
.dang{
width: 20px;
height:20px;
border-radius: 10px;
background-color: #fff;
border: 2px solid #333;
position: relative;
left: 238px;
top: -140px;
z-index: 15;
}
.dang_gai{
width: 24px;
height: 10px;
background-color: #fff;
position: relative;
top: 12px;
left: -2px;
}
.left_foot{
width: 110px;
height: 30px;
border: 2px solid #333;
border-top-right-radius: 45px;
border-bottom-right-radius: 45px;
border-top-left-radius: 65px;
border-bottom-left-radius: 45px;
background-color: #fff;
position: relative;
left: 130px;
top:-157px;
z-index: 15;
box-shadow: -1px 0px 10px 2px #333;
}
.right_foot{
width: 110px;
height: 30px;
border: 2px solid #333;
border-top-right-radius: 65px;
border-bottom-right-radius: 45px;
border-top-left-radius: 45px;
border-bottom-left-radius: 45px;
background-color: #fff;
position: relative;
left: 255px;
top:-191px;
z-index: 15;
box-shadow: -1px 1px 10px 2px #333;
}
.bell{
width: 36px;
height: 36px;
border-radius: 18px;
background-image: radial-gradient(10px at 75% 25%,#fff,#CDC60B);
border: 2px solid #000;
position: relative;
left:230px;
top: -430px;
z-index: 30;
}
.inbell_1{
width: 34px;
height: 3px;
border: 2px solid #000;
border-top-left-radius: 3px;
border-top-right-radius: 4px;
background-color: none;
position: relative;
top: 9px;
left: -1px;
}
.inbell_2{
width:10px;
height: 10px;
border-radius: 5px;
background-color: #000;
position: relative;
top: 13px;
left: 12px;
}
.inbell_3{
width: 2px;
height: 10px;
background-color: #000;
position: relative;
left: 16px;
top: 10px;
}
</style>
</head>
<body>
<div class="big">
<div class="head">
<div class="face"></div>
<div class="left_eye">
<div class="left_eyeball"></div>
</div>
<div class="right_eye">
<div class="right_eyeball"></div>
</div>
<div class="nose"></div>
<div class="smile">
<div class="gai"></div>
</div>
<div class="mouth"></div>
<div class="beard lt"></div>
<div class="beard lm"></div>
<div class="beard lb"></div>
<div class="beard gt"></div>
<div class="beard gm"></div>
<div class="beard gb"></div>
</div>
<div class="body">
<div class="tummy">
<div class="pocket">
<div class="gai_2">
</div>
</div>
</div>
</div>
<div class="left_hand"></div>
<div class="right_hand"></div>
<div class="left_palm"></div>
<div class="right_palm"></div>
<div class="rod"></div>
<div class="gai_3"></div>
<div class="gai_4"></div>
<div class="dang">
<div class="dang_gai"></div>
</div>
<div class="left_foot"></div>
<div class="right_foot"></div>
<div class="bell">
<div class="inbell_1"></div>
<div class="inbell_2"></div>
<div class="inbell_3"></div>
</div>
</div>
</body>