使用HTML和CSS3绘制基本卡通图案的示例分享

纯HTML+CSS实现阿童木头像
先上最终效果图:

在里面主要用的了CSS中的几个属性:position—定位;border-radius—圆角;box-shadow—阴 影;background(linear-gradient)—渐变;transform—旋转和变换;animation —动画,技术点不是很多,主要是细心和耐心。还是直接上最终源码吧。由于考虑浏览器的CSS兼容性,代码比较多。

CSS Code复制内容到剪贴板 <!DOCTYPE html>     <html xmlns="http://www.w3.org/1999/xhtml">     <head>         <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />         <title>纯CSS漫画</title>         <style type="text/css">             * {                 margin: 0;                 padding: 0;             }                  .outer-circle {                 positionabsolute;                 top32px;                 left44px;                 width289px;                 height289px;                 border4px solid #75BD4F;                 -moz-border-radius: 50%;                 -webkit-border-radius: 50%;                 border-radius: 50%;             }                  .inner-circle {                 positionrelative;                 width269px;                 height269px;                 border10px solid #F5F910;                 -moz-border-radius: 50%;                 -webkit-border-radius: 50%;                 border-radius: 50%;                 background-color#73BF43;             }                  .inner-circle div {                 positionabsolute;             }                  .inner-circle-light {                 top41px;                 left35px;                 -moz-box-shadow: 26px 26px 29px 37px #fff;                 -webkit-box-shadow: 26px 26px 29px 37px #fff;                 box-shadow: 26px 26px 29px 37px #fff;             }                  .header-top {                 top11px;                 rightright2px;                 z-index: 100;                 width180px;                 height90px;                 -moz-border-radius: 90px 90px 0 0;                 -webkit-border-radius: 90px 90px 0 0;                 border-radius: 90px 90px 0 0;                 background-color#000;                 -moz-transform: rotate(32deg);                 -ms-transform: rotate(32deg);                 -o-transform: rotate(32deg);                 -webkit-transform: rotate(32deg);                 transform: rotate(32deg);             }                  .header-left {                 top: -20px;                 left37px;                 width114px;                 height228px;                 -moz-border-radius: 228px 0 0 228px;                 -webkit-border-radius: 228px 0 0 228px;                 border-radius: 228px 0 0 228px;                 background-color#000;                 -moz-transform: rotate(26deg);                 -ms-transform: rotate(26deg);                 -o-transform: rotate(26deg);                 -webkit-transform: rotate(26deg);                 transform: rotate(26deg);             }                  .hair-left-1 {                 top15px;                 left53px;                 z-index: 55;                 width85px;                 height23px;                 -webkit-border-top-left-radius: 30px 180px;                 border-top-left-radius: 30px 180px;                 -webkit-border-bottom-left-radius: 30px 80px;                 border-bottom-left-radius: 30px 80px;                 background-color#000;                 -moz-transform: rotate(-74deg) skew(-42deg, 23deg);                 -ms-transform: rotate(-74deg) skew(-42deg, 23deg);                 -o-transform: rotate(-74deg) skew(-42deg, 23deg);                 -webkit-transform: rotate(-74deg) skew(-42deg, 23deg);                 transform: rotate(-74deg) skew(-42deg, 23deg);             }                  .hair-left-2 {                 top: -20px;                 left99px;                 z-index: 60;                 width49px;                 height37px;                 background-color#000;                 -moz-transform: rotate(-51deg) skew(-43deg, 0deg);                 -ms-transform: rotate(-51deg) skew(-43deg, 0deg);                 -o-transform: rotate(-51deg) skew(-43deg, 0deg);                 -webkit-transform: rotate(-51deg) skew(-43deg, 0deg);                 transform: rotate(-51deg) skew(-43deg, 0deg);             }                  .hair-rightright-1 {                 top70px;                 rightright1px;                 z-index: 60;                 width81px;                 height85px;                 -webkit-border-top-rightright-radius: 26px 120px;                 border-top-rightright-radius: 26px 120px;                 background-colorblack;                 -moz-transform: rotate(1deg) skew(-51deg, 0deg);                 -ms-transform: rotate(1deg) skew(-51deg, 0deg);                 -o-transform: rotate(1deg) skew(-51deg, 0deg);                 -webkit-transform: rotate(1deg) skew(-51deg, 0deg);                 transform: rotate(1deg) skew(-51deg, 0deg);             }                  .hair-rightright-2 {                 width60px;                 height10px;                 -webkit-border-bottom-left-radius: 100%;                 border-bottom-left-radius: 100%;                 background-color: rgba(0,0,0,0.2);             }                  .hair-light-1 {                 top30px;                 rightright45px;                 z-index: 105;                 width57px;                 height17px;                 -moz-border-radius: 100%;                 -webkit-border-radius: 100%;                 border-radius: 100%;                 background-colorwhite;                 -moz-transform: rotate(39deg);                 -ms-transform: rotate(39deg);                 -o-transform: rotate(39deg);                 -webkit-transform: rotate(39deg);                 transform: rotate(39deg);             }                  .hair-light-1-over {                 top32px;                 rightright38px;                 z-index: 105;                 width83px;                 height21px;                 -moz-border-radius: 100%;                 -webkit-border-radius: 100%;                 border-radius: 100%;                 background-colorblack;                 -moz-transform: rotate(41deg);                 -ms-transform: rotate(41deg);                 -o-transform: rotate(41deg);                 -webkit-transform: rotate(41deg);                 transform: rotate(41deg);             }                  .hair-light-2 {                 top16px;                 rightright104px;                 z-index: 105;                 width4px;                 height2px;                 -moz-border-radius: 2px;                 -webkit-border-radius: 2px;                 border-radius: 2px;                 background-colorwhite;                 -moz-transform: rotate(10deg);                 -ms-transform: rotate(10deg);                 -o-transform: rotate(10deg);                 -webkit-transform: rotate(10deg);                 transform: rotate(10deg);             }                  .ear {                 top141px;                 rightright36px;                 z-index: 110;                 width49px;                 height48px;                 border2px solid #000;                 border-bottom-width1px;                 -moz-border-radius: 50%;                 -webkit-border-radius: 50%;                 border-radius: 50%;                 background-color#F6C6B0;                 -moz-box-shadow: -4px 0 0 0 #de9876 inset;                 -webkit-box-shadow: -4px 0 0 0 #de9876 inset;                 box-shadow: -4px 0 0 0 #de9876 inset;                 -moz-transform: rotate(56deg) scaleY(1.4);                 -ms-transform: rotate(56deg) scaleY(1.4);                 -o-transform: rotate(56deg) scaleY(1.4);                 -webkit-transform: rotate(56deg) scaleY(1.4);                 transform: rotate(56deg) scaleY(1.4);             }                  .ear-inner-1 {                 top22px;                 left22px;                 z-index: 70;                 width9px;                 height5px;                 border-top1px solid #110b00;                 -moz-border-radius: 50%;                 -webkit-border-radius: 50%;                 border-radius: 50%;                 -moz-transform: rotate(-6deg);                 -ms-transform: rotate(-6deg);                 -o-transform: rotate(-6deg);                 -webkit-transform: rotate(-6deg);                 transform: rotate(-6deg);             }                  .ear-inner-2 {                 top19px;                 left18px;                 width14px;                 height7px;                 border-top2px solid #110b00;                 -moz-border-radius: 50%;                 -webkit-border-radius: 50%;                 border-radius: 50%;                 -moz-box-shadow: 0px 2px 0 0 #de9876 inset;                 -webkit-box-shadow: 0px 2px 0 0 #de9876 inset;                 box-shadow: 0px 2px 0 0 #de9876 inset;                 -moz-transform: rotate(-91deg);                 -ms-transform: rotate(-91deg);                 -o-transform: rotate(-91deg);                 -webkit-transform: rotate(-91deg);                 transform: rotate(-91deg);             }                  .ear-light {                 top21px;                 rightright34px;                 z-index: 105;                 width17px;                 height6px;                 -moz-border-radius: 100%;                 -webkit-border-radius: 100%;                 border-radius: 100%;                 background-color#FFF;                 -moz-transform: rotate(89deg);                 -ms-transform: rotate(89deg);                 -o-transform: rotate(89deg);                 -webkit-transform: rotate(89deg);                 transform: rotate(89deg);             }                  .ear-over {                 bottombottom: -44px;                 left: -33px;                 z-index: 55;                 width69px;                 height59px;                 -moz-border-radius: 50%;                 -webkit-border-radius: 50%;                 border-radius: 50%;                 background-color#f6c6b0;                 -moz-transform: rotate(26deg);                 -ms-transform: rotate(26deg);                 -o-transform: rotate(26deg);                 -webkit-transform: rotate(26deg);                 transform: rotate(26deg);             }                  .face-main {                 top30px;                 left35px;                 z-index: 50;                 width180px;                 height188px;                 -moz-border-radius: 90px;                 -webkit-border-radius: 90px;                 border-radius: 90px;                 background-color#F6C6B0;                 -moz-box-shadow: 3px -3px 0 0 #fff inset;                 -webkit-box-shadow: 3px -3px 0 0 #fff inset;                 box-shadow: 3px -3px 0 0 #fff inset;             }                  .face-top {                 top61px;                 rightright75px;                 z-index: 105;                 width111px;                 height46px;                 -moz-border-radius: 50% 50% 26px 0;                 -webkit-border-radius: 50% 50% 26px 0;                 border-radius: 50% 50% 26px 0;                 background-color#f6c6b0;                 -moz-transform: rotate(37deg);                 -ms-transform: rotate(37deg);                 -o-transform: rotate(37deg);                 -webkit-transform: rotate(37deg);                 transform: rotate(37deg);             }                  .face-rightright-1 {                 top115px;                 rightright71px;                 z-index: 105;                 width68px;                 height62px;                 -moz-border-radius: 100% 0 0;                 -webkit-border-radius: 100% 0 0;                 border-radius: 100% 0 0;                 background-color#f6c6b0;                 -moz-transform: rotate(99deg);                 -ms-transform: rotate(99deg);                 -o-transform: rotate(99deg);                 -webkit-transform: rotate(99deg);                 transform: rotate(99deg);             }                  .face-bottombottom-1 {                 bottombottom42px;                 left45px;                 z-index: 40;                 width72px;                 height52px;                 -webkit-border-bottom-left-radius: 使用HTML和CSS3绘制基本卡通图案的示例分享