行业资讯

怎么用HTML和CSS3绘制基本卡通图案

发布时间：2021-08-10 22:52:54 作者：chen
来源：亿速云 阅读：164

这篇文章主要讲解了“怎么用HTML和CSS3绘制基本卡通图案”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“怎么用HTML和CSS3绘制基本卡通图案”吧！

纯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-eyelash2 {    

  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-eyelash3 {    

  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-eyelash4 {    

  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-eyelash5 {    

  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-eyelash6 {    

  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-eyelash2 {    

  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-eyelash3 {    

  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-eyelash4 {    

  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-eyelash5 {    

  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-eyelash6 {    

  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-eyelash2"></div>    

  1092.                     <div class="eye-left-eyelash3"></div>    

  1093.                     <div class="eye-left-eyelash4"></div>    

  1094.                     <div class="eye-left-eyelash5"></div>    

  1095.                     <div class="eye-left-eyelash6"></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-eyelash2"></div>    

  1103.                     <div class="eye-right-eyelash3"></div>    

  1104.                     <div class="eye-right-eyelash4"></div>    

  1105.                     <div class="eye-right-eyelash5"></div>    

  1106.                     <div class="eye-right-eyelash6"></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: &ndash;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和CSS3绘制基本卡通图案这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！

推荐阅读：
  1. HTML5 学习手笔二：canvas API 绘制树形图案A
  2. html5使用canvas绘制“钟表”图案的方法

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。

css3 html

上一篇：CSS3中的opacity属性的用法

下一篇：css怎么实现鼠标滑过五角星高亮效果

相关阅读

您好，登录后才能下订单哦！

密码登录
登录注册
获取短信验证码
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》
产品服务
地区划分
帮助支持
关于我们
行业资讯-文章归档 问答-问答归档
广州亿速云计算有限公司

7*24小时在线电话：400-100-2938

7*24小时在线QQ：800811969

Copyright © Yisu Cloud Ltd. All Rights Reserved. 2018 版权所有
粤ICP备17096448号-1 粤公网安备 44010402001142号