使用css3实现多啦A梦代码

    .doraemon{        position: relative;        width:500px;        margin:0 auto;    }    .doraemon .head{        width:320px;        height: 300px;        border-radius: 150px;        background: #07bbee;        background: -webkit-radial-gradient(right top,#fff 10%,#07bbee 20%,#10a6ce 75%,#000);        background: -moz-radial-gradient(right top,#fff 10%,#07bbee 20%,#10a6ce 75%,#000);        background: -ms-radial-gradient(right top,#fff 10%,#07bbee 20%,#10a6ce 75%,#000);        border:#555 2px solid;        box-shadow: -5px 10px 15px rgba(0,0,0,0.45);        position: relative;    }    /*眼睛*/    .doraemon .eyes{        position:relative;    }    .doraemon .eyes .eye{        width:72px;        height: 82px;        position:absolute;        top:40px;        background: #fff;        border: 2px solid #000;        border-radius: 35px 35px;        z-index: 10;    }    .doraemon .eyes .eye .black{        width:14px;        height: 14px;        background: #000;        border-radius:14px;        position: relative;        top:40px;    }    .doraemon .eyes .left{        left:82px;    }    .doraemon .eyes .right{        left:156px;    }    .doraemon .eyes .eye .bleft{        left: 50px;    }    .doraemon .eyes .eye .bright{        left:7px;    }    .doraemon .face{        position: relative;        z-index: 2;    }    /*自然底色*/    .doraemon .face .white{        border:2px #000 solid;        width:265px;        height: 195px;        border-radius: 150px 150px;        position:absolute;        top:75px;        left:25px;        background: #fff;        background: -webkit-radial-gradient(right top,#fff 75%,#eee 80%,#999 90%,#444);        background: -moz-radial-gradient(right top,#fff 75%,#eee 80%,#999 90%,#444);        background: -ms-radial-gradient(right top,#fff 75%,#eee 80%,#999 90%,#444);    }    /*鼻子*/    .doraemon .face .nose{        width:30px;        height: 30px;        background: #c93300;        border:2px solid #000;        border-radius: 30px;        position:absolute;        top:110px;        left:140px;        z-index: 3;    }    /*鼻子上面的光*/    .doraemon .face .nose .light{        border-radius: 5px ;        box-shadow: 19px 8px 5px #fff;        height: 10px ;        width:10px;    }    /*鼻子下面的线*/    .doraemon .face .nose_line {        width:3px;        height: 100px;        background: #333;        position:absolute;        top:143px;        left:155px;        z-index: 3;    }    /*嘴巴*/    .doraemon .face .mouth{        width:220px;        height: 400px;        border-bottom: 3px solid #333;        border-radius: 120px;        position:absolute;        top:-160px;        left: 45px;    }    /*胡须*/    .doraemon .whiskers{        background: #fff;        width:220px;        height: 80px;        position:relative;        top:120px;        left:45px;        border-radius: 15px;        z-index: 2;    }    .doraemon .whiskers .whisker{        background: #333;        height: 2px;        width:60px;        position: absolute;        z-index: 2;    }    .doraemon .whiskers .rTop{        left:165px;        top: 25px;    }    .doraemon .whiskers .rt{        left: 167px;        top:45px;    }    .doraemon .whiskers .rBottom{        left: 165px;        top: 65px;    }    .doraemon .whiskers .lTop{        left:0;        top:25px;    }    .doraemon .whiskers .lt{        top:45px;        left:-2px;    }    .doraemon .whiskers .lBottom{        top:65px;        left:0;    }    .doraemon .whiskers .r160 {        transform: rotate(160deg);        -webkit-transform: rotate(160deg);    }    .doraemon .whiskers .r20{        transform: rotate(20deg);        -webkit-transform: rotate(20deg);    }    /*围脖*/.doraemon .choker{    position: relative;z-index:4;    top: -40px;left: 45px;    background:#C40;    /*线性渐变 让围巾看上去更自然*/    background: -webkit-gradient(linear,left top,left bottom,from(#C40),to(#800400));    background: -moz-linear-gradient(center top,#C40,#800400);    background: -ms-linear-gradient(center top,#C40,#800400);    border: 2px solid #000000;    border-radius: 10px 10px 10px 10px;    height: 20px;width: 230px;}/*铃铛*/.doraemon .choker .bell{    width:40px;height:40px; _overflow:hidden;/*IE6 hack*/    border-radius:50px;    border:2px solid #000;    background:#f9f12a;    background: -webkit-gradient(linear, left top, left bottom, from(#f9f12a),color-stop(0.5, #e9e11a), to(#a9a100));        background: -moz-linear-gradient(top, #f9f12a, #e9e11a 75%,#a9a100);     background: -ms-linear-gradient(top, #f9f12a, #e9e11a 75%,#a9a100);    box-shadow:-5px 5px 10px rgba(0,0,0,0.25);    position:relative;    top:5px;left:90px;}/*双横线*/.doraemon .choker .bell_line{    background:#F9F12A;    border-radius: 3px 3px 0px 0px;    border: 2px solid #333333;    height: 2px;width: 36px;    position: relative;top: 10px;}/*黑点*/.doraemon .choker .bell_circle {    background:#000;    border-radius: 5px;    height: 10px;    width: 12px;    position: relative;    top: 14px; left: 14px;}/*黑点下的线*/.doraemon .choker .bell_under {    background:#000;    height: 15px;width: 3px;    left: 18px;top: 10px;    position: relative;    }/*高光*/.doraemon .choker .bell_light {    border-radius: 10px;    box-shadow: 19px 8px 5px #FFF;    height:12px;width:12px;    left: 5px;top: -35px;    position: relative;    opacity: 0.7;}.doraemon .bodys{position: relative;top:-310px;}/*肚子*/.doraemon .bodys .body{    background:#07BEEA;    background: -webkit-gradient(linear,right top,left top,from(#07beea),color-stop(0.5, #0073b3),color-stop(0.75,#00b0e0), to(#0096be));    background: -moz-linear-gradient(right center,#07beea,#0073b3 50%,#00b0e0 75%,#0096be 100%);    background: -ms-linear-gradient(right center,#07beea,#0073b3 50%,#00b0e0 75%,#0096be 100%);    border: 2px solid #333;    height: 165px;width: 220px;    position: absolute;    left: 50px;top:265px;}/*白色肚兜*/.doraemon .bodys .wraps{    background:#FFF;    background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.75,#fff),color-stop(0.83,#eee),color-stop(0.90,#999),color-stop(0.95,#444), to(#000));    background: -moz-linear-gradient(right top,#FFF,#FFF 75%,#EEE 83%,#999 90%,#444 95%,#000);    background: -ms-linear-gradient(right top,#FFF,#FFF 75%,#EEE 83%,#999 90%,#444 95%,#000);    border: 2px solid #000;    border-radius: 85px;    position: absolute;    height:170px;width:170px;    left:72px;top:230px;}/*口袋*/.doraemon .bodys .pocket{    position:relative;    width:130px;height:130px;    border-radius:65px;    background:#fff;    background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.70,#fff),color-stop(0.75,#f8f8f8),color-stop(0.80,#eee),color-stop(0.88,#ddd), to(#fff));    background: -moz-linear-gradient(right top, #fff, #fff 70%,#f8f8f8 75%,#eee 80%,#ddd 88% , #fff);    background: -ms-linear-gradient(right top, #fff, #fff 70%,#f8f8f8 75%,#eee 80%,#ddd 88% , #fff);    border:2px solid #000;    top:250px;left:92px;}/*挡住口袋一半*/.doraemon .bodys .pocket_mask{    position:relative;    width:134px;height:60px;    background:#fff;    border-bottom:2px solid #000;    top:125px;left:92px;}/*右手*/.doraemon .hand_right{    height: 100px;width: 100px;    position: absolute;    top: 272px;left: 248px;}/*左手*/.doraemon .hand_left{    height: 100px;width: 100px;    position: absolute;    top: 272px;left:-10px;}/*手臂公共部分*/.doraemon .arm {    background:#07BEEA;    background: -webkit-gradient(linear, left top, left bottom, from(#07beea),color-stop(0.85,#07beea), to(#555));    background: -moz-linear-gradient(center top , #07BEEA, #07BEEA 85%, #555);    background: -ms-linear-gradient(center top , #07BEEA, #07BEEA 85%, #555);    border: 1px solid #000000;    box-shadow: -10px 7px 10px rgba(0, 0, 0, 0.35);    height: 50px;width: 80px;    z-index:-1;position: relative;}/*右手手臂*/.doraemon .hand_right .arm {    top: 17px;    transform: rotate(35deg);-webkit-transform:rotate(35deg);}/*左手手臂*/.doraemon .hand_left .arm {    top: 17px;background:#0096BE;box-shadow: 5px -7px 10px rgba(0, 0, 0, 0.25);    transform: rotate(145deg);-webkit-transform:rotate(145deg);}/*圆形手掌公共部分*/.doraemon .circle{    position:absolute;    width:60px;height:60px;    border-radius:30px;    border:2px solid #000;    background:#fff;    background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.5,#fff),color-stop(0.70,#eee),color-stop(0.8,#ddd), to(#999));        background: -moz-linear-gradient(right top, #fff, #fff 50%, #eee 70%, #ddd 80%,#999); }/*右手手掌*/.doraemon .hand_right .circle{    left:40px;top:32px;}/*左手手掌*/.doraemon .hand_left .circle{    left:-20px;top:32px;}/*手臂和身体结合处*/.doraemon .arm_rewrite{    background:#07BEEA;    height: 45px;width:5px;    position: relative;}/*右手结合处*/.doraemon .hand_right .arm_rewrite{    top: -45px;left:22px;}/*左手结合处*/.doraemon .hand_left .arm_rewrite{    top: -45px;left:60px;background:#0096be}/*脚*/.doraemon .foot {    height: 40px;    left: 20px;    position: relative;    top: -141px;    width: 280px;}/*左脚*/.doraemon .foot .left {    background:#fff;    background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.75,#fff),color-stop(0.85,#eee), to(#999));        background: -moz-linear-gradient(right top , #fff, #fff 75%, #EEE 85%, #999);        background: -ms-linear-gradient(right top , #fff, #fff 75%, #EEE 85%, #999);    border: 2px solid #333;    border-radius: 80px 60px 60px 40px;    box-shadow: -6px 0 10px rgba(0, 0, 0, 0.35);    height: 30px;    left: 8px;    position: relative;    top:65px;    width: 125px;}/*右脚*/.doraemon .foot .right {    background:#fff;    background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.75,#fff),color-stop(0.85,#eee), to(#999));        background: -moz-linear-gradient(right top , #fff, #fff 75%, #EEE 85%, #999);        background: -ms-linear-gradient(right top , #fff, #fff 75%, #EEE 85%, #999);    border: 2px solid #333;    border-radius: 80px 60px 60px 40px;    box-shadow:-6px 0px 10px rgba(0,0,0,0.35);    height: 30px;width: 125px;    top:31px;left:141px;    position: relative;}.doraemon .foot .foot_rewrite{    position:relative;top:-11px;left:130px;_left:127px;    width:20px;height:10px;    background:#fff;    background: -webkit-gradient(linear, right top, left bottom, from(#666),color-stop(0.83,#fff), to(#fff));    background: -moz-linear-gradient(right top, #666, #fff 83%, #fff);     background: -ms-linear-gradient(right top, #666, #fff 83%, #fff);     border-top:2px solid #000;    border-right:2px solid #000;    border-left:2px solid #000;    border-top-right-radius:40px;    border-top-left-radius:40px;}/*让眼睛动起来*/@-webkit-keyframes eyemove{    80%{margin:0;}    85%{margin:-20px 0 0 0;}    90%{margin:0 0 0 0;}    93%{margin:0 0 0 7px;}    96%{margin:0 0 0 0;}}@-moz-keyframes eyemove{    80%{margin:0;}    85%{margin:-20px 0 0 0;}    90%{margin:0 0 0 0;}    93%{margin:0 0 0 7px;}    96%{margin:0 0 0 0;}}@-ms-keyframes eyemove{    80%{margin:0;}    85%{margin:-20px 0 0 0;}    90%{margin:0 0 0 0;}    93%{margin:0 0 0 7px;}    96%{margin:0 0 0 0;}}