富贵资源网

使用HTML和CSS3绘制基本卡通图案的示例分享
站长资源 2024/11/2 佚名
36 1538
富贵资源网 Design By www.hznty.com

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

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

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

  

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

富贵资源网 Design By www.hznty.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
富贵资源网 Design By www.hznty.com
www.hznty.com 富贵资源网
20,135影音资源
44,641技术资源
2,817软件资源
435,032站长资源
一句话新闻
苹果官宣WWDC 2024！预计会有大批AI功能 - 2024/11/2

3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。

苹果官方表示：

在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。

探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。

Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

友情链接

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