Skip to content

Instantly share code, notes, and snippets.

@wusuopu

wusuopu/doraemon.html

Created December 4, 2013 14:53
Show Gist options
  • Save wusuopu/7788787 to your computer and use it in GitHub Desktop.
Save wusuopu/7788787 to your computer and use it in GitHub Desktop.
Download ZIP
CSS绘制多啦A梦
Raw
doraemon.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>ドラえもん</title>
<style type="text/css">
@-moz-keyframes eye {
0% { top: 8px;}
50% { top: 19px;}
100% { top: 8px;}
}
@-webkit-keyframes eye {
0% { top: 8px;}
50% { top: 19px;}
100% { top: 8px;}
}
.jqm {
width: 140px;
height: 200px;
border: 2px solid #333;
margin: 20px auto;
position: relative;
}
.jqm div {
position: absolute;
}
#fly {
width: 23px;
height: 20px;
background: white;
border-top: 2px solid black;
top: 2px;
left: 55px;
}
#fly div {
width: 1px;
height: 20px;
background: black;
left: 12px;
}
#head {
width: 110px;
height: 107px;
top: 16px;
left: 13px;
background: #0eb9f1;
border: 1px solid #818286;
border-radius: 55px;
-moz-border-radius: 55px;
-webkit-border-radius: 55px;
}
#face {
width: 94px;
height: 70px;
top: 28px;
left: 7px;
background: white;
border: 1px solid #818286;
border-radius: 35px;
-moz-border-radius: 35px;
-webkit-border-radius: 35px;
}
.eyes {
width: 26px;
height: 29px;
top: -15px;
background: white;
border: 1px solid #818286;
border-radius: 13px;
-moz-border-radius: 13px;
-webkit-border-radius: 13px;
z-index: 3;
}
#leftEye {left: 18px;}
#leftEye div {
width: 6px;
height: 6px;
top: 19px;
left: 16px;
background: #000;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
animation: eye 3s infinite;
-moz-animation: eye 3s infinite;
-webkit-animation: eye 3s infinite;
}
#rightEye {left: 46px;}
#rightEye div {
width: 6px;
height: 6px;
top: 19px;
left: 4px;
background: #000;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
animation: eye 3s infinite;
-moz-animation: eye 3s infinite;
-webkit-animation: eye 3s infinite;
}
#nose {
width: 10px;
height: 10px;
border: 1px solid #818286;
background: #cc3300;
top: 9px;
left: 40px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
z-index: 3;
}
#mouth {
width: 80px;
height: 40px;
background: #fff;
border: 1px solid #818286;
top: 18px;
left: 6px;
border-radius: 0 0 40px 40px;
-moz-border-radius: 0 0 40px 40px;
-webkit-border-radius: 0 0 40px 40px;
z-index: 1;
}
#mustache {
width: 82px;
height: 27px;
background: #fff;
left: 6px;
top: 14px;
z-index: 2;
}
#mustache div{
width: 21px;
height: 1px;
background: #828186;
left: 4px;
}
#mustache div#l1{
top: 9px;
transform: rotate(10deg);
-moz-transform: rotate(10deg);
-webkit-transform: rotate(10deg);
}
#mustache div#l2{
top: 14px;
}
#mustache div#l3{
top: 19px;
transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
}
#mustache div#r1{
top: 9px;
left: 56px;
transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
}
#mustache div#r2{
top: 14px;
left: 56px;
}
#mustache div#r3{
top: 19px;
left: 56px;
transform: rotate(10deg);
-moz-transform: rotate(10deg);
-webkit-transform: rotate(10deg);
}
#cc {
width: 1px;
height: 38px;
background: #818286;
left: 46px;
top: 21px;
z-index: 3;
}
/* ---------------------- */
#neck {
width: 81px;
height: 6px;
border: 1px solid #830e00;
background: #d63e00;
top: 110px;
left: 28px;
border-radius: 28px;
-moz-border-radius: 28px;
-webkit-border-radius: 28px;
z-index: 2;
}
/* ---------------------- */
#shoulder {
width: 78px;
height: 20px;
background: #0eb9f1;
top: 110px;
left: 30px;
z-index: 1;
}
/* ---------------------- */
#body {
width: 76px;
height: 45px ;
border: 1px solid #828186;
border-top: 0;
border-bottom: 0;
background: #0eb9f1;
top: 130px;
left: 30px;
z-index: 1;
}
#bagbg {
width: 61px;
height: 46px;
border: 1px solid #828186;
background: #fff;
left: 8px;
top: -13px;
border-radius: 10px 10px 30px 30px;
-moz-border-radius: 10px 10px 30px 30px;
-webkit-border-radius: 10px 10px 30px 30px;
}
#bag {
width: 46px;
height: 23px;
border: 1px solid #828186;
background: #fff;
left: 6px;
top: 14px;
border-radius: 0 0 23px 23px;
-moz-border-radius: 0 0 23px 23px;
-webkit-border-radius: 0 0 23px 23px;
}
#tail {
width: 7px;
height: 4px;
top: 41px;
left: 34px;
background: #fff;
border: 1px solid #828186;
border-bottom: 0;
z-index: 3;
border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
}
/* ---------------------- */
#bell {
width: 16px;
height: 16px;
top: 114px;
left: 60px;
z-index: 5;
}
#bellTop {
width: 14px;
height: 3px;
border: 1px solid #828186;
background: #fff839;
border-radius: 7px 7px 0 0;
-moz-border-radius: 0 0 23px 23px;
-webkit-border-radius: 0 0 23px 23px;
}
#bellBottom {
width: 14px;
height: 8px;
border: 1px solid #828186;
background: #fff839;
top: 5px;
border-radius: 0 0 7px 7px;
-moz-border-radius: 0 0 7px 7px;
-webkit-border-radius: 0 0 7px 7px;
}
#bellPoint {
width: 6px;
height: 6px;
background: #333;
left: 5px;
top: 3px;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}
#bellLine {
width: 2px;
height: 5px;
background: #828186;
top: 9px;
left: 7px;
}
/* ---------------------- */
.arm {
width: 19px;
height: 17px;
border: 1px solid #828186;
background: #0eb9f1;
top: 120px;
z-index: -1;
}
#leftArm {
left: 17px;
transform: rotate(330deg);
-moz-transform: rotate(330deg);
-webkit-transform: rotate(330deg);
}
#rightArm {
left: 102px;
transform: rotate(30deg);
-moz-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
}
/* ---------------------- */
.hand {
height: 20px;
width: 20px;
background: #fff;
border: 1px solid #828186;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
top: 126px;
}
#leftHand {
left: 2px;
}
#rightHand {
left: 115px;
}
/* ---------------------- */
.leg {
width: 45px;
height: 11px;
background: #fff;
border: 1px solid #828186;
top: 175px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#leftLeg {
left: 20px;
border-top-left-radius: 10px;
-moz-border-top-left-radius: 10px;
-webkit-border-top-left-radius: 10px;
}
#rightLeg {
left: 72px;
border-top-right-radius: 10px;
-moz-border-top-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
}
</style>
</head>
<body>
<h1>ドラえもん</h1>
<div class="jqm">
<div id="fly">
<div></div>
</div>
<div id="head">
<div id="face">
<div id="leftEye" class="eyes">
<div></div>
</div>
<div id="rightEye" class="eyes">
<div></div>
</div>
<div id="nose"></div>
<div id="mouth"></div>
<div id="mustache">
<div id="l1"></div>
<div id="l2"></div>
<div id="l3"></div>
<div id="r1"></div>
<div id="r2"></div>
<div id="r3"></div>
</div>
<div id="cc"></div>
</div>
</div>
<div id="neck"></div>
<div id="shoulder"></div>
<div id="body">
<div id="bagbg">
<div id="bag"></div>
</div>
<div id="tail"></div>
</div>
<div id="bell">
<div id="bellTop"></div>
<div id="bellBottom"></div>
<div id="bellPoint"></div>
<div id="bellLine"></div>
</div>
<div id="leftArm" class="arm"></div>
<div id="rightArm" class="arm"></div>
<div id="leftHand" class="hand"></div>
<div id="rightHand" class="hand"></div>
<div id="leftLeg" class="leg"></div>
<div id="rightLeg" class="leg"></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment