<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
list-style-type: none;
}
h3{
text-align: center;
margin-top: 10px;
}
h4{
text-align: center;
}
#canvas{
width: 500px;
height: 600px;
border: 1px solid #ddd;
margin: 10px auto;
position: relative;
background: #f9f9f9;
overflow: hidden;
}
.body{
width: 282px;
height: 485px;
border-radius:137px;
border: 5px solid #000;
position: absolute;
top: 5%;
left: 50%;
margin-left: -150px;
overflow: hidden;
background: #ffdd40;
z-index: 2;
}
.niuzaiku_b{
width: 100%;
height: 125px;
background: #2074a0;
border-top: 5px solid #000;
position: absolute;
bottom: 0;
overflow: hidden;
}
.niuzaiku_m{
width: 200px;
height: 70px;
border: 5px solid #000;
border-bottom: 0 none;
background: #2074a0;
position: absolute;
left: 50%;
margin-left: -105px;
bottom: 125px;
}
.niuzaiku_t{
width: 96px;
height: 18px;
border: 5px solid #000;
background: #2074a0;
position: absolute;
top: 46%;
}
.niuzaiku_l{
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: left;
-moz-transform-origin: left;
-ms-transform-origin: left;
-o-transform-origin: left;
transform-origin: left;
left: -10px;
border-left: 0 none;
}
.niuzaiku_r{
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: right;
-moz-transform-origin: right;
-ms-transform-origin: right;
-o-transform-origin: right;
transform-origin: right;
right: -10px;
border-right: 0 none;
}
.kou_l,.kou_r{
width: 0px;
height: 0px;
background: #000;
line-height: 18px;
border: 5px solid #000;
border-radius: 50%;
}
.kou_l{
position: absolute;
top: 4px;
right: 5px;
}
.kou_r{
position: absolute;
top: 4px;
left: 5px;
}
.koudai{
width: 45%;
height: 56px;
border: 5px solid #000;
margin: 45px auto;
border-radius: 0 0 30px 30px;
}
.kuxian{
height: 54px;
width: 0px;
border: 3px solid #000;
left: 50%;
margin-left: -3px;
position: absolute;
bottom: 0;
border-radius: 30px 30px 0 0;
}
.dou_l,.dou_r{
width: 46px;
height: 55px;
border: 5px solid #2074a0;
border-bottom: 5px solid #000;
border-radius: 50%;
position: absolute;
}
.dou_l{
left: -17px;
top: -16px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
border-right: 5px solid #000;
}
.dou_r{
right: -17px;
top: -16px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
border-left: 5px solid #000;
}
.eye{
width: 224px;
height: 112px;
margin: 70px auto;
display: flex;
flex-flow: row;
}
.eyes{
width: 50%;
height: 100%;
border: 6px solid #000;
box-sizing: border-box;
border-radius: 50%;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
}
@-webkit-keyframes zhuzi{
0%{-webkit-transform: translate(0,0) rotate(0deg)}
10%{-webkit-transform: translate(-20px,0) rotate(0deg)}
20%{-webkit-transform: translate(-20px,0) rotate(0deg)}
30%{-webkit-transform: translate(0,0) rotate(0deg)}
50%{-webkit-transform: translate(0,0) rotate(0deg)}
60%{-webkit-transform: translate(20px,0) rotate(14deg)}
70%{-webkit-transform: translate(20px,0) rotate(14deg)}
80%{-webkit-transform: translate(0,0) rotate(0deg)}
}
@-moz-keyframes zhuzi{
0%{-moz-transform: translate(0,0) rotate(0deg)}
10%{-moz-transform: translate(-20px,0) rotate(0deg)}
20%{-moz-transform: translate(-20px,0) rotate(0deg)}
30%{-moz-transform: translate(0,0) rotate(0deg)}
50%{-moz-transform: translate(0,0) rotate(0deg)}
60%{-moz-transform: translate(20px,0) rotate(14deg)}
70%{-moz-transform: translate(20px,0) rotate(14deg)}
80%{-moz-transform: translate(0,0) rotate(0deg)}
}
@-ms-keyframes zhuzi{
0%{-ms-transform: translate(0,0) rotate(0deg)}
10%{-ms-transform: translate(-20px,0) rotate(0deg)}
20%{-ms-transform: translate(-20px,0) rotate(0deg)}
30%{-ms-transform: translate(0,0) rotate(0deg)}
50%{-ms-transform: translate(0,0) rotate(0deg)}
60%{-ms-transform: translate(20px,0) rotate(14deg)}
70%{-ms-transform: translate(20px,0) rotate(14deg)}
80%{-ms-transform: translate(0,0) rotate(0deg)}
}
@-o-keyframes zhuzi{
0%{-o-transform: translate(0,0) rotate(0deg)}
10%{-o-transform: translate(-20px,0) rotate(0deg)}
20%{-o-transform: translate(-20px,0) rotate(0deg)}
30%{-o-transform: translate(0,0) rotate(0deg)}
50%{-o-transform: translate(0,0) rotate(0deg)}
60%{-o-transform: translate(20px,0) rotate(14deg)}
70%{-o-transform: translate(20px,0) rotate(14deg)}
80%{-o-transform: translate(0,0) rotate(0deg)}
}
@keyframes zhuzi{
0%{transform: translate(0,0) rotate(0deg)}
10%{transform: translate(-20px,0) rotate(0deg)}
20%{transform: translate(-20px,0) rotate(0deg)}
30%{transform: translate(0,0) rotate(0deg)}
50%{transform: translate(0,0) rotate(0deg)}
60%{transform: translate(20px,0) rotate(14deg)}
70%{transform: translate(20px,0) rotate(14deg)}
80%{transform: translate(0,0) rotate(0deg)}
}
.zhuzi{
background: #000;
width: 44px;
height: 44px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
-webkit-transform: translate(0,0) rotate(0deg);
-moz-transform: translate(0,0) rotate(0deg);
-ms-transform: translate(0,0) rotate(0deg);
-o-transform: translate(0,0) rotate(0deg);
transform: translate(0,0) rotate(0deg);
-webkit-animation:
