首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

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

Posted in HTML / CSS onNovember 06, 2015

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

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
CSS3 translate导致字体模糊的实例代码
Aug 30 HTML / CSS
css3圆角样式分享自定义按钮样式
Dec 27 HTML / CSS
实列教程 一款基于jquery和css3的响应式二级导航菜单
Nov 13 HTML / CSS
使用CSS3设计地图上的雷达定位提示效果
Apr 05 HTML / CSS
在HTML5 canvas里用卷积核进行图像处理的方法
May 02 HTML / CSS
基于 HTML5 Canvas实现 的交互式地铁线路图
Mar 05 HTML / CSS
用HTML5.0制作网页的教程
May 30 HTML / CSS
html5之Canvas路径绘图、坐标变换应用实例
Dec 26 HTML / CSS
HTML5页面音视频在微信和app下自动播放的实现方法
Oct 20 HTML / CSS
HTML5+CSS3：3D展示商品信息示例
Jan 03 HTML / CSS
canvas裁剪clip()函数的具体使用
Mar 01 HTML / CSS
HTML table 表格边框的实现思路
Oct 12 HTML / CSS
使用CSS3的::selection改变选中文本颜色的方法
Sep 29 #HTML / CSS
CSS3绘制圆角矩形的简单示例
Sep 28 #HTML / CSS
CSS3的resize属性使用初探
Sep 27 #HTML / CSS
基于html和CSS3制作酷炫的导航栏
Sep 23 #HTML / CSS
基于CSS3实现的黑色个性导航菜单效果
Sep 14 #HTML / CSS
基于CSS3实现的漂亮Menu菜单效果代码
Sep 10 #HTML / CSS
实例讲解使用CSS实现多边框和透明边框的方法
Sep 08 #HTML / CSS
分区(2) 静态压缩(1) 自动播放(1) 乱码(3) 信息校验(1) Excel(4) 正则表达式(3) Coroutine(1) greenlet(1) 驱动模型(1)
You might like
《Re：从零开始的异世界生活》剧情体验，手游新作定名
2020/04/09 日漫
一键删除顽固的空文件夹 软件下载
2007/01/26 PHP
CodeIgniter实现更改view文件夹路径的方法
2014/07/04 PHP
php实现可运算的验证码
2015/11/10 PHP
PHP Laravel 上传图片、文件等类封装
2017/08/16 PHP
Ajax+PHP实现的模拟进度条功能示例
2019/02/11 PHP
PHP获取远程http或ftp文件的md5值的方法
2019/04/15 PHP
PHP中Session ID的实现原理实例分析
2019/08/17 PHP
jQuery 源码分析笔记(5) jQuery.support
2011/06/19 Javascript
百度移动版的url编码解码示例
2014/04/29 Javascript
jquery实现网页的页面平滑滚动效果代码
2015/11/02 Javascript
jquery树形菜单效果的简单实例
2016/06/06 Javascript
elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)
2018/09/04 Javascript
JS基于对象的链表实现与使用方法示例
2019/01/31 Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
2019/04/23 Javascript
[02:37]2018DOTA2亚洲邀请赛赛前采访 VP.no[o]ne心中最强SOLO是谁
2018/04/04 DOTA
python实现下载文件的三种方法
2017/02/09 Python
简单实现python收发邮件功能
2018/01/05 Python
详解python读取和输出到txt
2019/03/29 Python
简单了解python反射机制的一些知识
2019/07/13 Python
对Pytorch神经网络初始化kaiming分布详解
2019/08/18 Python
Python 支持向量机分类器的实现
2020/01/15 Python
python正则表达式实例代码
2020/03/03 Python
Anaconda+VSCode配置tensorflow开发环境的教程详解
2020/03/30 Python
Python爬虫:Request Payload和Form Data的简单区别说明
2020/04/30 Python
open_basedir restriction in effect. 原因与解决方法
2021/03/14 PHP
康帕斯酒店预订：Compass Hospitality（支持中文）
2018/08/23 全球购物
幼儿园实习自我鉴定
2013/12/15 职场文书
《月光启蒙》教学反思
2014/03/01 职场文书
企业承诺书怎么写
2014/05/24 职场文书
个人自我剖析材料
2014/09/30 职场文书
2014年学习部工作总结
2014/11/12 职场文书
课外活动总结
2015/02/04 职场文书
Python 解决空列表.append() 输出为None的问题
2021/05/23 Python
Win10防火墙白名单怎么设置？Win10添加防火墙白名单方法
2022/04/06 数码科技
CSS实现鼠标悬浮动画特效
2023/05/07 HTML / CSS