首页 > 开发 > CSS > 正文

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

2024-07-11 08:29:40
字体：大 中 小
来源：转载
供稿：网友

纯HTML+CSS实现阿童木头像
先上最终效果图：
2015116112152118.png (400×400)

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

CSS Code复制内容到剪贴板
  1. <!DOCTYPE html>     <html xmlns="http://www.w3.org/1999/xhtml">    
  2. <head>         <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />    
  3.     <title>纯CSS漫画</title>         <style type="text/css">    
  4.         * {                 margin: 0;    
  5.             padding: 0;             }    
  6.              .outer-circle {    
  7.             position: absolute;                 top: 32px;    
  8.             left: 44px;                 width: 289px;    
  9.             height: 289px;                 border: 4px solid #75BD4F;    
  10.             -moz-border-radius: 50%;                 -webkit-border-radius: 50%;    
  11.             border-radius: 50%;             }    
  12.              .inner-circle {    
  13.             position: relative;                 width: 269px;    
  14.             height: 269px;                 border: 10px solid #F5F910;    
  15.             -moz-border-radius: 50%;                 -webkit-border-radius: 50%;    
  16.             border-radius: 50%;                 background-color: #73BF43;    
  17.         }         
  18.         .inner-circle div {                 position: absolute;    
  19.         }         
  20.         .inner-circle-light {                 top: 41px;    
  21.             left: 35px;                 -moz-box-shadow: 26px 26px 29px 37px #fff;    
  22.             -webkit-box-shadow: 26px 26px 29px 37px #fff;                 box-shadow: 26px 26px 29px 37px #fff;    
  23.         }         
  24.         .header-top {                 top: 11px;    
  25.             rightright: 2px;                 z-index: 100;    
  26.             width: 180px;                 height: 90px;    
  27.             -moz-border-radius: 90px 90px 0 0;                 -webkit-border-radius: 90px 90px 0 0;    
  28.             border-radius: 90px 90px 0 0;                 background-color: #000;    
  29.             -moz-transform: rotate(32deg);                 -ms-transform: rotate(32deg);    
  30.             -o-transform: rotate(32deg);                 -webkit-transform: rotate(32deg);    
  31.             transform: rotate(32deg);             }    
  32.              .header-left {    
  33.             top: -20px;                 left: 37px;    
  34.             width: 114px;                 height: 228px;    
  35.             -moz-border-radius: 228px 0 0 228px;                 -webkit-border-radius: 228px 0 0 228px;    
  36.             border-radius: 228px 0 0 228px;                 background-color: #000;    
  37.             -moz-transform: rotate(26deg);                 -ms-transform: rotate(26deg);    
  38.             -o-transform: rotate(26deg);                 -webkit-transform: rotate(26deg);    
  39.             transform: rotate(26deg);             }    
  40.              .hair-left-1 {    
  41.             top: 15px;                 left: 53px;    
  42.             z-index: 55;                 width: 85px;    
  43.             height: 23px;                 -webkit-border-top-left-radius: 30px 180px;    
  44.             border-top-left-radius: 30px 180px;                 -webkit-border-bottom-left-radius: 30px 80px;    
  45.             border-bottom-left-radius: 30px 80px;                 background-color: #000;    
  46.             -moz-transform: rotate(-74deg) skew(-42deg, 23deg);                 -ms-transform: rotate(-74deg) skew(-42deg, 23deg);    
  47.             -o-transform: rotate(-74deg) skew(-42deg, 23deg);                 -webkit-transform: rotate(-74deg) skew(-42deg, 23deg);    
  48.             transform: rotate(-74deg) skew(-42deg, 23deg);             }    
  49.              .hair-left-2 {    
  50.             top: -20px;                 left: 99px;    
  51.             z-index: 60;                 width: 49px;    
  52.             height: 37px;                 background-color: #000;    
  53.             -moz-transform: rotate(-51deg) skew(-43deg, 0deg);                 -ms-transform: rotate(-51deg) skew(-43deg, 0deg);    
  54.             -o-transform: rotate(-51deg) skew(-43deg, 0deg);                 -webkit-transform: rotate(-51deg) skew(-43deg, 0deg);    
  55.             transform: rotate(-51deg) skew(-43deg, 0deg);             }    
  56.              .hair-rightright-1 {    
  57.             top: 70px;                 rightright: 1px;    
  58.             z-index: 60;                 width: 81px;    
  59.             height: 85px;                 -webkit-border-top-rightright-radius: 26px 120px;    
  60.             border-top-rightright-radius: 26px 120px;                 background-color: black;    
  61.             -moz-transform: rotate(1deg) skew(-51deg, 0deg);                 -ms-transform: rotate(1deg) skew(-51deg, 0deg);    
  62.             -o-transform: rotate(1deg) skew(-51deg, 0deg);                 -webkit-transform: rotate(1deg) skew(-51deg, 0deg);    
  63.             transform: rotate(1deg) skew(-51deg, 0deg);             }    
  64.              .hair-rightright-2 {    
  65.             width: 60px;                 height: 10px;    
  66.             -webkit-border-bottom-left-radius: 100%;                 border-bottom-left-radius: 100%;    
  67.             background-color: rgba(0,0,0,0.2);             }    
  68.              .hair-light-1 {    
  69.             top: 30px;                 rightright: 45px;    
  70.             z-index: 105;                 width: 57px;    
  71.             height: 17px;                 -moz-border-radius: 100%;    
  72.             -webkit-border-radius: 100%;                 border-radius: 100%;    
  73.             background-color: white;                 -moz-transform: rotate(39deg);    
  74.             -ms-transform: rotate(39deg);                 -o-transform: rotate(39deg);    
  75.             -webkit-transform: rotate(39deg);                 transform: rotate(39deg);    
  76.         }         
  77.         .hair-light-1-over {                 top: 32px;    
  78.             rightright: 38px;                 z-index: 105;    
  79.             width: 83px;                 height: 21px;    
  80.             -moz-border-radius: 100%;                 -webkit-border-radius: 100%;    
  81.             border-radius: 100%;                 background-color: black;    
  82.             -moz-transform: rotate(41deg);                 -ms-transform: rotate(41deg);    
  83.             -o-transform: rotate(41deg);                 -webkit-transform: rotate(41deg);    
  84.             transform: rotate(41deg);             }    
  85.              .hair-light-2 {    
  86.             top: 16px;                 rightright: 104px;    
  87.             z-index: 105;                 width: 4px;    
  88.             height: 2px;                 -moz-border-radius: 2px;    
  89.             -webkit-border-radius: 2px;                 border-radius: 2px;    
  90.             background-color: white;                 -moz-transform: rotate(10deg);    
  91.             -ms-transform: rotate(10deg);                 -o-transform: rotate(10deg);    
  92.             -webkit-transform: rotate(10deg);                 transform: rotate(10deg);    
  93.         }         
  94.         .ear {                 top: 141px;    
  95.             rightright: 36px;                 z-index: 110;    
  96.             width: 49px;                 height: 48px;    
  97.             border: 2px solid #000;                 border-bottom-width: 1px;    
  98.             -moz-border-radius: 50%;                 -webkit-border-radius: 50%;    
  99.             border-radius: 50%;                 background-color: #F6C6B0;    
  100.             -moz-box-shadow: -4px 0 0 0 #de9876 inset;                 -webkit-box-shadow: -4px 0 0 0 #de9876 inset;    
  101.             box-shadow: -4px 0 0 0 #de9876 inset;                 -moz-transform: rotate(56deg) scaleY(1.4);    
  102.             -ms-transform: rotate(56deg) scaleY(1.4);                 -o-transform: rotate(56deg) scaleY(1.4);    
  103.             -webkit-transform: rotate(56deg) scaleY(1.4);                 transform: rotate(56deg) scaleY(1.4);    
  104.         }         
  105.         .ear-inner-1 {                 top: 22px;    
  106.             left: 22px;                 z-index: 70;    
  107.             width: 9px;                 height: 5px;    
  108.             border-top: 1px solid #110b00;                 -moz-border-radius: 50%;    
  109.             -webkit-border-radius: 50%;                 border-radius: 50%;    
  110.             -moz-transform: rotate(-6deg);                 -ms-transform: rotate(-6deg);    
  111.             -o-transform: rotate(-6deg);                 -webkit-transform: rotate(-6deg);    
  112.             transform: rotate(-6deg);             }    
  113.              .ear-inner-2 {    
  114.             top: 19px;                 left: 18px;    
  115.             width: 14px;                 height: 7px;    
  116.             border-top: 2px solid #110b00;                 -moz-border-radius: 50%;    
  117.             -webkit-border-radius: 50%;                 border-radius: 50%;    
  118.             -moz-box-shadow: 0px 2px 0 0 #de9876 inset;                 -webkit-box-shadow: 0px 2px 0 0 #de9876 inset;    
  119.             box-shadow: 0px 2px 0 0 #de9876 inset;                 -moz-transform: rotate(-91deg);    
  120.             -ms-transform: rotate(-91deg);                 -o-transform: rotate(-91deg);    
  121.             -webkit-transform: rotate(-91deg);                 transform: rotate(-91deg);    
  122.         }         
  123.         .ear-light {                 top: 21px;    
  124.             rightright: 34px;                 z-index: 105;    
  125.             width: 17px;                 height: 6px;    
  126.             -moz-border-radius: 100%;                 -webkit-border-radius: 100%;    
  127.             border-radius: 100%;                 background-color: #FFF;    
  128.             -moz-transform: rotate(89deg);                 -ms-transform: rotate(89deg);    
  129.             -o-transform: rotate(89deg);                 -webkit-transform: rotate(89deg);    
  130.             transform: rotate(89deg);             }    
  131.              .ear-over {    
  132.             bottombottom: -44px;                 left: -33px;    
  133.             z-index: 55;                 width: 69px;    
  134.             height: 59px;                 -moz-border-radius: 50%;    
  135.             -webkit-border-radius: 50%;                 border-radius: 50%;    
  136.             background-color: #f6c6b0;                 -moz-transform: rotate(26deg);    
  137.             -ms-transform: rotate(26deg);                 -o-transform: rotate(26deg);    
  138.             -webkit-transform: rotate(26deg);                 transform: rotate(26deg);    
  139.         }         
  140.         .face-main {                 top: 30px;    
  141.             left: 35px;                 z-index: 50;    
  142.             width: 180px;                 height: 188px;    
  143.             -moz-border-radius: 90px;                 -webkit-border-radius: 90px;    
  144.             border-radius: 90px;                 background-color: #F6C6B0;    
  145.             -moz-box-shadow: 3px -3px 0 0 #fff inset;                 -webkit-box-shadow: 3px -3px 0 0 #fff inset;    
  146.             box-shadow: 3px -3px 0 0 #fff inset;             }    
  147.              .face-top {    
  148.             top: 61px;                 rightright: 75px;    
  149.             z-index: 105;                 width: 111px;    
  150.             height: 46px;                 -moz-border-radius: 50% 50% 26px 0;    
  151.             -webkit-border-radius: 50% 50% 26px 0;                 border-radius: 50% 50% 26px 0;    
  152.             background-color: #f6c6b0;                 -moz-transform: rotate(37deg);    
  153.             -ms-transform: rotate(37deg);                 -o-transform: rotate(37deg);    
  154.             -webkit-transform: rotate(37deg);                 transform: rotate(37deg);    
  155.         }         
  156.         .face-rightright-1 {                 top: 115px;    
  157.             rightright: 71px;                 z-index: 105;    
  158.             width: 68px;                 height: 62px;    
  159.             -moz-border-radius: 100% 0 0;                 -webkit-border-radius: 100% 0 0;    
  160.             border-radius: 100% 0 0;                 background-color: #f6c6b0;    
  161.             -moz-transform: rotate(99deg);                 -ms-transform: rotate(99deg);    
  162.             -o-transform: rotate(99deg);                 -webkit-transform: rotate(99deg);    
  163.             transform: rotate(99deg);             }    
  164.              .face-bottombottom-1 {    
  165.             bottombottom: 42px;                 left: 45px;    
  166.             z-index: 40;                 width: 72px;    
  167.             height: 52px;                 -webkit-border-bottom-left-radius: 70px 40px;    
  168.             -webkit-border-top-left-radius: 14px 11px;                 border-top-left-radius: 14px 11px;    
  169.             border-bottom-left-radius: 70px 40px;                 background-color: #000;    
  170.         }         
  171.         .face-bottombottom-1-over {                 bottombottom: 45px;    
  172.             left: 48px;                 z-index: 55;    
  173.             width: 69px;                 height: 47px;    
  174.             -webkit-border-bottom-left-radius: 70px 40px;                 -webkit-border-top-left-radius: 14px 11px;    
  175.             border-top-left-radius: 14px 11px;                 border-bottom-left-radius: 70px 40px;    
  176.             background-color: #f6c6b0;                 -moz-box-shadow: 3px 0px 0 0 #fff inset;    
  177.             -webkit-box-shadow: 3px 0px 0 0 #fff inset;                 box-shadow: 3px 0px 0 0 #fff inset;    
  178.         }         
  179.         .face-bottombottom-2 {                 rightright: 97px;    
  180.             bottombottom: 44px;                 z-index: 55;    
  181.             width: 43px;                 height: 31px;    
  182.             -webkit-border-bottom-rightright-radius: 70px 40px;                 border-bottom-rightright-radius: 70px 40px;    
  183.             background-color: #000;                 -moz-transform: rotate(-4deg) skew(-49deg, 0deg);    
  184.             -ms-transform: rotate(-4deg) skew(-49deg, 0deg);                 -o-transform: rotate(-4deg) skew(-49deg, 0deg);    
  185.             -webkit-transform: rotate(-4deg) skew(-49deg, 0deg);                 transform: rotate(-4deg) skew(-49deg, 0deg);    
  186.         }         
  187.         .face-bottombottom-2-over {                 rightright: 99px;    
  188.             bottombottom: 46px;                 z-index: 56;    
  189.             width: 43px;                 height: 31px;    
  190.             -webkit-border-bottom-rightright-radius: 70px 40px;                 border-bottom-rightright-radius: 70px 40px;    
  191.             background-color: #f6c6b0;                 -moz-box-shadow: -6px 2px 0 0 #de9876 inset;    
  192.             -webkit-box-shadow: -6px 2px 0 0 #de9876 inset;                 box-shadow: -6px 2px 0 0 #de9876 inset;    
  193.             -moz-transform: rotate(-3deg) skew(-49deg, 0deg);                 -ms-transform: rotate(-3deg) skew(-49deg, 0deg);    
  194.             -o-transform: rotate(-3deg) skew(-49deg, 0deg);                 -webkit-transform: rotate(-3deg) skew(-49deg, 0deg);    
  195.             transform: rotate(-3deg) skew(-49deg, 0deg);             }    
  196.              .face-light-1 {    
  197.             rightright: 127px;                 bottombottom: 95px;    
  198.             z-index: 150;                 width: 6px;    
  199.             height: 6px;                 -moz-border-radius: 50%;    
  200.             -webkit-border-radius: 50%;                 border-radius: 50%;    
  201.             background-color: #fff;             }    
  202.              .face-light-2 {    
  203.             bottombottom: 82px;                 left: 58px;    
  204.             z-index: 150;                 width: 4px;    
  205.             height: 4px;                 -moz-border-radius: 50%;    
  206.             -webkit-border-radius: 50%;                 border-radius: 50%;    
  207.             background-color: #fff;             }    
  208.              .chin {    
  209.             bottombottom: 39px;                 left: 111px;    
  210.             z-index: 70;                 width: 11px;    
  211.             height: 12px;                 border: 2px solid #000;    
  212.             border-top-color: #f6c6b0;                 border-left-color: #f6c6b0;    
  213.             -webkit-border-bottom-rightright-radius: 6px;                 border-bottom-rightright-radius: 6px;    
  214.             background-color: #f6c6b0;                 -moz-transform: rotate(34deg) skew(-9deg, 0deg);    
  215.             -ms-transform: rotate(34deg) skew(-9deg, 0deg);                 -o-transform: rotate(34deg) skew(-9deg, 0deg);    
  216.             -webkit-transform: rotate(34deg) skew(-9deg, 0deg);                 transform: rotate(34deg) skew(-9deg, 0deg);    
  217.         }         
  218.         .eye-rightright {                 top: 97px;    
  219.             left: 103px;                 z-index: 110;    
  220.             width: 39px;                 height: 67px;    
  221.             border: 1px solid #000;                 border-top-width: 2px;    
  222.             -moz-border-radius: 24px 43px 34px 28px / 34px 71px 34px 81px;                 -webkit-border-radius: 24px 43px 34px 28px / 34px 71px 34px 81px;    
  223.             border-radius: 24px 43px 34px 28px / 34px 71px 34px 81px;                 background-color: #F8FAF7;    
  224.             -moz-box-shadow: 0px 5px 0 0 #d5d9e2 inset;                 -webkit-box-shadow: 0px 5px 0 0 #d5d9e2 inset;    
  225.             box-shadow: 0px 5px 0 0 #d5d9e2 inset;             }    
  226.              .eye-rightright-inner {    
  227.             rightright: 0;                 bottombottom: 3px;    
  228.             z-index: 115;                 width: 30px;    
  229.             height: 52px;                 -moz-border-radius: 32px 43px 28px 48px / 47px 55px 45px 75px;    
  230.             -webkit-border-radius: 32px 43px 28px 48px / 47px 55px 45px 75px;                 border-radius: 32px 43px 28px 48px / 47px 55px 45px 75px;    
  231.             background-color: #000;             }    
  232.              .eye-rightright-light1 {    
  233.             top: 19px;                 rightright: 0;    
  234.             z-index: 120;                 width: 19px;    
  235.             height: 10px;                 -moz-border-radius: 100%;    
  236.             -webkit-border-radius: 100%;                 border-radius: 100%;    
  237.             background-color: #FFF;                 -moz-animation: eye-flash 0.2s linear 0.1s infinite normal;    
  238.             -o-animation: eye-flash 0.2s linear 0.1s infinite normal;                 -webkit-animation: eye-flash 0.2s linear 0.1s infinite normal;    
  239.             -moz-transform: rotate(41deg);                 -ms-transform: rotate(41deg);    
  240.             -o-transform: rotate(41deg);                 -webkit-transform: rotate(41deg);    
  241.             transform: rotate(41deg);                 animation: eye-flash 0.2s linear 0.1s infinite normal;    
  242.         }         
  243.         @-webkit-keyframes eye-flash {                 0% {    
  244.                 top: 19px;                 }    
  245.                  100% {    
  246.                 top: 21px;                 }    
  247.         }         
  248.         @-moz-keyframes eye-flash {                 0% {    
  249.                 top: 19px;                 }    
  250.                  100% {    
  251.                 top: 20px;                 }    
  252.         }         
  253.         @-ms-keyframes eye-flash {                 0% {    
  254.                 top: 19px;                 }    
  255.                  100% {    
  256.                 top: 20px;                 }    
  257.         }         
  258.         @keyframes eye-flash {                 0% {    
  259.                 top: 19px;                 }    
  260.                  100% {    
  261.                 top: 20px;                 }    
  262.         }         
  263.         .eye-rightright-light2 {                 bottombottom: 8px;    
  264.             left: 9px;                 z-index: 120;    
  265.             width: 14px;                 height: 7px;    
  266.             -webkit-border-bottom-rightright-radius: 100%;                 border-bottom-rightright-radius: 100%;    
  267.             background-color: #FFF;                 -moz-transform: rotate(-39deg);    
  268.             -ms-transform: rotate(-39deg);                 -o-transform: rotate(-39deg);    
  269.             -webkit-transform: rotate(-39deg);                 transform: rotate(-39deg);    
  270.         }         
  271.         .eye-rightright-eyelash1 {                 top: 9px;    
  272.             left: -3px;                 width: 2px;    
  273.             height: 4px;                 background-color: #000;    
  274.             -moz-transform: rotate(-54deg);                 -ms-transform: rotate(-54deg);    
  275.             -o-transform: rotate(-54deg);                 -webkit-transform: rotate(-54deg);    
  276.             transform: rotate(-54deg);             }    
  277.              .eye-rightright-eyelash2 {    
  278.             top: 1px;                 left: 1px;    
  279.             width: 2px;                 height: 5px;    
  280.             background-color: #000;                 -moz-transform: rotate(-33deg);    
  281.             -ms-transform: rotate(-33deg);                 -o-transform: rotate(-33deg);    
  282.             -webkit-transform: rotate(-33deg);                 transform: rotate(-33deg);    
  283.         }         
  284.         .eye-rightright-eyelash3 {                 top: -8px;    
  285.             left: 8px;                 width: 2px;    
  286.             height: 7px;                 background-color: #000;    
  287.             -moz-transform: rotate(-21deg);                 -ms-transform: rotate(-21deg);    
  288.             -o-transform: rotate(-21deg);                 -webkit-transform: rotate(-21deg);    
  289.             transform: rotate(-21deg);             }    
  290.              .eye-rightright-eyelash4 {    
  291.             top: -6px;                 left: 21px;    
  292.             width: 2px;                 height: 6px;    
  293.             background-color: #000;                 -moz-transform: rotate(11deg);    
  294.             -ms-transform: rotate(11deg);                 -o-transform: rotate(11deg);    
  295.             -webkit-transform: rotate(11deg);                 transform: rotate(11deg);    
  296.         }         
  297.         .eye-rightright-eyelash5 {                 top: 1px;    
  298.             rightright: 8px;                 width: 2px;    
  299.             height: 6px;                 background-color: #000;    
  300.             -moz-transform: rotate(14deg);                 -ms-transform: rotate(14deg);    
  301.             -o-transform: rotate(14deg);                 -webkit-transform: rotate(14deg);    
  302.             transform: rotate(14deg);             }    
  303.              .eye-left {    
  304.             top: 114px;                 left: 45px;    
  305.             z-index: 110;                 width: 19px;    
  306.             height: 63px;                 border: 1px solid #000;    
  307.             border-top-width: 2px;                 -moz-border-radius: 29px 28px 33px / 97px 111px 40px 90px;    
  308.             -webkit-border-radius: 29px 28px 33px / 97px 111px 40px 90px;                 border-radius: 29px 28px 33px / 97px 111px 40px 90px;    
  309.             background-color: #F8FAF7;                 -moz-box-shadow: 0px 6px 0 0 #d5d9e2 inset;    
  310.             -webkit-box-shadow: 0px 6px 0 0 #d5d9e2 inset;                 box-shadow: 0px 6px 0 0 #d5d9e2 inset;    
  311.             -moz-transform: rotate(-9deg);                 -ms-transform: rotate(-9deg);    
  312.             -o-transform: rotate(-9deg);                 -webkit-transform: rotate(-9deg);    
  313.             transform: rotate(-9deg);             }    
  314.              .eye-left-inner {    
  315.             rightright: 0;                 bottombottom: 1px;    
  316.             z-index: 115;                 width: 15px;    
  317.             height: 46px;                 -moz-border-radius: 49px 44px 29px 58px / 143px 83px 45px 122px;    
  318.             -webkit-border-radius: 49px 44px 29px 58px / 143px 83px 45px 122px;                 border-radius: 49px 44px 29px 58px / 143px 83px 45px 122px;    
  319.             background-color: #000;             }    
  320.              .eye-left-light1 {    
  321.             top: 19px;                 rightright: 1px;    
  322.             z-index: 120;                 width: 7px;    
  323.             height: 18px;                 -moz-border-radius: 100%;    
  324.             -webkit-border-radius: 100%;                 border-radius: 100%;    
  325.             background-color: #FFF;                 -moz-animation: eye-flash 0.2s linear 0.1s infinite normal;    
  326.             -o-animation: eye-flash 0.2s linear 0.1s infinite normal;                 -webkit-animation: eye-flash 0.2s linear 0.1s infinite normal;    
  327.             -moz-transform: rotate(-9deg);                 -ms-transform: rotate(-9deg);    
  328.             -o-transform: rotate(-9deg);                 -webkit-transform: rotate(-9deg);    
  329.             transform: rotate(-9deg);                 animation: eye-flash 0.2s linear 0.1s infinite normal;    
  330.         }         
  331.         .eye-left-light2 {                 bottombottom: 6px;    
  332.             left: 4px;                 z-index: 120;    
  333.             width: 11px;                 height: 4px;    
  334.             -webkit-border-bottom-rightright-radius: 100%;                 border-bottom-rightright-radius: 100%;    
  335.             background-color: #FFF;                 -moz-transform: rotate(-45deg);    
  336.             -ms-transform: rotate(-45deg);                 -o-transform: rotate(-45deg);    
  337.             -webkit-transform: rotate(-45deg);                 transform: rotate(-45deg);    
  338.         }         
  339.         .eye-left-eyelash1 {                 top: 7px;    
  340.             left: -1px;                 width: 2px;    
  341.             height: 4px;                 background-color: #000;    
  342.             -moz-transform: rotate(-49deg);                 -ms-transform: rotate(-49deg);    
  343.             -o-transform: rotate(-49deg);                 -webkit-transform: rotate(-49deg);    
  344.             transform: rotate(-49deg);             }    
  345.              .eye-left-eyelash2 {    
  346.             top: -1px;                 left: 2px;    
  347.             width: 2px;                 height: 5px;    
  348.             background-color: #000;                 -moz-transform: rotate(-28deg);    
  349.             -ms-transform: rotate(-28deg);                 -o-transform: rotate(-28deg);    
  350.             -webkit-transform: rotate(-28deg);                 transform: rotate(-28deg);    
  351.         }         
  352.         .eye-left-eyelash3 {                 top: -6px;    
  353.             left: 7px;                 width: 2px;    
  354.             height: 5px;                 background-color: #000;    
  355.             -moz-transform: rotate(-4deg);                 -ms-transform: rotate(-4deg);    
  356.             -o-transform: rotate(-4deg);                 -webkit-transform: rotate(-4deg);    
  357.             transform: rotate(-4deg);             }    
  358.              .eye-left-eyelash4 {    
  359.             top: -4px;                 left: 13px;    
  360.             width: 2px;                 height: 4px;    
  361.             background-color: #000;                 -moz-transform: rotate(25deg);    
  362.             -ms-transform: rotate(25deg);                 -o-transform: rotate(25deg);    
  363.             -webkit-transform: rotate(25deg);                 transform: rotate(25deg);    
  364.         }         
  365.         .eye-left-eyelash5 {                 top: 3px;    
  366.             rightright: 0;                 width: 2px;    
  367.             height: 4px;                 background-color: #000;    
  368.             -moz-transform: rotate(41deg);                 -ms-transform: rotate(41deg);    
  369.             -o-transform: rotate(41deg);                 -webkit-transform: rotate(41deg);    
  370.             transform: rotate(41deg);             }    
  371.              .rightright-eyebrow {    
  372.             top: 68px;                 left: 92px;    
  373.             z-index: 110;                 width: 66px;    
  374.             height: 36px;                 border: 2px solid #000;    
  375.             border-width: 2px 1px 0px 1px;                 -moz-border-radius: 45px 51px 0 0;    
  376.             -webkit-border-radius: 45px 51px 0 0;                 border-radius: 45px 51px 0 0;    
  377.             background-color: transparent;                 -moz-transform: skew(-6deg, 16deg);    
  378.             -ms-transform: skew(-6deg, 16deg);                 -o-transform: skew(-6deg, 16deg);    
  379.             -webkit-transform: skew(-6deg, 16deg);                 transform: skew(-6deg, 16deg);    
  380.         }         
  381.         .rightright-eyebrow-over {                 top: 21px;    
  382.             rightright: -5px;                 z-index: 115;    
  383.             width: 13px;                 height: 20px;    
  384.             background-color: #f6c6b0;             }    
  385.              .left-eyebrow {    
  386.             top: 89px;                 left: 36px;    
  387.             z-index: 100;                 width: 30px;    
  388.             height: 68px;                 border: 2px solid #000;    
  389.             border-width: 2px 1px 0px 1px;                 -moz-border-radius: 100%;    
  390.             -webkit-border-radius: 100%;                 border-radius: 100%;    
  391.             background-color: transparent;                 -moz-transform: rotate(-2deg);    
  392.             -ms-transform: rotate(-2deg);                 -o-transform: rotate(-2deg);    
  393.             -webkit-transform: rotate(-2deg);                 transform: rotate(-2deg);    
  394.         }         
  395.         .left-eyebrow-over {                 top: 17px;    
  396.             rightright: -9px;                 z-index: 105;    
  397.             width: 39px;                 height: 55px;    
  398.             -moz-border-radius: 21px 12px 0 17px;                 -webkit-border-radius: 21px 12px 0 17px;    
  399.             border-radius: 21px 12px 0 17px;                 background-color: #f6c6b0;    
  400.             -moz-transform: rotate(-13deg);                 -ms-transform: rotate(-13deg);    
  401.             -o-transform: rotate(-13deg);                 -webkit-transform: rotate(-13deg);    
  402.             transform: rotate(-13deg);             }    
  403.              .nose {    
  404.             top: 172px;                 left: 63px;    
  405.             z-index: 115;                 width: 21px;    
  406.             height: 16px;                 border: 2px solid #000;    
  407.             -moz-border-radius: 50%;                 -webkit-border-radius: 50%;    
  408.             border-radius: 50%;                 -moz-box-shadow: 3px 1px 0 0 #fff inset;    
  409.             -webkit-box-shadow: 3px 1px 0 0 #fff inset;                 box-shadow: 3px 1px 0 0 #fff inset;    
  410.         }         
  411.         .nose-over {                 top: -1px;    
  412.             rightright: -11px;                 z-index: 115;    
  413.             width: 19px;                 height: 14px;    
  414.             background-color: #f6c6b0;                 -moz-transform: rotate(31deg);    
  415.             -ms-transform: rotate(31deg);                 -o-transform: rotate(31deg);    
  416.             -webkit-transform: rotate(31deg);                 transform: rotate(31deg);    
  417.         }         
  418.         .nose-tip {                 top: -7px;    
  419.             left: 13px;                 width: 2px;    
  420.             height: 6px;                 background-color: #000;    
  421.             -moz-transform: rotate(14deg);                 -ms-transform: rotate(14deg);    
  422.             -o-transform: rotate(14deg);                 -webkit-transform: rotate(14deg);    
  423.             transform: rotate(14deg);             }    
  424.              .mouth {    
  425.             bottombottom: 61px;                 left: 72px;    
  426.             z-index: 110;                 width: 46px;    
  427.             height: 47px;                 border: 2px solid #000;    
  428.             border-width: 0 1px 2px 0;                 -moz-border-radius: 32px 29px 23px 48px / 47px 82px 52px 75px;    
  429.             -webkit-border-radius: 32px 29px 23px 48px / 47px 82px 52px 75px;                 border-radius: 32px 29px 23px 48px / 47px 82px 52px 75px;    
  430.             background-color: #92222E;                 -moz-transform: rotate(1deg) skew(0deg, 39deg);    
  431.             -ms-transform: rotate(1deg) skew(0deg, 39deg);                 -o-transform: rotate(1deg) skew(0deg, 39deg);    
  432.             -webkit-transform: rotate(1deg) skew(0deg, 39deg);                 transform: rotate(1deg) skew(0deg, 39deg);    
  433.         }         
  434.         .mouth-over-1 {                 bottombottom: 0;    
  435.             left: -4px;                 z-index: 115;    
  436.             width: 37px;                 height: 58px;    
  437.             border-right: 1px solid #000;                 -moz-border-radius: 38px 13px 10px 77px / 47px 82px 52px 73px;    
  438.             -webkit-border-radius: 38px 13px 10px 77px / 47px 82px 52px 73px;                 border-radius: 38px 13px 10px 77px / 47px 82px 52px 73px;    
  439.             background-color: #f6c6b0;                 -moz-transform: rotate(38deg) skew(0deg, 6deg);    
  440.             -ms-transform: rotate(38deg) skew(0deg, 6deg);                 -o-transform: rotate(38deg) skew(0deg, 6deg);    
  441.             -webkit-transform: rotate(38deg) skew(0deg, 6deg);                 transform: rotate(38deg) skew(0deg, 6deg);    
  442.         }         
  443.         .mouth-over-2 {                 bottombottom: 38px;    
  444.             left: 30px;                 z-index: 150;    
  445.             width: 7px;                 height: 19px;    
  446.             background-color: #f6c6b0;                 -moz-transform: rotate(-233deg);    
  447.             -ms-transform: rotate(-233deg);                 -o-transform: rotate(-233deg);    
  448.             -webkit-transform: rotate(-233deg);                 transform: rotate(-233deg);    
  449.         }         
  450.         .mouth-over-3 {                 bottombottom: -9px;    
  451.             left: 11px;                 z-index: 115;    
  452.             width: 27px;                 height: 9px;    
  453.             border-top: 2px solid #000;                 -moz-border-radius: 100%;    
  454.             -webkit-border-radius: 100%;                 border-radius: 100%;    
  455.             background-color: #f6c6b0;                 -moz-transform: rotate(-4deg);    
  456.             -ms-transform: rotate(-4deg);                 -o-transform: rotate(-4deg);    
  457.             -webkit-transform: rotate(-4deg);                 transform: rotate(-4deg);    
  458.         }         
  459.         .mouth-over-4 {                 bottombottom: -6px;    
  460.             left: -1px;                 z-index: 150;    
  461.             width: 7px;                 height: 15px;    
  462.             background-color: #f6c6b0;                 -moz-transform: rotate(-226deg);    
  463.             -ms-transform: rotate(-226deg);                 -o-transform: rotate(-226deg);    
  464.             -webkit-transform: rotate(-226deg);                 transform: rotate(-226deg);    
  465.         }         
  466.         .mouth-tip {                 bottombottom: 39px;    
  467.             left: 41px;                 z-index: 120;    
  468.             width: 2px;                 height: 3px;    
  469.             background-color: #000;                 -moz-transform: rotate(-51deg);    
  470.             -ms-transform: rotate(-51deg);                 -o-transform: rotate(-51deg);    
  471.             -webkit-transform: rotate(-51deg);                 transform: rotate(-51deg);    
  472.         }         
  473.         .mouth-inner {                 bottombottom: 50px;    
  474.             left: 107px;                 z-index: 115;    
  475.             width: 10px;                 height: 18px;    
  476.             -moz-border-radius: 10px 0 4px 6px / 8px 2px 8px 9px;                 -webkit-border-radius: 10px 0 4px 6px / 8px 2px 8px 9px;    
  477.             border-radius: 10px 0 4px 6px / 8px 2px 8px 9px;                 background-color: #ed675c;    
  478.             -moz-transform: rotate(6deg);                 -ms-transform: rotate(6deg);    
  479.             -o-transform: rotate(6deg);                 -webkit-transform: rotate(6deg);    
  480.             transform: rotate(6deg);             }    
  481.              .name-lable {    
  482.             bottombottom: -9px;                 left: -8px;    
  483.             z-index: 150;                 width: 280px;    
  484.             color: #005aa9;                 text-align: center;    
  485.             font-weight: bold;                 font-style: italic;    
  486.             font-size: 50px;                 font-family: Times New Roman;    
  487.         }         
  488.         .name-lable-light {                 top: 30px;    
  489.             width: 100%;                 height: 0;    
  490.             -moz-box-shadow: 0 0 3px 3px #fff;                 -webkit-box-shadow: 0 0 3px 3px #fff;    
  491.             box-shadow: 0 0 3px 3px #fff;             }    
  492.              @-webkit-keyframes input-flash {    
  493.             0% {                     border-color: #ccc;    
  494.                 -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);                     -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);    
  495.                 box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);                 }    
  496.                  100% {    
  497.                 border-color: rgba(82,168,236,0.8);                     -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6);    
  498.                 -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6);                     box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6);    
  499.             }             }    
  500.              @-moz-keyframes input-flash {    
  501.             0% {                     border-color: #ccc;    
  502.                 -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);                     -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);    
  503.                 box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);                 }    
  504.                  100% {    
  505.                 border-color: rgba(82,168,236,0.8);                     -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6);    
  506.                 -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6);                     box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6);    
  507.             }             }    
  508.              @-ms-keyframes input-flash {    
  509.             0% {                     border-color: #ccc;    
  510.                 -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);                     -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);    
  511.                 box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);                 }    
  512.                  100% {    
  513.                 border-color: rgba(82,168,236,0.8);                     -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6);    
  514.                 -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6);                     box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6);    
  515.             }             }    
  516.              @keyframes input-flash {    
  517.             0% {                     border-color: #ccc;    
  518.                 -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);                     -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);    
  519.                 box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);                 }    
  520.                  100% {    
  521.                 border-color: rgba(82,168,236,0.8);                     -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6);    
  522.                 -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6);                     box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6);    
  523.             }             }    
  524.     </style>     </head>    
  525. <body>         <div style="width: 400px; height: 359px; position: relative; margin: 50px auto;">    
  526.         <div class="outer-circle">                 <!--外圆-->    
  527.             <div class="inner-circle">                     <!--内圆-->    
  528.                 <div class="inner-circle-light"></div>                     <div class="header-top"></div>    
  529.                 <!--头发-->                     <div class="hair-left-1"></div>    
  530.                 <div class="hair-left-2"></div>                     <div class="hair-light-1"></div>    
  531.                 <div class="hair-light-1-over"></div>                     <div class="hair-light-2"></div>    
  532.                 <div class="hair-right-1">                         <div class="hair-right-2">    
  533.                     </div>                     </div>    
  534.                 <div class="header-left"></div>                     <!--脸部-->    
  535.                 <div class="face-main"></div>                     <div class="face-light-1"></div>    
  536.                 <div class="face-light-2"></div>                     <div class="face-top"></div>    
  537.                 <div class="face-right-1"></div>                     <div class="face-bottom-1"></div>    
  538.                 <div class="face-bottom-1-over"></div>                     <div class="face-bottom-2"></div>    
  539.                 <div class="face-bottom-2-over"></div>                     <div class="chin"></div>    
  540.                 <div class="ear">                         <!--耳朵-->    
  541.                     <div class="ear-inner-1"></div>                         <div class="ear-inner-2"></div>    
  542.                     <div class="ear-over"></div>                         <div class="ear-light"></div>    
  543.                 </div>                     <div class="eye-left">    
  544.                     <!--左眼-->                         <div class="eye-left-inner"></div>    
  545.                     <div class="eye-left-light1"></div>                         <div class="eye-left-light2"></div>    
  546.                     <div class="eye-left-eyelash1"></div>                         <div class="eye-left-eyelash2"></div>    
  547.                     <div class="eye-left-eyelash3"></div>                         <div class="eye-left-eyelash4"></div>    
  548.                     <div class="eye-left-eyelash5"></div>                     </div>    
  549.                 <div class="eye-right">                         <!--右眼-->    
  550.                     <div class="eye-right-inner"></div>                         <div class="eye-right-light1"></div>    
  551.                     <div class="eye-right-light2"></div>                         <div class="eye-right-eyelash1"></div>    
  552.                     <div class="eye-right-eyelash2"></div>                         <div class="eye-right-eyelash3"></div>    
  553.                     <div class="eye-right-eyelash4"></div>                         <div class="eye-right-eyelash5"></div>    
  554.                 </div>                     <div class="right-eyebrow">    
  555.                     <!--右眼眉毛-->                         <div class="right-eyebrow-over"></div>    
  556.                 </div>                     <div class="left-eyebrow">    
  557.                     <!--左眼眉毛-->                         <div class="left-eyebrow-over"></div>    
  558.                 </div>                     <div class="nose">    
  559.                     <!--鼻子-->                         <div class="nose-tip"></div>    
  560.                     <div class="nose-over"></div>                     </div>    
  561.                 <div class="mouth">                         <!--嘴巴-->    
  562.                     <div class="mouth-over-1"></div>                         <div class="mouth-over-2"></div>    
  563.                     <div class="mouth-over-3"></div>                         <div class="mouth-over-4"></div>    
  564.                     <div class="mouth-tip"></div>                     </div>    
  565.                 <div class="mouth-inner"></div>                     <div class="name-lable">    
  566.                     ASTRO BOY                         <div class="name-lable-light"></div>    
  567.                 </div>                 </div>    
  568.         </div>         </div>    
  569. </body>     </html>    

上一篇：CSS实现自动变为大写的自适应漂亮菜单效果

下一篇：浅谈CSS中overflow清除浮动的用法

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
学习交流
更多

如何查找有故障的配件

如何查找有故障的配件...
热门图片
更多
猜你喜欢的新闻
猜你喜欢的关注

新闻热点

最牛同桌！我考了696分我同桌考了703分
2024-06-26 22:28:41
650分！高二女生考入北大：遗憾不能上高三
2024-06-26 22:26:16
男生估分600只考了397 妈妈：高考虽重要，但不代表所有
2024-06-26 22:23:01
唐尚珺回应是否会直播带货：有人出100万想和他合作！
2024-06-25 19:29:23
名校抢人名场面：清华、北大太拼了！
2024-06-25 19:22:14
男生高考语文满分！网友：第一次听说
2024-06-25 19:19:15

疑难解答

图片精选

网友关注

关于本站 - 网上投稿 - 商务合作 - 隐私政策 - 网站地图
Copyright © 2008 - 2024 VEVB.COM. All Rights Reserved.武林网 版权所有