CSS3绘制的军曹giroro卡通图像
2012-05-03 15:15
148 查看
1.先看效果图吧,chrome截图
<IGNORE_JS_OP>
7 天前 上传
下载附件 (58.34 KB)
2. 因为是初学,今天画了一下午功夫画了个自己喜欢的动画片人物。呵呵,细节方面做的还不够。欢迎大家给点意见啊。
代码如下: 请用chrome\firefox\safari等浏览器。ie9以下明显不支持的,ie9兼容性也差吧,我还没有测试ie9
<IGNORE_JS_OP>
7 天前 上传
下载附件 (58.34 KB)
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>
相关文章推荐
- 使用HTML和CSS3绘制基本卡通图案的示例分享
- 奇强!使用CSS3绘制卡通人物头像
- css3绘制三角形
- WPF中,如何使用图像API进行绘制而不是XAML?——出自《IT168》
- 使用图像绘制
- Java2D 图像缓冲与重复绘制
- 使用CSS3绘制转盘图抽奖功能
- OpenCV 鼠标手动绘制掩码图像
- 图像轮廓的提取和绘制
- android图像绘制(七)ClipRect局部绘图/切割原图绘制总结
- python图像读取、修改和绘制
- 关于canvas在retina屏下绘制文字或图像模糊的解决方案
- GDI高速图像绘制
- C 图像绘制函数(一)
- 【其他部分 第二章 C语言图形和函数图像的绘制】
- Canvas入门(3):图像处理和绘制文字
- canvas绘制图像或者文字时模糊
- PHP扩展类JpGraph绘制统计图像 (一) 图表绘制
- 关于通用雷达信号的时频分析与图像绘制(Matlab)
- OpenCV: 寻找图像轮廓并绘制