CSS3绘制的军曹giroro卡通图像

1.先看效果图吧，chrome截图
<IGNORE_JS_OP>giroro.png


2. 因为是初学，今天画了一下午功夫画了个自己喜欢的动画片人物。呵呵，细节方面做的还不够。欢迎大家给点意见啊。
    代码如下：  请用chrome\firefox\safari等浏览器。ie9以下明显不支持的，ie9兼容性也差吧，我还没有测试ie9

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css3</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
        *{margin:0;padding:0;}
        ul{list-style:none}
        #huabu{width:800px;height:800px;background:#fff;margin:100px auto;position:relative}
        #huabu div{position:absolute}
        #face{z-index:100;}
        .head01{background:#65323b;width:260px;height:180px;border-radius:120px 120px 50px 50px;left:0;top:-10px;border:1px solid #483c3c;box-shadow:0 1px 4px #b0767c inset;}
        .head02{background:#a84f65;width:258px;height:175px;border-radius:20px 34px 145px 145px;top:90px;left:0px;border:2px solid #483c3c;}
        .head03{background:#65323b;width:260px;height:100px;top:40px}
        .eye{border:1px solid #000;background:#fff;width:120px;height:55px;border-bottom-left-radius:60px;border-bottom-right-radius:60px}
        .eye01{top:112px;left:-10px}
        .eye02{top:112px;left:150px}
        .yz01,.yz02{background:#000;width:60px;height:30px;border-bottom-left-radius:30px;border-bottom-right-radius:30px;left:35px}
        .eye span{position:absolute;border:1px solid #281f1f;width:7px;height:1;border-radius:20px}
        .eye span.line01{-moz-transform:rotate(-84deg);-webkit-transform:rotate(-84deg);right:-6px;top:-5px}
        .eye span.line02{-moz-transform:rotate(84deg);-webkit-transform:rotate(84deg);left:-5px;top:-5px}
        .rotates30{-moz-transform:rotate(25deg);-webkit-transform:rotate(25deg)}
        .rotaten30{-moz-transform:rotate(-25deg);-webkit-transform:rotate(-25deg)}
        .rotates70{-moz-transform:rotate(70deg);-webkit-transform:rotate(70deg)}
        .rotaten70{-moz-transform:rotate(-65deg);-webkit-transform:rotate(-65deg)}
        .mouth{width:100px;height:20px;border-radius:100px 130px 130px 190px / 35px 45px 35px 40px;bottom:0;left:75px;background:#fff;border:2px solid #483c3c;overflow:hidden}
        .tongou{width:40px;height:60px;background:#b37079;border-radius:40px;top:-52px;left:33px;border:1px solid #483c3c}
        .ear{width:250px;height:100px;background:#3d111e;box-shadow:-4px 8px 0  #5e373c inset;border-radius:50px 35px 40px 20px;border:2px solid #463231}
        .ear01{top:100px;left:103px}
        .ear02{top:95px;left:-96px}
        .scar{width:140px;height:2px;background:#463231;border-radius:40px;-moz-transform:rotate(65deg);-webkit-transform:rotate(65deg);top:62px;left:130px}
        .scar span{position:absolute;left:0;top:50px;width:13px;height:1px;background:#463231;-moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);}
        .scar span.scar01{left:10px;top:0}
        .scar span.scar02{left:20px;top:0}
        .scar span.scar03{left:100px;top:0}
        .scar span.scar04{width:12px;left:110px;top:0}
        .scar span.scar05{width:10px;left:120px;top:0}
        .kl{background:#ffeb05;width:28px;height:24px;border-radius:12px 12px 10px 10px;left:116px;top:58px;border:1px solid #331600}
        .k{background:#4b313e;width:10px;height:10px;border-radius:5px;top:7px}
        .k01{left:2px;}
        .k02{left:16px}
        .jiao{width:5px;height:12px;background:#ffeb05;top:24px;border-radius:0 0 5px 5px;border:1px solid #331600;border-top:none}
        .jiao01{left:7px}
        .jiao02{left:14px}
        .tj{width:30px;height:16px;background:#f294ac;border-radius:10px 6px 8px 10px;top:10px;left:90px;-moz-transform:rotate(-30deg);-webkit-transform:rotate(-30deg);opacity:0.6}
        #body{width:300px;top:240px}
        .belly{width:180px;height:200px;background:#a84f65;z-index:80;border-radius:120px 120px 120px 150px /300px 250px 150px 180px;left:40px;border:1px solid #331600;border-bottom:none;box-shadow:0 -4px 2px #bd6b84 inset}
        .belly_white{width:180px;height:200px;z-index:80;border-radius:120px 120px 150px 150px /300px 250px 150px 180px;border:1px solid #331600;border-bottom:none;background:#fff;-moz-transform:scale(0.88);-webkit-transform:scale(0.88);left:0;top:-10px}
        .arm{height:240px;width:30px;background:#a84f65;border:1px solid #331600;border-bottom:none;border-radius:40px 30px 30px 10px/ 200px 190px 80px 50px}
        .arm_left{-moz-transform:rotate(20deg);-webkit-transform:rotate(20deg);left:25px;top:-20px}
        .arm_right{-moz-transform:rotate(-20deg);-webkit-transform:rotate(-20deg);left:210px;top:-20px;z-index:90;border-radius:40px 30px 90px 50px/ 200px 190px 80px 50px}
        .hand{position:absolute;bottom:0}        
        .hand div{position:absolute;width:8px;height:10px;background:#fff;border:1px solid #331600;border-bottom:0;border-left:0;border-radius:1px}
        .hand div.item01{height:7px;-moz-transform:rotate(-30deg);-webkit-transform:rotate(-30deg);top:-5px;left:1px}
        .hand div.item02{width:8px;height:6px;-moz-transform:rotate(-50deg);-webkit-transform:rotate(-50deg);top:-4px;left:10px}
        .hand div.item03{height:8px;-moz-transform:rotate(-20deg);-webkit-transform:rotate(-20deg);top:-8px;left:16px}
        .hand div.item04{width:4px;height:7px;-moz-transform:rotate(-20deg);-webkit-transform:rotate(-20deg);top:-7px;left:25px}
        .hand div.item05{width:7px;height:15px;-moz-transform:rotate(-30deg);-webkit-transform:rotate(-30deg);top:-14px;left:0}
        .arm span{width:10px;height:5px;background:#932643;position:absolute;left:8px;bottom:12px;border-radius:10px 2px 2px 0 / 4px 2px 2px 0}
        .belt{background:#2c3959;width:45px;height:240px;-moz-transform:rotate(45deg);-webkit-transform:rotate(45deg);z-index:99;left:110px;top:-20px;border-radius:0 20px 40px 50px /0 20px 0 50px;box-shadow:0 0 2px #000}
        .box{width:45px;height:60px;background:#dfe2e7;top:90px;border-left:1px solid #333;border-bottom:1px solid #333;box-shadow:0 0 4px 1px #333}
        .leg{width:30px;height:200px;background:#A84F65;top:130px;border-radius:20px 10px 0 20px / 60px 10px 0 180px;border:1px solid #331600;z-index:10}
        .foot{width:30px;height:15px;background:#A84F65;border-radius:30px 6px 8px 10px / 10px 6px 8px 10px;bottom:-8px;left:-1px;-moz-transform:rotate(-30deg);-webkit-transform:rotate(-30deg);border:1px solid #331600;border-top:none;border-right:none}
        .foot_right{-moz-transform:scale(-1,1) rotate(-30deg);-webkit-transform:scale(-1,1) rotate(-30deg);left:12px}
        .leg_left{left:95px}
        .rou{width:20px;left:-10px;background:#A84F65;top:2px;height:120px;border-radius:50px / 150px;-moz-transform:rotate(-8deg);-webkit-transform:rotate(-8deg);border:1px solid #331600;z-index:1;border-right:none;border-bottom:none}
        .leg_right{left:140px}
        .rou02{width:20px;left:17px;background:#A84F65;top:2px;height:120px;border-radius:50px / 150px;-moz-transform:rotate(4deg) scale(-1,1);-webkit-transform:rotate(4deg) scale(-1,1);border:1px solid #331600;z-index:1;border-right:none;border-bottom:none}
        .shadow01{width:90px;height:30px;border-radius:0 0 70px 70px / 0 0 60px 60px;background:#791c2f;opacity:0.8;z-index:70;left:90px;top:190px;box-shadow:0 -2px 3px #791c2f inset}
        .white{width:13px;height:30px;background:#fff;left:127px;top:201px;z-index:80}
</style>

</head>
<body>
        <div id="huabu">
                <div id="face">
                        <div class="ear ear01 rotates70"></div>
                        <div class="ear ear02 rotaten70"></div>
                        <div class="head01"><div class="kl"><div class="k k01"></div><div class="k k02"></div><div class="jiao jiao01"></div><div class="jiao jiao02"></div></div></div>
                        <div class="head02"><div class="mouth"><div class="tongou"></div></div><div class="scar"><span class="scar01"></span><span class="scar02"></span><span class="scar03"></span><span class="scar04"></span><span class="scar05"></span></div><div class="tj"></div></div>
                        <div class="eye eye01 rotates30"><div class="yz01"></div><span class="line01 .rotates30"></span></div>
                        <div class="eye eye02 rotaten30"><div class="yz02"></div><span class="line02"></span></div>
                </div>
                <div id="body">
                        <div class="belly">
                                <div class="belly_white">
                                </div>
                        </div>
                        <div class="arm arm_left">
                                <div class="hand">
                                        <div class="item01"></div>
                                        <div class="item02"></div>                                
                                </div>
                                <span></span>
                        </div>
                        <div class="arm arm_right">
                                <div class="hand">
                                        <div class="item05"></div>        
                                </div>
                        </div>
                        <div class="belt"><div class="box"></div></div>
                        <div class="leg leg_left"><div class="foot"></div><div class="rou"></div></div>
                        <div class="leg leg_right"><div class="foot foot_right"></div><div class="rou02"></div></div>
                        <div class="shadow01"></div>
                        <div class="white"></div>
                </div>
        </div>
</body>
</html>

 

posted @ 2012-05-03 15:15  脉凌网络  阅读(412)  评论(2)  编辑  收藏  举报