佚名
佚名

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

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

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

CSS Code 复制内容到剪贴板
  1.     
  2. "http://www.w3.org/1999/xhtml">    
  3.     
  4.     content="text/html; charset=utf-8" http-equiv="Content-Type" />    
  5.     纯CSS漫画    
  6.     "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.         
  1048.     
  1049.     
  1050.     "width: 400px; height: 359px; position: relative; margin: 50px auto;">    
  1051.         "outer-circle">    
  1052.                 
  1053.             "inner-circle">    
  1054.                     
  1055.                 "inner-circle-light">
    
  •                 "header-top">
    •     
  •                     
  •                 "hair-left-1">
    •     
  •                 "hair-left-2">
    •     
  •                 "hair-light-1">
    •     
  •                 "hair-light-1-over">
    •     
  •                 "hair-light-2">
    •     
  •                 "hair-right-1">    
  •                     "hair-right-2">    
  •                     
    •     
  •                 
    •     
  •                 "header-left">    
  •                     
  •                 "face-main">    
  •                 "face-light-1">    
  •                 "face-light-2">    
  •                 "face-top">    
  •                 "face-right-1">    
  •                 "face-bottom-1">    
  •                 "face-bottom-1-over">    
  •                 "face-bottom-2">    
  •                 "face-bottom-2-over">    
  •                 "chin">    
  •                 "ear">    
  •                         
  •                     "ear-inner-1">    
  •                     "ear-inner-2">    
  •                     "ear-over">    
  •                     "ear-light">    
  •                     
  •                 "eye-left">    
  •                         
  •                     "eye-left-inner">    
  •                     "eye-left-light1">    
  •                     "eye-left-light2">    
  •                     "eye-left-eyelash1">    
  •                     "eye-left-eyelash2">    
  •                     "eye-left-eyelash3">    
  •                     "eye-left-eyelash4">    
  •                     "eye-left-eyelash5">    
  •                     
  •                 "eye-right">    
  •                         
  •                     "eye-right-inner">    
  •                     "eye-right-light1">    
  •                     "eye-right-light2">    
  •                     "eye-right-eyelash1">    
  •                     "eye-right-eyelash2">    
  •                     "eye-right-eyelash3">    
  •                     "eye-right-eyelash4">    
  •                     "eye-right-eyelash5">    
  •                     
  •                 "right-eyebrow">    
  •                         
  •                     "right-eyebrow-over">    
  •                     
  •                 "left-eyebrow">    
  •                         
  •                     "left-eyebrow-over">    
  •                     
  •                 "nose">    
  •                         
  •                     "nose-tip">    
  •                     "nose-over">    
  •                     
  •                 "mouth">    
  •                         
  •                     "mouth-over-1">    
  •                     "mouth-over-2">    
  •                     "mouth-over-3">    
  •                     "mouth-over-4">    
  •                     "mouth-tip">    
  •                     
  •                 "mouth-inner">    
  •                 "name-lable">    
  •                     ASTRO BOY    
  •                     "name-lable-light">    
  •                     
  •                 
  •             
  •         
  •     
  •     

    •   

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

    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绘制基本卡通图案的示例分享_第3张图片

    惊讶 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绘制基本卡通图案的示例分享_第4张图片

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

    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绘制基本卡通图案的示例分享_第5张图片

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

    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绘制基本卡通图案的示例分享_第6张图片

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

    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绘制基本卡通图案的示例分享_第7张图片

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

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

    你可能感兴趣的:(使用HTML和CSS3绘制基本卡通图案的示例分享)

    • 斤斤计较的婚姻到底有多难？ 白心之岂必有为
      很多人私聊我会问到在哪个人群当中斤斤计较的人最多？我都会回答他，一般婚姻出现问题的斤斤计较的人士会非常多，以我多年经验，在婚姻落的一塌糊涂的人当中，斤斤计较的人数占比在20～30%以上，也就是说10个婚姻出现问题的斤斤计较的人有2-3个有多不减。在婚姻出问题当中，有大量的心理不平衡的、尖酸刻薄的怨妇。在婚姻中仅斤斤计较有两种类型：第一种是物质上的，另一种是精神上的。在物质与精神上抠门已经严重的影响
    • 情绪觉察日记第37天 露露_e800
      今天是家庭关系规划师的第二阶最后一天，慧萍老师帮我做了个案，帮我处理了埋在心底好多年的一份恐惧，并给了我深深的力量！这几天出来学习，爸妈过来婆家帮我带小孩，妈妈出于爱帮我收拾东西，并跟我先生和婆婆产生矛盾，妈妈觉得他们没有照顾好我…。今晚回家见到妈妈，我很欣赏她并赞扬她，妈妈说今晚要跟我睡我说好，当我们俩躺在床上准备睡觉的时候，我握着妈妈的手对她说:妈妈这几天辛苦你了，你看你多利害把我们的家收拾得
    • 芦花鞋一四 许叶晗
      又是在一个寒冷的夏日里，青铜和葵花决定今天一起去卖芦花鞋，奶奶亲手给他们做了一碗热乎乎的粥对他们说:“就靠你们两挣生活费了这碗粥赶紧趁热喝了吧！”于是青铜和葵花喝完了奶奶给她们做的粥，就准备去镇上卖卢花鞋，这回青铜和葵花穿着新的芦花鞋来到了镇上。青铜这回看到了很多人都在卖，用手势表达对葵花说:“这回有好多人在抢我们生意呢！我们必须得吆喝起来。”葵花点了点头。可是谁知他们也大声的叫，卖芦花喽！卖芦花
    • QQ群采集助手，精准引流必备神器 2401_87347160 其他经验分享
      功能概述微信群查找与筛选工具是一款专为微信用户设计的辅助工具，它通过关键词搜索功能，帮助用户快速找到相关的微信群，并提供筛选是否需要验证的群组的功能。主要功能关键词搜索：用户可以输入关键词，工具将自动查找包含该关键词的微信群。筛选功能：工具提供筛选机制，用户可以选择是否只显示需要验证或不需要验证的群组。精准引流：通过上述功能，用户可以更精准地找到目标群组，进行有效的引流操作。3.设备需求该工具可以
    • 关于沟通这件事，项目经理不需要每次都面对面进行 流程大师兄
      很多项目经理都会遇到这样的问题，项目中由于事情太多，根本没有足够的时间去召开会议，那在这种情况下如何去有效地管理项目中的利益相关者？当然，不建议电子邮件也不需要开会的话，建议可以采取下面几种方式来形成有效的沟通，这几种方式可以帮助你努力的通过各种办法来保持和各方面的联系。项目经理首先要问自己几个问题，项目中哪些利益相关者是必须要进行沟通的？可以列出项目中所有的利益相关者清单，同时也整理出项目中哪些
    • 机器学习与深度学习间关系与区别 ℒℴѵℯ心·动ꦿ໊ོ꫞ 人工智能学习深度学习python
      一、机器学习概述定义机器学习（MachineLearning,ML）是一种通过数据驱动的方法，利用统计学和计算算法来训练模型，使计算机能够从数据中学习并自动进行预测或决策。机器学习通过分析大量数据样本，识别其中的模式和规律，从而对新的数据进行判断。其核心在于通过训练过程，让模型不断优化和提升其预测准确性。主要类型1.监督学习（SupervisedLearning）监督学习是指在训练数据集中包含输入
    • 铭刻于星（四十二） 随风至
      69夜晚，绍敏同学做完功课后，看了眼房外，没听到动静才敢从书包的夹层里拿出那个心形纸团。折痕压得很深，都有些旧了，想来是已经写好很久了。绍敏同学慢慢地、轻轻地捏开折叠处，待到全部拆开后，又反复抚平纸张，然后仔细地一字字默看。只是开头的三个字是第一次看到，让她心漏跳了几拍。“亲爱的绍敏：从四年级的时候，我就喜欢你了，但是我一直不敢说，怕影响你学习。六年级的时候听说有人跟你表白，你接受了，我很难过，但
    • 底层逆袭到底有多难，不甘平凡的你准备好了吗？让吴起给你说说 造命者说
      底层逆袭到底有多难，不甘平凡的你准备好了吗？让吴起给你说说我叫吴起，生于公元前440年的战国初期，正是群雄并起、天下纷争不断的时候。后人说我是军事家、政治家、改革家，是兵家代表人物。评价我一生历仕鲁、魏、楚三国，通晓兵家、法家、儒家三家思想，在内政军事上都有极高的成就。周安王二十一年（公元前381年），因变法得罪守旧贵族，被人乱箭射死。我出生在卫国一个“家累万金”的富有家庭，从年轻时候起就不甘平凡
    • 2020-01-25 晴岚85
      郑海燕坚持分享590天2020.1.24在生活中只存在两个问题。一个问题是：你知道想要达成的目标是什么，但却不知道如何才能达成；另一个问题是：你不知道你的目标是什么。前一个是行动的问题，后一个是结果的问题。通过制定具体的下一步行动，可以解决不知道如何开始行动的问题。而通过去想象结果，对结果做预估，可以解决找不着目标的问题。对于所有吸引我们注意力，想要完成的任务，你可以先想象一下，预期的结果究竟是什
    • 随笔 | 仙一般的灵气 海思沧海
      仙岛今天，我看了你全部，似乎已经进入你的世界我不知道，这是否是梦幻，还是你仙一般的灵气吸引了我也许每一个人都要有一份属于自己的追求，这样才能够符合人生的梦想，生活才能够充满着阳光与快乐我不知道，我为什么会这样的感叹，是在感叹自己的人生，还是感叹自己一直没有孜孜不倦的追求只感觉虚度了光阴，每天活在自己的梦中，活在一个不真实的世界是在逃避自己，还是在逃避周围的一切有时候我嘲笑自己，嘲笑自己如此的虚无，
    • 想家 爆米花机
      也许不同于大家对家乡的思念，我对家乡甚至是疯狂的不舍。还未踏出车站就感觉到幸福，我享受这里的夕阳、这里的浓烈柴火味、这里每一口家常菜。我是宅女，我贪恋家的安逸。刚刚踏出大学校门，初出茅庐，无法适应每年只能国庆和春节回家。我焦虑、失眠、无端发脾气，是无法适应工作的节奏，是无法接受我将一步步离开家乡的事实。我不想承认自己胸无大志，选择再次踏上征程。图片发自App
    • 【iOS】MVC设计模式 Magnetic_h iosmvc设计模式objective-c学习ui
      MVC前言如何设计一个程序的结构，这是一门专门的学问，叫做"架构模式"（architecturalpattern），属于编程的方法论。MVC模式就是架构模式的一种。它是Apple官方推荐的App开发架构，也是一般开发者最先遇到、最经典的架构。MVC各层controller层Controller/ViewController/VC（控制器）负责协调Model和View，处理大部分逻辑它将数据从Mod
    • OC语言多界面传值五大方式 Magnetic_h iosui学习objective-c开发语言
      前言在完成暑假仿写项目时，遇到了许多需要用到多界面传值的地方，这篇博客来总结一下比较常用的五种多界面传值的方式。属性传值属性传值一般用前一个界面向后一个界面传值，简单地说就是通过访问后一个视图控制器的属性来为它赋值，通过这个属性来做到从前一个界面向后一个界面传值。首先在后一个界面中定义属性@interfaceBViewController:UIViewController@propertyNSSt
    • 一百九十四章. 自相矛盾 巨木擎天
      唉！就这么一夜，林子感觉就像过了很多天似的，先是回了阳间家里，遇到了那么多不可思议的事情儿。特别是小伙伴们，第二次与自己见面时，僵硬的表情和恐怖的气氛，让自己如坐针毡，打从心眼里难受！还有东子，他现在还好吗？有没有被人欺负？护城河里的小鱼小虾们，还都在吗？水不会真的干枯了吧？那对相亲相爱漂亮的太平鸟儿，还好吧！春天了，到了做窝、下蛋、喂养小鸟宝宝的时候了，希望它们都能够平安啊！虽然没有看见家人，也
    • UI学习——cell的复用和自定义cell Magnetic_h ui学习
      目录cell的复用手动（非注册）自动（注册）自定义cellcell的复用在iOS开发中，单元格复用是一种提高表格（UITableView）和集合视图（UICollectionView）滚动性能的技术。当一个UITableViewCell或UICollectionViewCell首次需要显示时，如果没有可复用的单元格，则视图会创建一个新的单元格。一旦这个单元格滚动出屏幕，它就不会被销毁。相反，它被添
    • element实现动态路由+面包屑 软件技术NINI vue案例vue.js前端
      el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
    • 10月|愿你的青春不负梦想-读书笔记-01 Tracy的小书斋
      本书的作者是俞敏洪，大家都很熟悉他了吧。俞敏洪老师是我行业的领头羊吧，也是我事业上的偶像。本日摘录他书中第一章中的金句：『一个人如果什么目标都没有，就会浑浑噩噩，感觉生命中缺少能量。能给我们能量的，是对未来的期待。第一件事，我始终为了进步而努力。与其追寻全世界的骏马，不如种植丰美的草原，到时骏马自然会来。第二件事，我始终有阶段性的目标。什么东西能给我能量？答案是对未来的期待。』读到这里的时候，我便
    • C语言宏函数 南林yan C语言c语言
      一、什么是宏函数？通过宏定义的函数是宏函数。如下，编译器在预处理阶段会将Add(x,y)替换为((x)*(y))#defineAdd(x,y)((x)*(y))#defineAdd(x,y)((x)*(y))intmain(){inta=10;intb=20;intd=10;intc=Add(a+d,b)*2;cout<
    • 地推话术，如何应对地推过程中家长的拒绝 校师学
      相信校长们在做地推的时候经常遇到这种情况：市场专员反馈家长不接单，咨询师反馈难以邀约这些家长上门，校区地推疲软，招生难。为什么？仅从地推层面分析，一方面因为家长受到的信息轰炸越来越多，对信息越来越“免疫”；而另一方面地推人员的专业能力和营销话术没有提高，无法应对家长的拒绝，对有意向的家长也不知如何跟进，眼睁睁看着家长走远；对于家长的疑问，更不知道如何有技巧地回答，机会白白流失。由于回答没技巧和专业
    • 谢谢你们，爱你们！ 鹿游儿
      昨天家人去泡温泉，二个孩子也带着去，出发前一晚，匆匆下班，赶回家和孩子一起收拾。饭后，我拿出笔和本子（上次去澳门时做手帐的本子）写下了1\2\3\4\5\6\7\8\9,让后让小壹去思考，带什么出发去旅游呢？她在对应的数字旁边画上了，泳衣、泳圈、肖恩、内衣内裤、tapuy、拖鞋……画完后，就让她自己对着这个本子，将要带的，一一带上，没想到这次带的书还是这本《便便工厂》(晚上姑婆发照片过来，妹妹累得
    • C语言如何定义宏函数？ 小九格物 c语言
      在C语言中，宏函数是通过预处理器定义的，它在编译之前替换代码中的宏调用。宏函数可以模拟函数的行为，但它们不是真正的函数，因为它们在编译时不会进行类型检查，也不会分配存储空间。宏函数的定义通常使用#define指令，后面跟着宏的名称和参数列表，以及宏展开后的代码。宏函数的定义方式：1.基本宏函数：这是最简单的宏函数形式，它直接定义一个表达式。#defineSQUARE(x)((x)*(x))2.带参
    • 微服务下功能权限与数据权限的设计与实现 nbsaas-boot 微服务java架构
      在微服务架构下，系统的功能权限和数据权限控制显得尤为重要。随着系统规模的扩大和微服务数量的增加，如何保证不同用户和服务之间的访问权限准确、细粒度地控制，成为设计安全策略的关键。本文将讨论如何在微服务体系中设计和实现功能权限与数据权限控制。1.功能权限与数据权限的定义功能权限：指用户或系统角色对特定功能的访问权限。通常是某个用户角色能否执行某个操作，比如查看订单、创建订单、修改用户资料等。数据权限：
    • 理解Gunicorn：Python WSGI服务器的基石 范范0825 ipythonlinux运维
      理解Gunicorn：PythonWSGI服务器的基石介绍Gunicorn，全称GreenUnicorn，是一个为PythonWSGI（WebServerGatewayInterface）应用设计的高效、轻量级HTTP服务器。作为PythonWeb应用部署的常用工具，Gunicorn以其高性能和易用性著称。本文将介绍Gunicorn的基本概念、安装和配置，帮助初学者快速上手。1.什么是Gunico
    • 小丽成长记（四十三） 玲玲54321
      小丽发现，即使她好不容易调整好自己的心态下一秒总会有不确定的伤脑筋的事出现，一个接一个的问题，人生就没有停下的时候，小问题不断出现。不过她今天看的书，她接受了人生就是不确定的，厉害的人就是不断创造确定性，在Ta的领域比别人多的确定性就能让自己脱颖而出，显示价值从而获得的比别人多的利益。正是这样的原因，因为从前修炼自己太少，使得她现在在人生道路上打怪起来困难重重，她似乎永远摆脱不了那种无力感，有种习
    • 学点心理知识，呵护孩子健康 静候花开_7090
      昨天听了华中师范大学教育管理学系副教授张玲老师的《哪里才是学生心理健康的最后庇护所，超越教育与技术的思考》的讲座。今天又重新学习了一遍，收获匪浅。张玲博士也注意到了当今社会上的孩子由于心理问题导致的自残、自杀及伤害他人等恶性事件。她向我们普及了一个重要的命题，她说心理健康的一些基本命题，我们与我们通常的一些教育命题是不同的，她还举了几个例子，让我们明白我们原来以为的健康并非心理学上的健康。比如如果
    • 2021年12月19日，春蕾教育集团团建活动感受——黄晓丹 黄错错加油
      感受:1.从陌生到熟悉的过程。游戏环节让我们在轻松的氛围中得到了锻炼，也增长了不少知识。2.游戏过程中，我们贡献的是个人力量，展现的是团队的力量。它磨合的往往不止是工作的熟悉，更是观念上契合度的贴近。3.这和工作是一样的道理。在各自的岗位上，每个人摆正自己的位置、各司其职充分发挥才能，并团结一致劲往一处使，才能实现最大的成功。新知:1.团队精神需要不断地创新。过去，人们把创新看作是冒风险，现在人们
    • Cell Insight | 单细胞测序技术又一新发现，可用于HIV-1和Mtb共感染个体诊断 尐尐呅
      结核病是艾滋病合并其他疾病中导致患者死亡的主要原因。其中结核病由结核分枝杆菌（Mycobacteriumtuberculosis,Mtb）感染引起，获得性免疫缺陷综合症（艾滋病）由人免疫缺陷病毒（Humanimmunodeficiencyvirustype1,HIV-1）感染引起。国家感染性疾病临床医学研究中心/深圳市第三人民医院张国良团队携手深圳华大生命科学研究院吴靓团队，共同研究得出单细胞测序
    • c++ 的iostream 和 c++的stdio的区别和联系 黄卷青灯77 c++算法开发语言iostreamstdio
      在C++中，iostream和C语言的stdio.h都是用于处理输入输出的库，但它们在设计、用法和功能上有许多不同。以下是两者的区别和联系：区别1.编程风格iostream（C++风格）：C++标准库中的输入输出流类库，支持面向对象的输入输出操作。典型用法是cin（输入）和cout（输出），使用>操作符来处理数据。更加类型安全，支持用户自定义类型的输入输出。#includeintmain(){in
    • 瑶池防线 谜影梦蝶
      冥华虽然逃过了影梦的军队，但他是一个忠臣，他选择上报战况。败给影梦后成逃兵，高层亡尔还活着，七重天失守......随便一条，即可处死冥华。冥华自然是知道以仙界高层的习性此信一发自己必死无疑，但他还选择上报实情，因为责任。同样此信送到仙宫后，知道此事的人，大多数人都认定冥华要完了，所以上到仙界高层，下到扫大街的，包括冥华自己，全都准备好迎接冥华之死。如果仙界现在还属于两方之争的话，冥华必死无疑。然而
    • 爬山后遗症 璃绛
      爬山，攀登，一步一步走向制高点，是一种挑战。成功抵达是一种无法言语的快乐，在山顶吹吹风，看看风景，这是从未有过的体验。然而，爬山一时爽，下山腿打颤，颠簸的路，一路向下走，腿部力量不够，走起来抖到不行，停不下来了！第二天必定腿疼，浑身酸痛，坐立难安！
    • Enum用法 不懂事的小屁孩 enum
      以前的时候知道enum，但是真心不怎么用，在实际开发中，经常会用到以下代码: protected final static String XJ = "XJ"; protected final static String YHK = "YHK"; protected final static String PQ = "PQ";
    • 【Spark九十七】RDD API之aggregateByKey bit1129 spark
      1. aggregateByKey的运行机制   /** * Aggregate the values of each key, using given combine functions and a neutral "zero value". * This function can return a different result type
    • hive创建表是报错： Specified key was too long; max key length is 767 bytes daizj hive
      今天在hive客户端创建表时报错，具体操作如下   hive> create table test2(id string); FAILED: Execution Error, return code 1 from org.apache.hadoop.hive.ql.exec.DDLTask. MetaException(message:javax.jdo.JDODataSto
    • Map 与 JavaBean之间的转换 周凡杨 java自省转换反射
      最近项目里需要一个工具类，它的功能是传入一个Map后可以返回一个JavaBean对象。很喜欢写这样的Java服务，首先我想到的是要通过Java 的反射去实现匿名类的方法调用，这样才可以把Map里的值set 到JavaBean里。其实这里用Java的自省会更方便，下面两个方法就是一个通过反射，一个通过自省来实现本功能。 1：JavaBean类 1 &nb
    • java连接ftp下载 g21121 java
      有的时候需要用到java连接ftp服务器下载，上传一些操作，下面写了一个小例子。 /** ftp服务器地址 */ private String ftpHost; /** ftp服务器用户名 */ private String ftpName; /** ftp服务器密码 */ private String ftpPass; /** ftp根目录 */ private String f
    • web报表工具FineReport使用中遇到的常见报错及解决办法（二） 老A不折腾 finereportweb报表java报表总结
        抛砖引玉，希望大家能把自己整理的问题及解决方法晾出来，Mark一下，利人利己。   出现问题先搜一下文档上有没有，再看看度娘有没有，再看看论坛有没有。有报错要看日志。下面简单罗列下常见的问题，大多文档上都有提到的。   1、没有返回数据集： 在存储过程中的操作语句之前加上set nocount on 或者在数据集exec调用存储过程的前面加上这句。当S
    • linux 系统cpu 内存等信息查看 墙头上一根草 cpu内存liunx
      1 查看CPU 　　1.1 查看CPU个数 　　# cat /proc/cpuinfo | grep "physical id" | uniq | wc -l 　　2 　　**uniq命令：删除重复行;wc –l命令：统计行数** 　　1.2 查看CPU核数 　　# cat /proc/cpuinfo | grep "cpu cores" | u
    • Spring中的AOP aijuans springAOP
        Spring中的AOP Written by Tony Jiang @ 2012-1-18 （转）何为AOP AOP，面向切面编程。 在不改动代码的前提下，灵活的在现有代码的执行顺序前后，添加进新规机能。 来一个简单的Sample: 目标类： [java]  view plain copy print ? package&nb
    • placeholder(HTML 5) IE 兼容插件 alxw4616 JavaScriptjquery jQuery插件
      placeholder 这个属性被越来越频繁的使用. 但为做HTML 5 特性IE没能实现这东西. 以下的jQuery插件就是用来在IE上实现该属性的. /** * [placeholder(HTML 5) IE 实现.IE9以下通过测试.] * v 1.0 by oTwo 2014年7月31日 11:45:29 */ $.fn.placeholder = function
    • Object类,值域,泛型等总结(适合有基础的人看) 百合不是茶 泛型的继承和通配符变量的值域Object类转换
      java的作用域在编程的时候经常会遇到,而我经常会搞不清楚这个 问题,所以在家的这几天回忆一下过去不知道的每个小知识点   变量的值域;   package 基础; /** * 作用域的范围 * * @author Administrator * */ public class zuoyongyu { public static vo
    • JDK1.5 Condition接口 bijian1013 javathreadConditionjava多线程
      Condition 将 Object 监视器方法（wait、notify和 notifyAll）分解成截然不同的对象，以便通过将这些对象与任意 Lock 实现组合使用，为每个对象提供多个等待 set （wait-set）。其中，Lock 替代了 synchronized 方法和语句的使用，Condition 替代了 Object 监视器方法的使用。 条件（也称为条件队列或条件变量）为线程提供了一
    • 开源中国OSC源创会记录 bijian1013 hadoopsparkMemSQL
      一.Strata+Hadoop World（SHW）大会         是全世界最大的大数据大会之一。SHW大会为各种技术提供了深度交流的机会，还会看到最领先的大数据技术、最广泛的应用场景、最有趣的用例教学以及最全面的大数据行业和趋势探讨。          二.Hadoop   &nbs
    • 【Java范型七】范型消除 bit1129 java
      范型是Java1.5引入的语言特性，它是编译时的一个语法现象，也就是说，对于一个类，不管是范型类还是非范型类，编译得到的字节码是一样的，差别仅在于通过范型这种语法来进行编译时的类型检查，在运行时是没有范型或者类型参数这个说法的。 范型跟反射刚好相反，反射是一种运行时行为，所以编译时不能访问的变量或者方法(比如private)，在运行时通过反射是可以访问的，也就是说，可见性也是一种编译时的行为，在
    • 【Spark九十四】spark-sql工具的使用 bit1129 spark
      spark-sql是Spark bin目录下的一个可执行脚本，它的目的是通过这个脚本执行Hive的命令，即原来通过 hive>输入的指令可以通过spark-sql>输入的指令来完成。 spark-sql可以使用内置的Hive metadata-store，也可以使用已经独立安装的Hive的metadata store   关于Hive build into Spark
    • js做的各种倒计时 ronin47 js 倒计时
      第一种：精确到秒的javascript倒计时代码      HTML代码:   <form name="form1">   <div align="center" align="middle"
    • java-37.有n 个长为m+1 的字符串，如果某个字符串的最后m 个字符与某个字符串的前m 个字符匹配，则两个字符串可以联接 bylijinnan java
      public class MaxCatenate { /* * Q.37 有n 个长为m+1 的字符串，如果某个字符串的最后m 个字符与某个字符串的前m 个字符匹配，则两个字符串可以联接， * 问这n 个字符串最多可以连成一个多长的字符串，如果出现循环，则返回错误。 */ public static void main(String[] args){
    • mongoDB安装 开窍的石头 mongodb安装 基本操作
      mongoDB的安装          1:mongoDB下载   https://www.mongodb.org/downloads         2:下载mongoDB下载后解压     
    • [开源项目]引擎的关键意义 comsci 开源项目
           一个系统，最核心的东西就是引擎。。。。。       而要设计和制造出引擎，最关键的是要坚持。。。。。。       现在最先进的引擎技术，也是从莱特兄弟那里出现的，但是中间一直没有断过研发的    
    • 软件度量的一些方法 cuiyadll 方法
      软件度量的一些方法http://cuiyingfeng.blog.51cto.com/43841/6775/在前面我们已介绍了组成软件度量的几个方面。在这里我们将先给出关于这几个方面的一个纲要介绍。在后面我们还会作进一步具体的阐述。当我们不从高层次的概念级来看软件度量及其目标的时候，我们很容易把这些活动看成是不同而且毫不相干的。我们现在希望表明他们是怎样恰如其分地嵌入我们的框架的。也就是我们度量的
    • XSD中的targetNameSpace解释 darrenzhu xmlnamespacexsdtargetnamespace
      参考链接: http://blog.csdn.net/colin1014/article/details/357694 xsd文件中定义了一个targetNameSpace后，其内部定义的元素，属性，类型等都属于该targetNameSpace,其自身或外部xsd文件使用这些元素，属性等都必须从定义的targetNameSpace中找： 例如：以下xsd文件，就出现了该错误，即便是在一
    • 什么是RAID0、RAID1、RAID0+1、RAID5，等磁盘阵列模式? dcj3sjt126com raid
      RAID 1又称为Mirror或Mirroring，它的宗旨是最大限度的保证用户数据的可用性和可修复性。 RAID 1的操作方式是把用户写入硬盘的数据百分之百地自动复制到另外一个硬盘上。由于对存储的数据进行百分之百的备份，在所有RAID级别中，RAID 1提供最高的数据安全保障。同样，由于数据的百分之百备份，备份数据占了总存储空间的一半，因而，Mirror的磁盘空间利用率低，存储成本高。 Mir
    • yii2 restful web服务快速入门 dcj3sjt126com PHPyii2
      快速入门 Yii 提供了一整套用来简化实现 RESTful 风格的 Web Service 服务的 API。 特别是，Yii 支持以下关于 RESTful 风格的 API： 支持 Active Record 类的通用API的快速原型 涉及的响应格式（在默认情况下支持 JSON 和 XML) 支持可选输出字段的定制对象序列化 适当的格式的数据采集和验证错误
    • MongoDB查询(3)——内嵌文档查询（七） eksliang MongoDB查询内嵌文档MongoDB查询内嵌数组
      MongoDB查询内嵌文档 转载请出自出处：http://eksliang.iteye.com/blog/2177301 一、概述        有两种方法可以查询内嵌文档：查询整个文档；针对键值对进行查询。这两种方式是不同的，下面我通过例子进行分别说明。   二、查询整个文档 例如:有如下文档 db.emp.insert({ &qu
    • android4.4从系统图库无法加载图片的问题 gundumw100 android
      典型的使用场景就是要设置一个头像，头像需要从系统图库或者拍照获得，在android4.4之前，我用的代码没问题，但是今天使用android4.4的时候突然发现不灵了。baidu了一圈，终于解决了。 下面是解决方案： private String[] items = new String[] { "图库","拍照" }; /* 头像名称 */
    • 网页特效大全 jQuery等 ini JavaScriptjquerycsshtml5ini
      HTML5和CSS3知识和特效 asp.net ajax jquery实例 分享一个下雪的特效 jQuery倾斜的动画导航菜单 选美大赛示例 你会选谁 jQuery实现HTML5时钟 功能强大的滚动播放插件JQ-Slide 万圣节快乐！！！ 向上弹出菜单jQuery插件 htm5视差动画 jquery将列表倒转顺序 推荐一个jQuery分页插件 jquery animate
    • swift objc_setAssociatedObject block(version1.2 xcode6.4) 啸笑天 version
        import UIKit class LSObjectWrapper: NSObject { let value: ((barButton: UIButton?) -> Void)? init(value: (barButton: UIButton?) -> Void) { self.value = value
    • Aegis 默认的 Xfire 绑定方式，将 XML 映射为 POJO MagicMa_007 javaPOJOxmlAegisxfire
            Aegis 是一个默认的 Xfire 绑定方式，它将 XML 映射为 POJO, 支持代码先行的开发.你开发服 务类与 POJO,它为你生成 XML schema/wsdl XML 和 注解映射概览       默认情况下，你的 POJO 类被是基于他们的名字与命名空间被序列化。如果
    • js get max value in (json) Array qiaolevip 每天进步一点点学习永无止境max纵观千象
      // Max value in Array var arr = [1,2,3,5,3,2];Math.max.apply(null, arr); // 5 // Max value in Jaon Array var arr = [{"x":"8/11/2009","y":0.026572007},{"x"
    • XMLhttpRequest 请求 XML,JSON ,POJO 数据 Luob. POJOjsonAjaxxmlXMLhttpREquest
      在使用XMlhttpRequest对象发送请求和响应之前，必须首先使用javaScript对象创建一个XMLHttpRquest对象。 var xmlhttp； function getXMLHttpRequest(){ if(window.ActiveXObject){ xmlhttp:new ActiveXObject("Microsoft.XMLHTTP
    • jquery wuai jquery
      以下防止文档在完全加载之前运行Jquery代码，否则会出现试图隐藏一个不存在的元素、获得未完全加载的图像的大小 等等 $(document).ready(function(){ jquery代码; }); <script type="text/javascript" src="c:/scripts/jquery-1.4.2.min.js&quo
    按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他