蝙蝠岛资源网

使用HTML和CSS3绘制基本卡通图案的示例分享
网页制作 2024/12/24 佚名
2 0
蝙蝠岛资源网 Design By www.hbtsch.com

纯HTML+CSS实现阿童木头像
先上最终效果图：
使用HTML和CSS3绘制基本卡通图案的示例分享

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

CSS Code复制内容到剪贴板
  1. <!DOCTYPE html>    
  2. <html xmlns="http://www.w3.org/1999/xhtml">    
  3. <head>    
  4.     <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />    
  5.     <title>纯CSS漫画</title>    
  6.     <style type="text/css">    
  7.         * {    
  8.             margin: 0;    
  9.             padding: 0;    
  10.         }    
  11.     
  12.         .outer-circle {    
  13.             position: absolute;    
  14.             top: 32px;    
  15.             left: 44px;    
  16.             width: 289px;    
  17.             height: 289px;    
  18.             border: 4px solid #75BD4F;    
  19.             -moz-border-radius: 50%;    
  20.             -webkit-border-radius: 50%;    
  21.             border-radius: 50%;    
  22.         }    
  23.     
  24.         .inner-circle {    
  25.             position: relative;    
  26.             width: 269px;    
  27.             height: 269px;    
  28.             border: 10px solid #F5F910;    
  29.             -moz-border-radius: 50%;    
  30.             -webkit-border-radius: 50%;    
  31.             border-radius: 50%;    
  32.             background-color: #73BF43;    
  33.         }    
  34.     
  35.         .inner-circle div {    
  36.             position: absolute;    
  37.         }    
  38.     
  39.         .inner-circle-light {    
  40.             top: 41px;    
  41.             left: 35px;    
  42.             -moz-box-shadow: 26px 26px 29px 37px #fff;    
  43.             -webkit-box-shadow: 26px 26px 29px 37px #fff;    
  44.             box-shadow: 26px 26px 29px 37px #fff;    
  45.         }    
  46.     
  47.         .header-top {    
  48.             top: 11px;    
  49.             rightright: 2px;    
  50.             z-index: 100;    
  51.             width: 180px;    
  52.             height: 90px;    
  53.             -moz-border-radius: 90px 90px 0 0;    
  54.             -webkit-border-radius: 90px 90px 0 0;    
  55.             border-radius: 90px 90px 0 0;    
  56.             background-color: #000;    
  57.             -moz-transform: rotate(32deg);    
  58.             -ms-transform: rotate(32deg);    
  59.             -o-transform: rotate(32deg);    
  60.             -webkit-transform: rotate(32deg);    
  61.             transform: rotate(32deg);    
  62.         }    
  63.     
  64.         .header-left {    
  65.             top: -20px;    
  66.             left: 37px;    
  67.             width: 114px;    
  68.             height: 228px;    
  69.             -moz-border-radius: 228px 0 0 228px;    
  70.             -webkit-border-radius: 228px 0 0 228px;    
  71.             border-radius: 228px 0 0 228px;    
  72.             background-color: #000;    
  73.             -moz-transform: rotate(26deg);    
  74.             -ms-transform: rotate(26deg);    
  75.             -o-transform: rotate(26deg);    
  76.             -webkit-transform: rotate(26deg);    
  77.             transform: rotate(26deg);    
  78.         }    
  79.     
  80.         .hair-left-1 {    
  81.             top: 15px;    
  82.             left: 53px;    
  83.             z-index: 55;    
  84.             width: 85px;    
  85.             height: 23px;    
  86.             -webkit-border-top-left-radius: 30px 180px;    
  87.             border-top-left-radius: 30px 180px;    
  88.             -webkit-border-bottom-left-radius: 30px 80px;    
  89.             border-bottom-left-radius: 30px 80px;    
  90.             background-color: #000;    
  91.             -moz-transform: rotate(-74deg) skew(-42deg, 23deg);    
  92.             -ms-transform: rotate(-74deg) skew(-42deg, 23deg);    
  93.             -o-transform: rotate(-74deg) skew(-42deg, 23deg);    
  94.             -webkit-transform: rotate(-74deg) skew(-42deg, 23deg);    
  95.             transform: rotate(-74deg) skew(-42deg, 23deg);    
  96.         }    
  97.     
  98.         .hair-left-2 {    
  99.             top: -20px;    
  100.             left: 99px;    
  101.             z-index: 60;    
  102.             width: 49px;    
  103.             height: 37px;    
  104.             background-color: #000;    
  105.             -moz-transform: rotate(-51deg) skew(-43deg, 0deg);    
  106.             -ms-transform: rotate(-51deg) skew(-43deg, 0deg);    
  107.             -o-transform: rotate(-51deg) skew(-43deg, 0deg);    
  108.             -webkit-transform: rotate(-51deg) skew(-43deg, 0deg);    
  109.             transform: rotate(-51deg) skew(-43deg, 0deg);    
  110.         }    
  111.     
  112.         .hair-rightright-1 {    
  113.             top: 70px;    
  114.             rightright: 1px;    
  115.             z-index: 60;    
  116.             width: 81px;    
  117.             height: 85px;    
  118.             -webkit-border-top-rightright-radius: 26px 120px;    
  119.             border-top-rightright-radius: 26px 120px;    
  120.             background-color: black;    
  121.             -moz-transform: rotate(1deg) skew(-51deg, 0deg);    
  122.             -ms-transform: rotate(1deg) skew(-51deg, 0deg);    
  123.             -o-transform: rotate(1deg) skew(-51deg, 0deg);    
  124.             -webkit-transform: rotate(1deg) skew(-51deg, 0deg);    
  125.             transform: rotate(1deg) skew(-51deg, 0deg);    
  126.         }    
  127.     
  128.         .hair-rightright-2 {    
  129.             width: 60px;    
  130.             height: 10px;    
  131.             -webkit-border-bottom-left-radius: 100%;    
  132.             border-bottom-left-radius: 100%;    
  133.             background-color: rgba(0,0,0,0.2);    
  134.         }    
  135.     
  136.         .hair-light-1 {    
  137.             top: 30px;    
  138.             rightright: 45px;    
  139.             z-index: 105;    
  140.             width: 57px;    
  141.             height: 17px;    
  142.             -moz-border-radius: 100%;    
  143.             -webkit-border-radius: 100%;    
  144.             border-radius: 100%;    
  145.             background-color: white;    
  146.             -moz-transform: rotate(39deg);    
  147.             -ms-transform: rotate(39deg);    
  148.             -o-transform: rotate(39deg);    
  149.             -webkit-transform: rotate(39deg);    
  150.             transform: rotate(39deg);    
  151.         }    
  152.     
  153.         .hair-light-1-over {    
  154.             top: 32px;    
  155.             rightright: 38px;    
  156.             z-index: 105;    
  157.             width: 83px;    
  158.             height: 21px;    
  159.             -moz-border-radius: 100%;    
  160.             -webkit-border-radius: 100%;    
  161.             border-radius: 100%;    
  162.             background-color: black;    
  163.             -moz-transform: rotate(41deg);    
  164.             -ms-transform: rotate(41deg);    
  165.             -o-transform: rotate(41deg);    
  166.             -webkit-transform: rotate(41deg);    
  167.             transform: rotate(41deg);    
  168.         }    
  169.     
  170.         .hair-light-2 {    
  171.             top: 16px;    
  172.             rightright: 104px;    
  173.             z-index: 105;    
  174.             width: 4px;    
  175.             height: 2px;    
  176.             -moz-border-radius: 2px;    
  177.             -webkit-border-radius: 2px;    
  178.             border-radius: 2px;    
  179.             background-color: white;    
  180.             -moz-transform: rotate(10deg);    
  181.             -ms-transform: rotate(10deg);    
  182.             -o-transform: rotate(10deg);    
  183.             -webkit-transform: rotate(10deg);    
  184.             transform: rotate(10deg);    
  185.         }    
  186.     
  187.         .ear {    
  188.             top: 141px;    
  189.             rightright: 36px;    
  190.             z-index: 110;    
  191.             width: 49px;    
  192.             height: 48px;    
  193.             border: 2px solid #000;    
  194.             border-bottom-width: 1px;    
  195.             -moz-border-radius: 50%;    
  196.             -webkit-border-radius: 50%;    
  197.             border-radius: 50%;    
  198.             background-color: #F6C6B0;    
  199.             -moz-box-shadow: -4px 0 0 0 #de9876 inset;    
  200.             -webkit-box-shadow: -4px 0 0 0 #de9876 inset;    
  201.             box-shadow: -4px 0 0 0 #de9876 inset;    
  202.             -moz-transform: rotate(56deg) scaleY(1.4);    
  203.             -ms-transform: rotate(56deg) scaleY(1.4);    
  204.             -o-transform: rotate(56deg) scaleY(1.4);    
  205.             -webkit-transform: rotate(56deg) scaleY(1.4);    
  206.             transform: rotate(56deg) scaleY(1.4);    
  207.         }    
  208.     
  209.         .ear-inner-1 {    
  210.             top: 22px;    
  211.             left: 22px;    
  212.             z-index: 70;    
  213.             width: 9px;    
  214.             height: 5px;    
  215.             border-top: 1px solid #110b00;    
  216.             -moz-border-radius: 50%;    
  217.             -webkit-border-radius: 50%;    
  218.             border-radius: 50%;    
  219.             -moz-transform: rotate(-6deg);    
  220.             -ms-transform: rotate(-6deg);    
  221.             -o-transform: rotate(-6deg);    
  222.             -webkit-transform: rotate(-6deg);    
  223.             transform: rotate(-6deg);    
  224.         }    
  225.     
  226.         .ear-inner-2 {    
  227.             top: 19px;    
  228.             left: 18px;    
  229.             width: 14px;    
  230.             height: 7px;    
  231.             border-top: 2px solid #110b00;    
  232.             -moz-border-radius: 50%;    
  233.             -webkit-border-radius: 50%;    
  234.             border-radius: 50%;    
  235.             -moz-box-shadow: 0px 2px 0 0 #de9876 inset;    
  236.             -webkit-box-shadow: 0px 2px 0 0 #de9876 inset;    
  237.             box-shadow: 0px 2px 0 0 #de9876 inset;    
  238.             -moz-transform: rotate(-91deg);    
  239.             -ms-transform: rotate(-91deg);    
  240.             -o-transform: rotate(-91deg);    
  241.             -webkit-transform: rotate(-91deg);    
  242.             transform: rotate(-91deg);    
  243.         }    
  244.     
  245.         .ear-light {    
  246.             top: 21px;    
  247.             rightright: 34px;    
  248.             z-index: 105;    
  249.             width: 17px;    
  250.             height: 6px;    
  251.             -moz-border-radius: 100%;    
  252.             -webkit-border-radius: 100%;    
  253.             border-radius: 100%;    
  254.             background-color: #FFF;    
  255.             -moz-transform: rotate(89deg);    
  256.             -ms-transform: rotate(89deg);    
  257.             -o-transform: rotate(89deg);    
  258.             -webkit-transform: rotate(89deg);    
  259.             transform: rotate(89deg);    
  260.         }    
  261.     
  262.         .ear-over {    
  263.             bottombottom: -44px;    
  264.             left: -33px;    
  265.             z-index: 55;    
  266.             width: 69px;    
  267.             height: 59px;    
  268.             -moz-border-radius: 50%;    
  269.             -webkit-border-radius: 50%;    
  270.             border-radius: 50%;    
  271.             background-color: #f6c6b0;    
  272.             -moz-transform: rotate(26deg);    
  273.             -ms-transform: rotate(26deg);    
  274.             -o-transform: rotate(26deg);    
  275.             -webkit-transform: rotate(26deg);    
  276.             transform: rotate(26deg);    
  277.         }    
  278.     
  279.         .face-main {    
  280.             top: 30px;    
  281.             left: 35px;    
  282.             z-index: 50;    
  283.             width: 180px;    
  284.             height: 188px;    
  285.             -moz-border-radius: 90px;    
  286.             -webkit-border-radius: 90px;    
  287.             border-radius: 90px;    
  288.             background-color: #F6C6B0;    
  289.             -moz-box-shadow: 3px -3px 0 0 #fff inset;    
  290.             -webkit-box-shadow: 3px -3px 0 0 #fff inset;    
  291.             box-shadow: 3px -3px 0 0 #fff inset;    
  292.         }    
  293.     
  294.         .face-top {    
  295.             top: 61px;    
  296.             rightright: 75px;    
  297.             z-index: 105;    
  298.             width: 111px;    
  299.             height: 46px;    
  300.             -moz-border-radius: 50% 50% 26px 0;    
  301.             -webkit-border-radius: 50% 50% 26px 0;    
  302.             border-radius: 50% 50% 26px 0;    
  303.             background-color: #f6c6b0;    
  304.             -moz-transform: rotate(37deg);    
  305.             -ms-transform: rotate(37deg);    
  306.             -o-transform: rotate(37deg);    
  307.             -webkit-transform: rotate(37deg);    
  308.             transform: rotate(37deg);    
  309.         }    
  310.     
  311.         .face-rightright-1 {    
  312.             top: 115px;    
  313.             rightright: 71px;    
  314.             z-index: 105;    
  315.             width: 68px;    
  316.             height: 62px;    
  317.             -moz-border-radius: 100% 0 0;    
  318.             -webkit-border-radius: 100% 0 0;    
  319.             border-radius: 100% 0 0;    
  320.             background-color: #f6c6b0;    
  321.             -moz-transform: rotate(99deg);    
  322.             -ms-transform: rotate(99deg);    
  323.             -o-transform: rotate(99deg);    
  324.             -webkit-transform: rotate(99deg);    
  325.             transform: rotate(99deg);    
  326.         }    
  327.     
  328.         .face-bottombottom-1 {    
  329.             bottombottom: 42px;    
  330.             left: 45px;    
  331.             z-index: 40;    
  332.             width: 72px;    
  333.             height: 52px;    
  334.             -webkit-border-bottom-left-radius: 70px 40px;    
  335.             -webkit-border-top-left-radius: 14px 11px;    
  336.             border-top-left-radius: 14px 11px;    
  337.             border-bottom-left-radius: 70px 40px;    
  338.             background-color: #000;    
  339.         }    
  340.     
  341.         .face-bottombottom-1-over {    
  342.             bottombottom: 45px;    
  343.             left: 48px;    
  344.             z-index: 55;    
  345.             width: 69px;    
  346.             height: 47px;    
  347.             -webkit-border-bottom-left-radius: 70px 40px;    
  348.             -webkit-border-top-left-radius: 14px 11px;    
  349.             border-top-left-radius: 14px 11px;    
  350.             border-bottom-left-radius: 70px 40px;    
  351.             background-color: #f6c6b0;    
  352.             -moz-box-shadow: 3px 0px 0 0 #fff inset;    
  353.             -webkit-box-shadow: 3px 0px 0 0 #fff inset;    
  354.             box-shadow: 3px 0px 0 0 #fff inset;    
  355.         }    
  356.     
  357.         .face-bottombottom-2 {    
  358.             rightright: 97px;    
  359.             bottombottom: 44px;    
  360.             z-index: 55;    
  361.             width: 43px;    
  362.             height: 31px;    
  363.             -webkit-border-bottom-rightright-radius: 70px 40px;    
  364.             border-bottom-rightright-radius: 70px 40px;    
  365.             background-color: #000;    
  366.             -moz-transform: rotate(-4deg) skew(-49deg, 0deg);    
  367.             -ms-transform: rotate(-4deg) skew(-49deg, 0deg);    
  368.             -o-transform: rotate(-4deg) skew(-49deg, 0deg);    
  369.             -webkit-transform: rotate(-4deg) skew(-49deg, 0deg);    
  370.             transform: rotate(-4deg) skew(-49deg, 0deg);    
  371.         }    
  372.     
  373.         .face-bottombottom-2-over {    
  374.             rightright: 99px;    
  375.             bottombottom: 46px;    
  376.             z-index: 56;    
  377.             width: 43px;    
  378.             height: 31px;    
  379.             -webkit-border-bottom-rightright-radius: 70px 40px;    
  380.             border-bottom-rightright-radius: 70px 40px;    
  381.             background-color: #f6c6b0;    
  382.             -moz-box-shadow: -6px 2px 0 0 #de9876 inset;    
  383.             -webkit-box-shadow: -6px 2px 0 0 #de9876 inset;    
  384.             box-shadow: -6px 2px 0 0 #de9876 inset;    
  385.             -moz-transform: rotate(-3deg) skew(-49deg, 0deg);    
  386.             -ms-transform: rotate(-3deg) skew(-49deg, 0deg);    
  387.             -o-transform: rotate(-3deg) skew(-49deg, 0deg);    
  388.             -webkit-transform: rotate(-3deg) skew(-49deg, 0deg);    
  389.             transform: rotate(-3deg) skew(-49deg, 0deg);    
  390.         }    
  391.     
  392.         .face-light-1 {    
  393.             rightright: 127px;    
  394.             bottombottom: 95px;    
  395.             z-index: 150;    
  396.             width: 6px;    
  397.             height: 6px;    
  398.             -moz-border-radius: 50%;    
  399.             -webkit-border-radius: 50%;    
  400.             border-radius: 50%;    
  401.             background-color: #fff;    
  402.         }    
  403.     
  404.         .face-light-2 {    
  405.             bottombottom: 82px;    
  406.             left: 58px;    
  407.             z-index: 150;    
  408.             width: 4px;    
  409.             height: 4px;    
  410.             -moz-border-radius: 50%;    
  411.             -webkit-border-radius: 50%;    
  412.             border-radius: 50%;    
  413.             background-color: #fff;    
  414.         }    
  415.     
  416.         .chin {    
  417.             bottombottom: 39px;    
  418.             left: 111px;    
  419.             z-index: 70;    
  420.             width: 11px;    
  421.             height: 12px;    
  422.             border: 2px solid #000;    
  423.             border-top-color: #f6c6b0;    
  424.             border-left-color: #f6c6b0;    
  425.             -webkit-border-bottom-rightright-radius: 6px;    
  426.             border-bottom-rightright-radius: 6px;    
  427.             background-color: #f6c6b0;    
  428.             -moz-transform: rotate(34deg) skew(-9deg, 0deg);    
  429.             -ms-transform: rotate(34deg) skew(-9deg, 0deg);    
  430.             -o-transform: rotate(34deg) skew(-9deg, 0deg);    
  431.             -webkit-transform: rotate(34deg) skew(-9deg, 0deg);    
  432.             transform: rotate(34deg) skew(-9deg, 0deg);    
  433.         }    
  434.     
  435.         .eye-rightright {    
  436.             top: 97px;    
  437.             left: 103px;    
  438.             z-index: 110;    
  439.             width: 39px;    
  440.             height: 67px;    
  441.             border: 1px solid #000;    
  442.             border-top-width: 2px;    
  443.             -moz-border-radius: 24px 43px 34px 28px / 34px 71px 34px 81px;    
  444.             -webkit-border-radius: 24px 43px 34px 28px / 34px 71px 34px 81px;    
  445.             border-radius: 24px 43px 34px 28px / 34px 71px 34px 81px;    
  446.             background-color: #F8FAF7;    
  447.             -moz-box-shadow: 0px 5px 0 0 #d5d9e2 inset;    
  448.             -webkit-box-shadow: 0px 5px 0 0 #d5d9e2 inset;    
  449.             box-shadow: 0px 5px 0 0 #d5d9e2 inset;    
  450.         }    
  451.     
  452.         .eye-rightright-inner {    
  453.             rightright: 0;    
  454.             bottombottom: 3px;    
  455.             z-index: 115;    
  456.             width: 30px;    
  457.             height: 52px;    
  458.             -moz-border-radius: 32px 43px 28px 48px / 47px 55px 45px 75px;    
  459.             -webkit-border-radius: 32px 43px 28px 48px / 47px 55px 45px 75px;    
  460.             border-radius: 32px 43px 28px 48px / 47px 55px 45px 75px;    
  461.             background-color: #000;    
  462.         }    
  463.     
  464.         .eye-rightright-light1 {    
  465.             top: 19px;    
  466.             rightright: 0;    
  467.             z-index: 120;    
  468.             width: 19px;    
  469.             height: 10px;    
  470.             -moz-border-radius: 100%;    
  471.             -webkit-border-radius: 100%;    
  472.             border-radius: 100%;    
  473.             background-color: #FFF;    
  474.             -moz-animation: eye-flash 0.2s linear 0.1s infinite normal;    
  475.             -o-animation: eye-flash 0.2s linear 0.1s infinite normal;    
  476.             -webkit-animation: eye-flash 0.2s linear 0.1s infinite normal;    
  477.             -moz-transform: rotate(41deg);    
  478.             -ms-transform: rotate(41deg);    
  479.             -o-transform: rotate(41deg);    
  480.             -webkit-transform: rotate(41deg);    
  481.             transform: rotate(41deg);    
  482.             animation: eye-flash 0.2s linear 0.1s infinite normal;    
  483.         }    
  484.     
  485.         @-webkit-keyframes eye-flash {    
  486.             0% {    
  487.                 top: 19px;    
  488.             }    
  489.     
  490.             100% {    
  491.                 top: 21px;    
  492.             }    
  493.         }    
  494.     
  495.         @-moz-keyframes eye-flash {    
  496.             0% {    
  497.                 top: 19px;    
  498.             }    
  499.     
  500.             100% {    
  501.                 top: 20px;    
  502.             }    
  503.         }    
  504.     
  505.         @-ms-keyframes eye-flash {    
  506.             0% {    
  507.                 top: 19px;    
  508.             }    
  509.     
  510.             100% {    
  511.                 top: 20px;    
  512.             }    
  513.         }    
  514.     
  515.         @keyframes eye-flash {    
  516.             0% {    
  517.                 top: 19px;    
  518.             }    
  519.     
  520.             100% {    
  521.                 top: 20px;    
  522.             }    
  523.         }    
  524.     
  525.         .eye-rightright-light2 {    
  526.             bottombottom: 8px;    
  527.             left: 9px;    
  528.             z-index: 120;    
  529.             width: 14px;    
  530.             height: 7px;    
  531.             -webkit-border-bottom-rightright-radius: 100%;    
  532.             border-bottom-rightright-radius: 100%;    
  533.             background-color: #FFF;    
  534.             -moz-transform: rotate(-39deg);    
  535.             -ms-transform: rotate(-39deg);    
  536.             -o-transform: rotate(-39deg);    
  537.             -webkit-transform: rotate(-39deg);    
  538.             transform: rotate(-39deg);    
  539.         }    
  540.     
  541.         .eye-rightright-eyelash1 {    
  542.             top: 9px;    
  543.             left: -3px;    
  544.             width: 2px;    
  545.             height: 4px;    
  546.             background-color: #000;    
  547.             -moz-transform: rotate(-54deg);    
  548.             -ms-transform: rotate(-54deg);    
  549.             -o-transform: rotate(-54deg);    
  550.             -webkit-transform: rotate(-54deg);    
  551.             transform: rotate(-54deg);    
  552.         }    
  553.     
  554.         .eye-rightright-eyelash2 {    
  555.             top: 1px;    
  556.             left: 1px;    
  557.             width: 2px;    
  558.             height: 5px;    
  559.             background-color: #000;    
  560.             -moz-transform: rotate(-33deg);    
  561.             -ms-transform: rotate(-33deg);    
  562.             -o-transform: rotate(-33deg);    
  563.             -webkit-transform: rotate(-33deg);    
  564.             transform: rotate(-33deg);    
  565.         }    
  566.     
  567.         .eye-rightright-eyelash3 {    
  568.             top: -8px;    
  569.             left: 8px;    
  570.             width: 2px;    
  571.             height: 7px;    
  572.             background-color: #000;    
  573.             -moz-transform: rotate(-21deg);    
  574.             -ms-transform: rotate(-21deg);    
  575.             -o-transform: rotate(-21deg);    
  576.             -webkit-transform: rotate(-21deg);    
  577.             transform: rotate(-21deg);    
  578.         }    
  579.     
  580.         .eye-rightright-eyelash4 {    
  581.             top: -6px;    
  582.             left: 21px;    
  583.             width: 2px;    
  584.             height: 6px;    
  585.             background-color: #000;    
  586.             -moz-transform: rotate(11deg);    
  587.             -ms-transform: rotate(11deg);    
  588.             -o-transform: rotate(11deg);    
  589.             -webkit-transform: rotate(11deg);    
  590.             transform: rotate(11deg);    
  591.         }    
  592.     
  593.         .eye-rightright-eyelash5 {    
  594.             top: 1px;    
  595.             rightright: 8px;    
  596.             width: 2px;    
  597.             height: 6px;    
  598.             background-color: #000;    
  599.             -moz-transform: rotate(14deg);    
  600.             -ms-transform: rotate(14deg);    
  601.             -o-transform: rotate(14deg);    
  602.             -webkit-transform: rotate(14deg);    
  603.             transform: rotate(14deg);    
  604.         }    
  605.     
  606.         .eye-left {    
  607.             top: 114px;    
  608.             left: 45px;    
  609.             z-index: 110;    
  610.             width: 19px;    
  611.             height: 63px;    
  612.             border: 1px solid #000;    
  613.             border-top-width: 2px;    
  614.             -moz-border-radius: 29px 28px 33px / 97px 111px 40px 90px;    
  615.             -webkit-border-radius: 29px 28px 33px / 97px 111px 40px 90px;    
  616.             border-radius: 29px 28px 33px / 97px 111px 40px 90px;    
  617.             background-color: #F8FAF7;    
  618.             -moz-box-shadow: 0px 6px 0 0 #d5d9e2 inset;    
  619.             -webkit-box-shadow: 0px 6px 0 0 #d5d9e2 inset;    
  620.             box-shadow: 0px 6px 0 0 #d5d9e2 inset;    
  621.             -moz-transform: rotate(-9deg);    
  622.             -ms-transform: rotate(-9deg);    
  623.             -o-transform: rotate(-9deg);    
  624.             -webkit-transform: rotate(-9deg);    
  625.             transform: rotate(-9deg);    
  626.         }    
  627.     
  628.         .eye-left-inner {    
  629.             rightright: 0;    
  630.             bottombottom: 1px;    
  631.             z-index: 115;    
  632.             width: 15px;    
  633.             height: 46px;    
  634.             -moz-border-radius: 49px 44px 29px 58px / 143px 83px 45px 122px;    
  635.             -webkit-border-radius: 49px 44px 29px 58px / 143px 83px 45px 122px;    
  636.             border-radius: 49px 44px 29px 58px / 143px 83px 45px 122px;    
  637.             background-color: #000;    
  638.         }    
  639.     
  640.         .eye-left-light1 {    
  641.             top: 19px;    
  642.             rightright: 1px;    
  643.             z-index: 120;    
  644.             width: 7px;    
  645.             height: 18px;    
  646.             -moz-border-radius: 100%;    
  647.             -webkit-border-radius: 100%;    
  648.             border-radius: 100%;    
  649.             background-color: #FFF;    
  650.             -moz-animation: eye-flash 0.2s linear 0.1s infinite normal;    
  651.             -o-animation: eye-flash 0.2s linear 0.1s infinite normal;    
  652.             -webkit-animation: eye-flash 0.2s linear 0.1s infinite normal;    
  653.             -moz-transform: rotate(-9deg);    
  654.             -ms-transform: rotate(-9deg);    
  655.             -o-transform: rotate(-9deg);    
  656.             -webkit-transform: rotate(-9deg);    
  657.             transform: rotate(-9deg);    
  658.             animation: eye-flash 0.2s linear 0.1s infinite normal;    
  659.         }    
  660.     
  661.         .eye-left-light2 {    
  662.             bottombottom: 6px;    
  663.             left: 4px;    
  664.             z-index: 120;    
  665.             width: 11px;    
  666.             height: 4px;    
  667.             -webkit-border-bottom-rightright-radius: 100%;    
  668.             border-bottom-rightright-radius: 100%;    
  669.             background-color: #FFF;    
  670.             -moz-transform: rotate(-45deg);    
  671.             -ms-transform: rotate(-45deg);    
  672.             -o-transform: rotate(-45deg);    
  673.             -webkit-transform: rotate(-45deg);    
  674.             transform: rotate(-45deg);    
  675.         }    
  676.     
  677.         .eye-left-eyelash1 {    
  678.             top: 7px;    
  679.             left: -1px;    
  680.             width: 2px;    
  681.             height: 4px;    
  682.             background-color: #000;    
  683.             -moz-transform: rotate(-49deg);    
  684.             -ms-transform: rotate(-49deg);    
  685.             -o-transform: rotate(-49deg);    
  686.             -webkit-transform: rotate(-49deg);    
  687.             transform: rotate(-49deg);    
  688.         }    
  689.     
  690.         .eye-left-eyelash2 {    
  691.             top: -1px;    
  692.             left: 2px;    
  693.             width: 2px;    
  694.             height: 5px;    
  695.             background-color: #000;    
  696.             -moz-transform: rotate(-28deg);    
  697.             -ms-transform: rotate(-28deg);    
  698.             -o-transform: rotate(-28deg);    
  699.             -webkit-transform: rotate(-28deg);    
  700.             transform: rotate(-28deg);    
  701.         }    
  702.     
  703.         .eye-left-eyelash3 {    
  704.             top: -6px;    
  705.             left: 7px;    
  706.             width: 2px;    
  707.             height: 5px;    
  708.             background-color: #000;    
  709.             -moz-transform: rotate(-4deg);    
  710.             -ms-transform: rotate(-4deg);    
  711.             -o-transform: rotate(-4deg);    
  712.             -webkit-transform: rotate(-4deg);    
  713.             transform: rotate(-4deg);    
  714.         }    
  715.     
  716.         .eye-left-eyelash4 {    
  717.             top: -4px;    
  718.             left: 13px;    
  719.             width: 2px;    
  720.             height: 4px;    
  721.             background-color: #000;    
  722.             -moz-transform: rotate(25deg);    
  723.             -ms-transform: rotate(25deg);    
  724.             -o-transform: rotate(25deg);    
  725.             -webkit-transform: rotate(25deg);    
  726.             transform: rotate(25deg);    
  727.         }    
  728.     
  729.         .eye-left-eyelash5 {    
  730.             top: 3px;    
  731.             rightright: 0;    
  732.             width: 2px;    
  733.             height: 4px;    
  734.             background-color: #000;    
  735.             -moz-transform: rotate(41deg);    
  736.             -ms-transform: rotate(41deg);    
  737.             -o-transform: rotate(41deg);    
  738.             -webkit-transform: rotate(41deg);    
  739.             transform: rotate(41deg);    
  740.         }    
  741.     
  742.         .rightright-eyebrow {    
  743.             top: 68px;    
  744.             left: 92px;    
  745.             z-index: 110;    
  746.             width: 66px;    
  747.             height: 36px;    
  748.             border: 2px solid #000;    
  749.             border-width: 2px 1px 0px 1px;    
  750.             -moz-border-radius: 45px 51px 0 0;    
  751.             -webkit-border-radius: 45px 51px 0 0;    
  752.             border-radius: 45px 51px 0 0;    
  753.             background-color: transparent;    
  754.             -moz-transform: skew(-6deg, 16deg);    
  755.             -ms-transform: skew(-6deg, 16deg);    
  756.             -o-transform: skew(-6deg, 16deg);    
  757.             -webkit-transform: skew(-6deg, 16deg);    
  758.             transform: skew(-6deg, 16deg);    
  759.         }    
  760.     
  761.         .rightright-eyebrow-over {    
  762.             top: 21px;    
  763.             rightright: -5px;    
  764.             z-index: 115;    
  765.             width: 13px;    
  766.             height: 20px;    
  767.             background-color: #f6c6b0;    
  768.         }    
  769.     
  770.         .left-eyebrow {    
  771.             top: 89px;    
  772.             left: 36px;    
  773.             z-index: 100;    
  774.             width: 30px;    
  775.             height: 68px;    
  776.             border: 2px solid #000;    
  777.             border-width: 2px 1px 0px 1px;    
  778.             -moz-border-radius: 100%;    
  779.             -webkit-border-radius: 100%;    
  780.             border-radius: 100%;    
  781.             background-color: transparent;    
  782.             -moz-transform: rotate(-2deg);    
  783.             -ms-transform: rotate(-2deg);    
  784.             -o-transform: rotate(-2deg);    
  785.             -webkit-transform: rotate(-2deg);    
  786.             transform: rotate(-2deg);    
  787.         }    
  788.     
  789.         .left-eyebrow-over {    
  790.             top: 17px;    
  791.             rightright: -9px;    
  792.             z-index: 105;    
  793.             width: 39px;    
  794.             height: 55px;    
  795.             -moz-border-radius: 21px 12px 0 17px;    
  796.             -webkit-border-radius: 21px 12px 0 17px;    
  797.             border-radius: 21px 12px 0 17px;    
  798.             background-color: #f6c6b0;    
  799.             -moz-transform: rotate(-13deg);    
  800.             -ms-transform: rotate(-13deg);    
  801.             -o-transform: rotate(-13deg);    
  802.             -webkit-transform: rotate(-13deg);    
  803.             transform: rotate(-13deg);    
  804.         }    
  805.     
  806.         .nose {    
  807.             top: 172px;    
  808.             left: 63px;    
  809.             z-index: 115;    
  810.             width: 21px;    
  811.             height: 16px;    
  812.             border: 2px solid #000;    
  813.             -moz-border-radius: 50%;    
  814.             -webkit-border-radius: 50%;    
  815.             border-radius: 50%;    
  816.             -moz-box-shadow: 3px 1px 0 0 #fff inset;    
  817.             -webkit-box-shadow: 3px 1px 0 0 #fff inset;    
  818.             box-shadow: 3px 1px 0 0 #fff inset;    
  819.         }    
  820.     
  821.         .nose-over {    
  822.             top: -1px;    
  823.             rightright: -11px;    
  824.             z-index: 115;    
  825.             width: 19px;    
  826.             height: 14px;    
  827.             background-color: #f6c6b0;    
  828.             -moz-transform: rotate(31deg);    
  829.             -ms-transform: rotate(31deg);    
  830.             -o-transform: rotate(31deg);    
  831.             -webkit-transform: rotate(31deg);    
  832.             transform: rotate(31deg);    
  833.         }    
  834.     
  835.         .nose-tip {    
  836.             top: -7px;    
  837.             left: 13px;    
  838.             width: 2px;    
  839.             height: 6px;    
  840.             background-color: #000;    
  841.             -moz-transform: rotate(14deg);    
  842.             -ms-transform: rotate(14deg);    
  843.             -o-transform: rotate(14deg);    
  844.             -webkit-transform: rotate(14deg);    
  845.             transform: rotate(14deg);    
  846.         }    
  847.     
  848.         .mouth {    
  849.             bottombottom: 61px;    
  850.             left: 72px;    
  851.             z-index: 110;    
  852.             width: 46px;    
  853.             height: 47px;    
  854.             border: 2px solid #000;    
  855.             border-width: 0 1px 2px 0;    
  856.             -moz-border-radius: 32px 29px 23px 48px / 47px 82px 52px 75px;    
  857.             -webkit-border-radius: 32px 29px 23px 48px / 47px 82px 52px 75px;    
  858.             border-radius: 32px 29px 23px 48px / 47px 82px 52px 75px;    
  859.             background-color: #92222E;    
  860.             -moz-transform: rotate(1deg) skew(0deg, 39deg);    
  861.             -ms-transform: rotate(1deg) skew(0deg, 39deg);    
  862.             -o-transform: rotate(1deg) skew(0deg, 39deg);    
  863.             -webkit-transform: rotate(1deg) skew(0deg, 39deg);    
  864.             transform: rotate(1deg) skew(0deg, 39deg);    
  865.         }    
  866.     
  867.         .mouth-over-1 {    
  868.             bottombottom: 0;    
  869.             left: -4px;    
  870.             z-index: 115;    
  871.             width: 37px;    
  872.             height: 58px;    
  873.             border-right: 1px solid #000;    
  874.             -moz-border-radius: 38px 13px 10px 77px / 47px 82px 52px 73px;    
  875.             -webkit-border-radius: 38px 13px 10px 77px / 47px 82px 52px 73px;    
  876.             border-radius: 38px 13px 10px 77px / 47px 82px 52px 73px;    
  877.             background-color: #f6c6b0;    
  878.             -moz-transform: rotate(38deg) skew(0deg, 6deg);    
  879.             -ms-transform: rotate(38deg) skew(0deg, 6deg);    
  880.             -o-transform: rotate(38deg) skew(0deg, 6deg);    
  881.             -webkit-transform: rotate(38deg) skew(0deg, 6deg);    
  882.             transform: rotate(38deg) skew(0deg, 6deg);    
  883.         }    
  884.     
  885.         .mouth-over-2 {    
  886.             bottombottom: 38px;    
  887.             left: 30px;    
  888.             z-index: 150;    
  889.             width: 7px;    
  890.             height: 19px;    
  891.             background-color: #f6c6b0;    
  892.             -moz-transform: rotate(-233deg);    
  893.             -ms-transform: rotate(-233deg);    
  894.             -o-transform: rotate(-233deg);    
  895.             -webkit-transform: rotate(-233deg);    
  896.             transform: rotate(-233deg);    
  897.         }    
  898.     
  899.         .mouth-over-3 {    
  900.             bottombottom: -9px;    
  901.             left: 11px;    
  902.             z-index: 115;    
  903.             width: 27px;    
  904.             height: 9px;    
  905.             border-top: 2px solid #000;    
  906.             -moz-border-radius: 100%;    
  907.             -webkit-border-radius: 100%;    
  908.             border-radius: 100%;    
  909.             background-color: #f6c6b0;    
  910.             -moz-transform: rotate(-4deg);    
  911.             -ms-transform: rotate(-4deg);    
  912.             -o-transform: rotate(-4deg);    
  913.             -webkit-transform: rotate(-4deg);    
  914.             transform: rotate(-4deg);    
  915.         }    
  916.     
  917.         .mouth-over-4 {    
  918.             bottombottom: -6px;    
  919.             left: -1px;    
  920.             z-index: 150;    
  921.             width: 7px;    
  922.             height: 15px;    
  923.             background-color: #f6c6b0;    
  924.             -moz-transform: rotate(-226deg);    
  925.             -ms-transform: rotate(-226deg);    
  926.             -o-transform: rotate(-226deg);    
  927.             -webkit-transform: rotate(-226deg);    
  928.             transform: rotate(-226deg);    
  929.         }    
  930.     
  931.         .mouth-tip {    
  932.             bottombottom: 39px;    
  933.             left: 41px;    
  934.             z-index: 120;    
  935.             width: 2px;    
  936.             height: 3px;    
  937.             background-color: #000;    
  938.             -moz-transform: rotate(-51deg);    
  939.             -ms-transform: rotate(-51deg);    
  940.             -o-transform: rotate(-51deg);    
  941.             -webkit-transform: rotate(-51deg);    
  942.             transform: rotate(-51deg);    
  943.         }    
  944.     
  945.         .mouth-inner {    
  946.             bottombottom: 50px;    
  947.             left: 107px;    
  948.             z-index: 115;    
  949.             width: 10px;    
  950.             height: 18px;    
  951.             -moz-border-radius: 10px 0 4px 6px / 8px 2px 8px 9px;    
  952.             -webkit-border-radius: 10px 0 4px 6px / 8px 2px 8px 9px;    
  953.             border-radius: 10px 0 4px 6px / 8px 2px 8px 9px;    
  954.             background-color: #ed675c;    
  955.             -moz-transform: rotate(6deg);    
  956.             -ms-transform: rotate(6deg);    
  957.             -o-transform: rotate(6deg);    
  958.             -webkit-transform: rotate(6deg);    
  959.             transform: rotate(6deg);    
  960.         }    
  961.     
  962.         .name-lable {    
  963.             bottombottom: -9px;    
  964.             left: -8px;    
  965.             z-index: 150;    
  966.             width: 280px;    
  967.             color: #005aa9;    
  968.             text-align: center;    
  969.             font-weight: bold;    
  970.             font-style: italic;    
  971.             font-size: 50px;    
  972.             font-family: Times New Roman;    
  973.         }    
  974.     
  975.         .name-lable-light {    
  976.             top: 30px;    
  977.             width: 100%;    
  978.             height: 0;    
  979.             -moz-box-shadow: 0 0 3px 3px #fff;    
  980.             -webkit-box-shadow: 0 0 3px 3px #fff;    
  981.             box-shadow: 0 0 3px 3px #fff;    
  982.         }    
  983.     
  984.         @-webkit-keyframes input-flash {    
  985.             0% {    
  986.                 border-color: #ccc;    
  987.                 -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);    
  988.                 -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);    
  989.                 box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);    
  990.             }    
  991.     
  992.             100% {    
  993.                 border-color: rgba(82,168,236,0.8);    
  994.                 -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6);    
  995.                 -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6);    
  996.                 box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6);    
  997.             }    
  998.         }    
  999.     
  1000.         @-moz-keyframes input-flash {    
  1001.             0% {    
  1002.                 border-color: #ccc;    
  1003.                 -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);    
  1004.                 -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);    
  1005.                 box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);    
  1006.             }    
  1007.     
  1008.             100% {    
  1009.                 border-color: rgba(82,168,236,0.8);    
  1010.                 -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6);    
  1011.                 -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6);    
  1012.                 box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6);    
  1013.             }    
  1014.         }    
  1015.     
  1016.         @-ms-keyframes input-flash {    
  1017.             0% {    
  1018.                 border-color: #ccc;    
  1019.                 -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);    
  1020.                 -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);    
  1021.                 box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);    
  1022.             }    
  1023.     
  1024.             100% {    
  1025.                 border-color: rgba(82,168,236,0.8);    
  1026.                 -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6);    
  1027.                 -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6);    
  1028.                 box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6);    
  1029.             }    
  1030.         }    
  1031.     
  1032.         @keyframes input-flash {    
  1033.             0% {    
  1034.                 border-color: #ccc;    
  1035.                 -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);    
  1036.                 -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);    
  1037.                 box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);    
  1038.             }    
  1039.     
  1040.             100% {    
  1041.                 border-color: rgba(82,168,236,0.8);    
  1042.                 -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6);    
  1043.                 -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6);    
  1044.                 box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6);    
  1045.             }    
  1046.         }    
  1047.     </style>    
  1048. </head>    
  1049. <body>    
  1050.     <div style="width: 400px; height: 359px; position: relative; margin: 50px auto;">    
  1051.         <div class="outer-circle">    
  1052.             <!--外圆-->    
  1053.             <div class="inner-circle">    
  1054.                 <!--内圆-->    
  1055.                 <div class="inner-circle-light"></div>    
  1056.                 <div class="header-top"></div>    
  1057.                 <!--头发-->    
  1058.                 <div class="hair-left-1"></div>    
  1059.                 <div class="hair-left-2"></div>    
  1060.                 <div class="hair-light-1"></div>    
  1061.                 <div class="hair-light-1-over"></div>    
  1062.                 <div class="hair-light-2"></div>    
  1063.                 <div class="hair-right-1">    
  1064.                     <div class="hair-right-2">    
  1065.                     </div>    
  1066.                 </div>    
  1067.                 <div class="header-left"></div>    
  1068.                 <!--脸部-->    
  1069.                 <div class="face-main"></div>    
  1070.                 <div class="face-light-1"></div>    
  1071.                 <div class="face-light-2"></div>    
  1072.                 <div class="face-top"></div>    
  1073.                 <div class="face-right-1"></div>    
  1074.                 <div class="face-bottom-1"></div>    
  1075.                 <div class="face-bottom-1-over"></div>    
  1076.                 <div class="face-bottom-2"></div>    
  1077.                 <div class="face-bottom-2-over"></div>    
  1078.                 <div class="chin"></div>    
  1079.                 <div class="ear">    
  1080.                     <!--耳朵-->    
  1081.                     <div class="ear-inner-1"></div>    
  1082.                     <div class="ear-inner-2"></div>    
  1083.                     <div class="ear-over"></div>    
  1084.                     <div class="ear-light"></div>    
  1085.                 </div>    
  1086.                 <div class="eye-left">    
  1087.                     <!--左眼-->    
  1088.                     <div class="eye-left-inner"></div>    
  1089.                     <div class="eye-left-light1"></div>    
  1090.                     <div class="eye-left-light2"></div>    
  1091.                     <div class="eye-left-eyelash1"></div>    
  1092.                     <div class="eye-left-eyelash2"></div>    
  1093.                     <div class="eye-left-eyelash3"></div>    
  1094.                     <div class="eye-left-eyelash4"></div>    
  1095.                     <div class="eye-left-eyelash5"></div>    
  1096.                 </div>    
  1097.                 <div class="eye-right">    
  1098.                     <!--右眼-->    
  1099.                     <div class="eye-right-inner"></div>    
  1100.                     <div class="eye-right-light1"></div>    
  1101.                     <div class="eye-right-light2"></div>    
  1102.                     <div class="eye-right-eyelash1"></div>    
  1103.                     <div class="eye-right-eyelash2"></div>    
  1104.                     <div class="eye-right-eyelash3"></div>    
  1105.                     <div class="eye-right-eyelash4"></div>    
  1106.                     <div class="eye-right-eyelash5"></div>    
  1107.                 </div>    
  1108.                 <div class="right-eyebrow">    
  1109.                     <!--右眼眉毛-->    
  1110.                     <div class="right-eyebrow-over"></div>    
  1111.                 </div>    
  1112.                 <div class="left-eyebrow">    
  1113.                     <!--左眼眉毛-->    
  1114.                     <div class="left-eyebrow-over"></div>    
  1115.                 </div>    
  1116.                 <div class="nose">    
  1117.                     <!--鼻子-->    
  1118.                     <div class="nose-tip"></div>    
  1119.                     <div class="nose-over"></div>    
  1120.                 </div>    
  1121.                 <div class="mouth">    
  1122.                     <!--嘴巴-->    
  1123.                     <div class="mouth-over-1"></div>    
  1124.                     <div class="mouth-over-2"></div>    
  1125.                     <div class="mouth-over-3"></div>    
  1126.                     <div class="mouth-over-4"></div>    
  1127.                     <div class="mouth-tip"></div>    
  1128.                 </div>    
  1129.                 <div class="mouth-inner"></div>    
  1130.                 <div class="name-lable">    
  1131.                     ASTRO BOY    
  1132.                     <div class="name-lable-light"></div>    
  1133.                 </div>    
  1134.             </div>    
  1135.         </div>    
  1136.     </div>    
  1137. </body>    
  1138. </html>    

  

使用CSS3画出一个叮当猫
如果你经常使用PS或者Flash的话，应该就会知道画个叮当猫是很容易 的事，至少我是这么觉得。但是，用CSS3画出来确实是第一次接触，所以很乐意去尝试一下，对于我这种菜鸟，确实是帮助不少，至少懂得如何去画一个简单的 人物形象出来，再加上一些动画效果，就活了，那就更好玩了！OK，开始之前，先把效果图晒一下：
使用HTML和CSS3绘制基本卡通图案的示例分享

PS:说实话，我觉得挺可爱的，小时候经常看多啦A梦，突然感觉很亲切，很童真，瞬间年轻了好多，哈哈！热烈的笑脸

首先，先把HTML结构搭建好：

XML/HTML Code复制内容到剪贴板
  1. <div class="wrapper">    
  2.     <!--叮当猫整体-->    
  3.     <div class="doraemon">    
  4.         <!--头部-->    
  5.         <div class="head">    
  6.             <!--眼睛-->    
  7.             <div class="eyes">    
  8.                 <div class="eye left">    
  9.                     <!--眼珠-->    
  10.                     <div class="black bleft"></div>    
  11.                 </div>    
  12.                 <div class="eye right">    
  13.                     <div class="black bright"></div>    
  14.                 </div>    
  15.             </div>    
  16.             <!--脸部-->    
  17.             <div class="face">    
  18.                 <!--白色脸底-->    
  19.                 <div class="white"></div>    
  20.                 <!--鼻子-->    
  21.                 <div class="nose">    
  22.                     <!--鼻子高光部分-->    
  23.                     <div class="light"></div>    
  24.                 </div>    
  25.                 <!--鼻子的竖线-->    
  26.                 <div class="nose_line"></div>    
  27.                 <!--嘴巴-->    
  28.                 <div class="mouth"></div>    
  29.                 <!--胡须-->    
  30.                 <div class="whiskers">    
  31.                     <div class="whisker rTop r160"></div>    
  32.                     <div class="whisker rMiddle"></div>    
  33.                     <div class="whisker rBottom r20"></div>    
  34.                     <div class="whisker lTop r20"></div>    
  35.                     <div class="whisker lMiddle"></div>    
  36.                     <div class="whisker lBottom r160"></div>    
  37.                 </div>    
  38.             </div>    
  39.         </div>    
  40.         <!--脖子和铃铛-->    
  41.         <div class="choker">    
  42.             <!--铃铛-->    
  43.             <div class="bell">    
  44.                 <div class="bell_line"></div>    
  45.                 <div class="bell_circle"></div>    
  46.                 <div class="bell_under"></div>    
  47.                 <div class="bell_light"></div>    
  48.             </div>    
  49.         </div>    
  50.         <!--身体-->    
  51.         <div class="bodys">    
  52.             <!--肚子-->    
  53.             <div class="body"></div>    
  54.             <!--肚兜-->    
  55.             <div class="wraps"></div>    
  56.             <!--口袋-->    
  57.             <div class="pocket"></div>    
  58.             <!--遮住一半口袋，使其呈现半圆-->    
  59.             <div class="pocket_mask"></div>    
  60.         </div>    
  61.         <!--右手-->    
  62.         <div class="hand_right">    
  63.             <!--手臂-->    
  64.             <div class="arm"></div>    
  65.             <!--手掌-->    
  66.             <div class="circle"></div>    
  67.             <!--遮住手臂和身子交接处的线-->    
  68.             <div class="arm_rewrite"></div>    
  69.         </div>    
  70.         <!--左手-->    
  71.         <div class="hand_left">    
  72.             <div class="arm"></div>    
  73.             <div class="circle"></div>    
  74.             <div class="arm_rewrite"></div>    
  75.         </div>    
  76.         <!--脚-->    
  77.         <div class="foot">    
  78.             <div class="left"></div>    
  79.             <div class="right"></div>    
  80.              <!--双脚之间的缝隙-->    
  81.             <div class="foot_rewrite"></div>    
  82.         </div>    
  83.     </div>    
  84. </div>   

最好先把叮当猫的整体结构仔细研究一下，这对以后想要自己动手画别的人物形象很有帮助，思路会比较明朗。

接下来，我们按照头部，脖子，身体，脚部分别进行演示。首先将容器wrapper和叮当猫整体做一些基本的样式，叮当猫整体doraemon 设置position为relative，主要是为了便于 子元素/后代元素进行定位。

CSS Code复制内容到剪贴板
  1. .wrapper{    
  2.     margin: 50px 0 0 500px;    
  3. }    
  4. .doraemon{    
  5.     position: relative;    
  6. }   

头部head的样式，因为叮当猫的头部不是正圆，所以宽高有一点偏差，然后使用border-radius将头部从矩形变成椭圆形，然后再使用径向渐变从右上角给背景来个放射性渐变，然后在加个阴影，使其更有立体感，background：#07bbee;是为了兼容低版本浏览器：

CSS Code复制内容到剪贴板
  1. .doraemon .head {    
  2.             position:relative;    
  3.             width: 320px;    
  4.             height: 300px;    
  5.             border-radius: 150px;    
  6.             background: #07bbee;    
  7.             background: -webkit-radial-gradient(rightright top,#fff 10%,#07bbee 20%,#10a6ce 75%,#000);    
  8.             background: -moz-radial-gradient(rightright top,#fff 10%,#07bbee 20%,#10a6ce 75%,#000);    
  9.             background: -ms-radial-gradient(rightright top,#fff 10%,#07bbee 20%,#10a6ce 75%,#000);              
  10.             border:2px solid #555;    
  11.             box-shadow:-5px 10px 15px rgba(0,0,0,0.45);    
  12. }   

看看效果到底怎么样：
使用HTML和CSS3绘制基本卡通图案的示例分享

惊讶 shenmgui ,这么丑，别急，慢慢让它活过来：

CSS Code复制内容到剪贴板
  1. /*脸部*/    
  2.          .doraemon .face {    
  3.              position: relative; /*让所有脸部元素可自由定位*/    
  4.              z-index: 2;    /*脸在头部背景上面*/    
  5.          }    
  6.         /*白色脸底*/     
  7.         .doraemon .face .white {    
  8.             width: 265px;       /*设置宽高*/    
  9.             height: 195px;    
  10.             border-radius: 150px;    
  11.             position: absolute; /*进行绝对定位*/    
  12.             top: 75px;    
  13.             left: 25px;    
  14.             background: #fff;    
  15.             /*此放射渐变也是使脸的左下角暗一些，看上去更真实*/    
  16.             background: -webkit-radial-gradient(rightright top,#fff 75%,#eee 80%,#999 90%,#444);    
  17.             background: -moz-radial-gradient(rightright top,#fff 75%,#eee 80%,#999 90%,#444);    
  18.             background: –ms-radial-gradient(rightright top,#fff 75%,#eee 80%,#999 90%,#444);            
  19.          }    
  20.         /*鼻子*/    
  21.          .doraemon .face .nose{    
  22.              width:30px;    
  23.              height:30px;    
  24.              border-radius:15px;    
  25.              background:#c93300;    
  26.              border:2px solid #000;    
  27.              position:absolute;    
  28.              top:110px;    
  29.              left:140px;    
  30.              z-index:3;   /*鼻子在白色脸底下面*/    
  31.          }    
  32.         /*鼻子上的高光*/    
  33.         .doraemon .face .nose .light {    
  34.             width:10px;    
  35.             height:10px;    
  36.             border-radius: 5px;    
  37.             box-shadow: 19px 8px 5px #fff;  /*通过阴影实现高光*/    
  38.         }    
  39.          /*鼻子下的线*/    
  40.          .doraemon .face .nose_line{    
  41.              width:3px;    
  42.              height:100px;    
  43.              background:#333;    
  44.              position:absolute;    
  45.              top:143px;    
  46.              left:155px;    
  47.              z-index:3;    
  48.          }    
  49.          /*嘴巴*/    
  50.          .doraemon .face .mouth{    
  51.              width:220px;    
  52.              height:400px;    
  53.              /*通过底边框加上圆角模拟微笑嘴巴*/    
  54.              border-bottom:3px solid #333;    
  55.              border-radius:120px;    
  56.              position:absolute;    
  57.              top:-160px;    
  58.              left:45px;    
  59.          }    
  60.          /*眼睛*/    
  61.         .doraemon .eyes {    
  62.             position: relative;    
  63.             z-index: 3; /*眼睛在白色脸底下面*/    
  64.         }    
  65.         /*眼睛共同的样式*/    
  66.         .doraemon .eyes .eye{    
  67.             width:72px;    
  68.             height:82px;    
  69.             background:#fff;    
  70.             border:2px solid #000;    
  71.             border-radius:35px 35px;    
  72.             position:absolute;    
  73.             top:40px;    
  74.         }    
  75.         /*眼珠*/    
  76.         .doraemon .eyes .eye .black{    
  77.             width:14px;    
  78.             height:14px;    
  79.             background:#000;    
  80.             border-radius:7px;    
  81.             position:absolute;    
  82.             top:40px;    
  83.         }    
  84.         .doraemon .eyes .left{    
  85.             left:82px;    
  86.         }    
  87.         .doraemon .eyes .rightright {    
  88.             left: 156px;    
  89.         }    
  90.         .doraemon .eyes .eye .bleft {    
  91.             left: 50px;    
  92.         }    
  93.     
  94.         .doraemon .eyes .eye .bright {    
  95.             left: 7px;    
  96.         }   

写了这么多样式，结果是怎么样的呢：
使用HTML和CSS3绘制基本卡通图案的示例分享

生病 怎么看都觉得别扭，哦！还差胡须须和白色脸底的边框呢，咱给补上：

CSS Code复制内容到剪贴板
  1. /*胡须背景，主要用于挡住嘴巴的一部分，不要显得太长*/    
  2.         .doraemon .whiskers{    
  3.             width:220px;    
  4.             height:80px;    
  5.             background:#fff;    
  6.             border-radius:15px;    
  7.             position:absolute;    
  8.             top:120px;    
  9.             left:45px;    
  10.             z-index:2;   /*在鼻子和眼睛下面*/    
  11.         }    
  12.         /*所有胡子的公用样式*/    
  13.         .doraemon .whiskers .whisker {    
  14.             width: 60px;    
  15.             height: 2px;    
  16.             background: #333;    
  17.             position: absolute;    
  18.             z-index: 2;    
  19.         }    
  20.         /*右上胡子*/    
  21.         .doraemon .whiskers .rTop {    
  22.             left: 165px;    
  23.             top: 25px;    
  24.         }    
  25.         /*右中胡子*/    
  26.         .doraemon .whiskers .rMiddle {    
  27.             left: 167px;    
  28.             top: 45px;    
  29.         }    
  30.         /*右下胡子*/    
  31.         .doraemon .whiskers .rBottom {    
  32.             left: 165px;    
  33.             top: 65px;    
  34.         }    
  35.         /*左上胡子*/    
  36.         .doraemon .whiskers .lTop {    
  37.             left: 0;    
  38.             top: 25px;    
  39.         }    
  40.         /*左中胡子*/    
  41.         .doraemon .whiskers .lMiddle {    
  42.             left: -2px;    
  43.             top: 45px;    
  44.         }    
  45.         /*左下胡子*/    
  46.         .doraemon .whiskers .lBottom {    
  47.             left: 0;    
  48.             top: 65px;    
  49.         }    
  50.         /*胡子旋转角度*/    
  51.         .doraemon .whiskers .r160 {    
  52.             -webkit-transform: rotate(160deg);    
  53.             -moz-transform: rotate(160deg);    
  54.             -ms-transform: rotate(160deg);    
  55.             -o-transform: rotate(160deg);    
  56.             transform: rotate(160deg);    
  57.         }    
  58.         .doraemon .whiskers .r20 {    
  59.             -webkit-transform: rotate(200deg);    
  60.             -moz-transform: rotate(200deg);    
  61.             -ms-transform: rotate(200deg);    
  62.             -o-transform: rotate(200deg);    
  63.             transform: rotate(200deg);    
  64.         }   

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

微笑 这样就对了，看着多舒服啊！趁热打铁，做脖子和身体：

CSS Code复制内容到剪贴板
  1. /*围脖*/    
  2.         .doraemon .choker {    
  3.             width: 230px;    
  4.             height: 20px;    
  5.             background: #c40;    
  6.             /*线性渐变 让围巾看上去更自然*/    
  7.             background: -webkit-gradient(linear,left top,left bottombottom,from(#c40),to(#800400));    
  8.             background: -moz-linear-gradient(center top,#c40,#800400);    
  9.             background: -ms-linear-gradient(center top,#c40,#800400);    
  10.             border: 2px solid #000;    
  11.             border-radius: 10px;    
  12.             position: relative;    
  13.             top: -40px;    
  14.             left: 45px;    
  15.             z-index: 4;    
  16.         }    
  17.         /*铃铛*/    
  18.         .doraemon .choker .bell {    
  19.             width: 40px;    
  20.             height: 40px;    
  21.             _overflow: hidden; /*IE6 hack*/    
  22.             border: 2px solid #000;    
  23.             border-radius: 50px;    
  24.             background: #f9f12a;    
  25.             background: -webkit-gradient(linear, left top, left bottombottom, from(#f9f12a),color-stop(0.5, #e9e11a), to(#a9a100));    
  26.             background: -moz-linear-gradient(top, #f9f12a, #e9e11a 75%,#a9a100);    
  27.             background: -ms-linear-gradient(top, #f9f12a, #e9e11a 75%,#a9a100);    
  28.             box-shadow: -5px 5px 10px rgba(0,0,0,0.25);    
  29.             position: absolute;    
  30.             top: 5px;    
  31.             left: 90px;    
  32.         }    
  33.         /*双横线*/    
  34.         .doraemon .choker .bell_line {    
  35.             width: 36px;    
  36.             height: 2px;    
  37.             background: #f9f12a;    
  38.             border: 2px solid #333;    
  39.             border-radius: 3px 3px 0 0;    
  40.             position: absolute;    
  41.             top: 10px;    
  42.         }    
  43.         /*黑点*/    
  44.         .doraemon .choker .bell_circle{    
  45.             width:12px;    
  46.             height:10px;    
  47.             background:#000;    
  48.             border-radius:5px;    
  49.             position:absolute;    
  50.             top:20px;    
  51.             left:14px;    
  52.         }    
  53.         /*黑点下的线*/    
  54.         .doraemon .choker .bell_under{    
  55.             width: 3px;    
  56.             height:15px;    
  57.             background:#000;    
  58.             position:absolute;    
  59.             left: 18px;    
  60.             top:27px;    
  61.         }    
  62.         /*铃铛高光*/    
  63.         .doraemon .choker .bell_light{    
  64.             width:12px;    
  65.             height:12px;    
  66.             border-radius:10px;    
  67.             box-shadow:19px 8px 5px #fff;    
  68.             position:absolute;    
  69.             top:-5px;    
  70.             left:5px;    
  71.             opacity:0.7;    
  72.         }    
  73.         /*身子*/    
  74.         .doraemon .bodys {    
  75.             position: relative;    
  76.             top: -310px;    
  77.         }    
  78.         /*肚子*/    
  79.         .doraemon .bodys .body {    
  80.             width: 220px;    
  81.             height: 165px;    
  82.             background: #07beea;    
  83.             background: -webkit-gradient(linear,rightright top,left top,from(#07beea),color-stop(0.5, #0073b3),color-stop(0.75,#00b0e0), to(#0096be));    
  84.             background: -moz-linear-gradient(rightright center,#07beea,#0073b3 50%,#00b0e0 75%,#0096be 100%);    
  85.             background: -ms-linear-gradient(rightright center,#07beea,#0073b3 50%,#00b0e0 75%,#0096be 100%);    
  86.             border:2px solid #333;    
  87.             position:absolute;    
  88.             top:265px;    
  89.             left:50px;    
  90.         }    
  91.         /*白色肚兜*/    
  92.             .doraemon .bodys .wraps {    
  93.                 width: 170px;    
  94.                 height: 170px;    
  95.                 background: #fff;    
  96.                 background: -webkit-gradient(linear, rightright top, left bottombottom, from(#fff),color-stop(0.75,#fff),color-stop(0.83,#eee),color-stop(0.90,#999),color-stop(0.95,#444), to(#000));    
  97.                 background: -moz-linear-gradient(rightright top,#fff,#fff 75%,#eee 83%,#999 90%,#444 95%,#000);    
  98.                 background: -ms-linear-gradient(rightright top,#fff,#fff 75%,#eee 83%,#999 90%,#444 95%,#000);    
  99.                 border: 2px solid #000;    
  100.                 border-radius: 85px;    
  101.                 position: absolute;    
  102.                 left: 72px;    
  103.                 top: 230px;    
  104.             }    
  105.             /*口袋*/    
  106.             .doraemon .bodys .pocket {    
  107.                 width: 130px;    
  108.                 height: 130px;    
  109.                 border-radius: 65px;    
  110.                 background: #fff;    
  111.                 background: -webkit-gradient(linear, rightright top, left bottombottom, from(#fff),color-stop(0.70,#fff),color-stop(0.75,#f8f8f8),color-stop(0.80,#eee),color-stop(0.88,#ddd), to(#fff));    
  112.                 background: -moz-linear-gradient(rightright top, #fff, #fff 70%,#f8f8f8 75%,#eee 80%,#ddd 88%, #fff);    
  113.                 background: -ms-linear-gradient(rightright top, #fff, #fff 70%,#f8f8f8 75%,#eee 80%,#ddd 88%, #fff);    
  114.                 border: 2px solid #000;    
  115.                 position:absolute;    
  116.                 top: 250px;    
  117.                 left: 92px;    
  118.             }    
  119.             /*挡住口袋一半*/    
  120.             .doraemon .bodys .pocket_mask {    
  121.                 width: 134px;    
  122.                 height: 60px;    
  123.                 background:#fff;    
  124.                 border-bottom: 2px solid #000;    
  125.                 position:absolute;    
  126.                 top: 259px;    
  127.                 left: 92px;    
  128.            }   

好吧，脖子和身子都有啦！上图：
使用HTML和CSS3绘制基本卡通图案的示例分享

现在看起来有点像摆设品，不过笑容还是那么单纯，好了，赶紧把手脚做出来：

CSS Code复制内容到剪贴板
  1. /*左右手*/    
  2.             .doraemon .hand_right, .doraemon .hand_left {    
  3.                 height: 100px;    
  4.                 width: 100px;    
  5.                 position: absolute;    
  6.                 top: 272px;    
  7.                 left: 248px;    
  8.             }    
  9.             /*左手*/    
  10.             .doraemon .hand_left {    
  11.                 left: -10px;    
  12.             }    
  13.             /*手臂公共部分*/    
  14.             .doraemon .arm {    
  15.                 width:80px;    
  16.                 height:50px;    
  17.                 background: #07beea;    
  18.                 background: -webkit-gradient(linear, left top, left bottombottom, from(#07beea),color-stop(0.85,#07beea), to(#555));    
  19.                 background: -moz-linear-gradient(center top, #07BEEA, #07BEEA 85%, #555);    
  20.                 background: -ms-linear-gradient(center top, #07BEEA, #07BEEA 85%, #555);    
  21.                 border: 1px solid #000000;    
  22.                 box-shadow: -10px 7px 10px rgba(0, 0, 0, 0.35);    
  23.                 z-index: -1;    
  24.                 position: relative;    
  25.             }    
  26.             /*右手手臂*/    
  27.             .doraemon .hand_right .arm {    
  28.                 top: 17px;    
  29.                 -webkit-transform: rotate(35deg);    
  30.                 -moz-transform: rotate(35deg);    
  31.                 -ms-transform: rotate(35deg);    
  32.                 -o-transform: rotate(35deg);    
  33.                 transform: rotate(35deg);    
  34.             }    
  35.             /*左手手臂*/    
  36.             .doraemon .hand_left .arm {    
  37.                 top: 17px;    
  38.                 background: #0096be;   /*背光一面使用纯色，使其有立体感*/    
  39.                 box-shadow: 5px -7px 10px rgba(0, 0, 0, 0.25);    
  40.                 -webkit-transform: rotate(145deg);    
  41.                 -moz-transform: rotate(145deg);    
  42.                 -ms-transform: rotate(145deg);    
  43.                 -o-transform: rotate(145deg);    
  44.                 transform: rotate(145deg);    
  45.             }    
  46.             /*圆形手掌公共部分*/    
  47.             .doraemon .circle {    
  48.                 width: 60px;    
  49.                 height: 60px;    
  50.                 border-radius: 30px;    
  51.                 border: 2px solid #000;    
  52.                 background: #fff;    
  53.                 background: -webkit-gradient(linear, rightright top, left bottombottom, from(#fff),color-stop(0.5,#fff),color-stop(0.70,#eee),color-stop(0.8,#ddd), to(#999));    
  54.                 background: -moz-linear-gradient(rightright top, #fff, #fff 50%, #eee 70%, #ddd 80%,#999);    
  55.                 background: -ms-linear-gradient(rightright top, #fff, #fff 50%, #eee 70%, #ddd 80%,#999);    
  56.                 position: absolute;    
  57.             }    
  58.             /*右手手掌*/    
  59.             .doraemon .hand_right .circle {    
  60.                 left: 40px;    
  61.                 top: 32px;    
  62.             }    
  63.             /*左手手掌*/    
  64.             .doraemon .hand_left .circle {    
  65.                 left: -20px;    
  66.                 top: 32px;    
  67.             }    
  68.             /*手臂和身体结合处，使用背景遮住边框*/    
  69.             .doraemon .arm_rewrite {    
  70.                 height: 45px;    
  71.                 width: 5px;    
  72.                 background: #07beea;    
  73.                 position: relative;    
  74.             }    
  75.             /*右手结合处*/    
  76.             .doraemon .hand_right .arm_rewrite {    
  77.                 top: -45px;    
  78.                 left: 22px;    
  79.             }    
  80.             /*左手结合处*/    
  81.             .doraemon .hand_left .arm_rewrite {    
  82.                 top: -45px;    
  83.                 left: 60px;    
  84.                 background: #0096be; /*同理，背光一面使用纯色，使其有立体感*/    
  85.             }    
  86.             /*脚部*/    
  87.             .doraemon .foot {    
  88.                 width: 280px;    
  89.                 height: 40px;    
  90.                 position: relative;    
  91.                 top: 55px;    
  92.                 left: 20px;    
  93.             }    
  94.             /*左右脚共同样式*/    
  95.             .doraemon .foot .left, .doraemon .foot .rightright {    
  96.                 width: 125px;    
  97.                 height: 30px;    
  98.                 background: #fff;    
  99.                 background: -webkit-gradient(linear, rightright top, left bottombottom, from(#fff),color-stop(0.75,#fff),color-stop(0.85,#eee), to(#999));    
  100.                 background: -moz-linear-gradient(rightright top, #fff, #fff 75%, #eee 85%, #999);    
  101.                 background: -ms-linear-gradient(rightright top, #fff, #fff 75%, #eee 85%, #999);    
  102.                 border: 2px solid #333;    
  103.                 border-radius: 80px 60px 60px 40px;    
  104.                 box-shadow: -6px 0 10px rgba(0, 0, 0, 0.35);    
  105.                 position: relative;    
  106.             }    
  107.             .doraemon .foot .left {    
  108.                 left: 8px;    
  109.                 top: 65px;    
  110.             }    
  111.            
  112.             .doraemon .foot .rightright {    
  113.                 top: 31px;    
  114.                 left: 141px;    
  115.             }    
  116.             /*双脚之间的缝隙，加阴影使用立体感*/    
  117.             .doraemon .foot .foot_rewrite {    
  118.                 width: 20px;    
  119.                 height: 10px;    
  120.                 background: #fff;    
  121.                 background: -webkit-gradient(linear, rightright top, left bottombottom, from(#666),color-stop(0.83,#fff), to(#fff));    
  122.                 background: -moz-linear-gradient(rightright top, #666, #fff 83%, #fff);    
  123.                 background: -ms-linear-gradient(rightright top, #666, #fff 83%, #fff);    
  124.                 /*制作半圆效果*/    
  125.                 border: 2px solid #000;       
  126.                 border-bottom: none;    
  127.                 border-radius: 40px 40px 0 0;    
  128.                 position: relative;    
  129.                 top: -11px;    
  130.                 left: 130px;    
  131.                 _left: 127px;    
  132.             }   

好了，最后完整结果：
使用HTML和CSS3绘制基本卡通图案的示例分享

看一下，效果是不是和一开始的一样呢 大笑 ，虽然做好了，但是还是可以让它动起来的，比如眼睛，我们可以给它加个动画效果，让眼睛转动起来：

CSS Code复制内容到剪贴板
  1. /*眼珠*/    
  2.         .doraemon .eyes .eye .black {    
  3.             width: 14px;    
  4.             height: 14px;    
  5.             background: #000;    
  6.             border-radius: 7px;    
  7.             position: absolute;    
  8.             top: 40px;    
  9.             -webkit-animation: eyemove 3s linear infinite;    
  10.             -moz-animation: eyemove 3s linear infinite;    
  11.             -ms-animation: eyemove 3s linear infinite;    
  12.             -o-animation: eyemove 3s linear infinite;    
  13.             animation: eyemove 3s linear infinite;    
  14.         }    
  15.     
  16.         /*让眼睛动起来*/    
  17.         @-webkit-keyframes eyemove {    
  18.             70%{    
  19.                 margin:0 0 0 0;    
  20.             }    
  21.             80% {    
  22.                 margin: -22px 0 0 0;    
  23.             }    
  24.     
  25.             85% {    
  26.                 margin: -22px 0 0 5px;    
  27.             }    
  28.     
  29.             90% {    
  30.                 margin: -22px 10px 0 0;    
  31.             }    
  32.     
  33.             93% {    
  34.                 margin: -22px 0 0 0;    
  35.             }    
  36.     
  37.             96% {    
  38.                 margin: 0 0 0 0;    
  39.             }    
  40.         }    
  41.     
  42.         @-moz-keyframes eyemove {    
  43.             70% {    
  44.                 margin: 0 0 0 0;    
  45.             }    
  46.     
  47.             80% {    
  48.                 margin: -22px 0 0 0;    
  49.             }    
  50.     
  51.             85% {    
  52.                 margin: -22px 0 0 5px;    
  53.             }    
  54.     
  55.             90% {    
  56.                 margin: -22px 10px 0 0;    
  57.             }    
  58.     
  59.             93% {    
  60.                 margin: -22px 0 0 0;    
  61.             }    
  62.     
  63.             96% {    
  64.                 margin: 0 0 0 0;    
  65.             }    
  66.         }    
  67.     
  68.         @-o-keyframes eyemove {    
  69.             70% {    
  70.                 margin: 0 0 0 0;    
  71.             }    
  72.     
  73.             80% {    
  74.                 margin: -22px 0 0 0;    
  75.             }    
  76.     
  77.             85% {    
  78.                 margin: -22px 0 0 5px;    
  79.             }    
  80.     
  81.             90% {    
  82.                 margin: -22px 10px 0 0;    
  83.             }    
  84.     
  85.             93% {    
  86.                 margin: -22px 0 0 0;    
  87.             }    
  88.     
  89.             96% {    
  90.                 margin: 0 0 0 0;    
  91.             }    
  92.         }    
  93.         @keyframes eyemove {    
  94.             70% {    
  95.                 margin: 0 0 0 0;    
  96.             }    
  97.     
  98.             80% {    
  99.                 margin: -22px 0 0 0;    
  100.             }    
  101.     
  102.             85% {    
  103.                 margin: -22px 0 0 5px;    
  104.             }    
  105.     
  106.             90% {    
  107.                 margin: -22px 10px 0 0;    
  108.             }    
  109.     
  110.             93% {    
  111.                 margin: -22px 0 0 0;    
  112.             }    
  113.     
  114.             96% {    
  115.                 margin: 0 0 0 0;    
  116.             }    
  117.         }   

OK，这样，眼睛就会动了，有兴趣的可以试一下，这里就无法展示了。但是如果你有什么更好的动画效果也可以尝试，那么这个案例就结束了。

PS：虽然这只是一个案例，不过确实帮助我开阔思维，而且其实做一个这样的效果，可能会花费很多时间，至少对我来说目前确实是这样子，主要难点还是布局定位和颜色的合理搭配，才能使形象更加逼真生动！

标签：
CSS3,绘图
蝙蝠岛资源网 Design By www.hbtsch.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
蝙蝠岛资源网 Design By www.hbtsch.com

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

暂无使用HTML和CSS3绘制基本卡通图案的示例分享的评论...
www.hbtsch.com 蝙蝠岛资源网
139,976影音资源
144,792福利资源
21,817软件资源
631,128技术资源
一句话新闻
一口气升级7个大模型SaaS应用，百度智能云：突出一个“开箱即用” - 2024/12/24

这一波大模型产业落地浪潮里，不少企业其实处在 “干瞪眼“的状态。

一种情况是，很多大模型产品看得见却摸不着，在台上一个个遥遥领先——今天Sora技精四座，明天英伟达的机器人又赢得满堂彩，可是到了台下一问：啥时候能用上啊？答曰：遥遥无期。

另一种情况是，企业想用上大模型，却又难免瞻前顾后——既要考虑场景融合，又得兼顾安全性，还要考虑打通现有系统，再加上各种部署成本和繁琐的采购流程……最后只能拂袖：罢了，再等等吧。

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
蝙蝠岛资源网 Design By www.hbtsch.com