纯HTML+CSS实现阿童木头像

他有十万马力,能上天能入地;他分辨善恶,是勇敢正义化身;1963年,他登上荧幕,在日本创下了未曾有过的高收视率……他叫阿童木,一...
     他有十万马力,能上天能入地;他分辨善恶,是勇敢正义化身;1963年,他登上荧幕,在日本创下了未曾有过的高收视率……他叫阿童木,一个纯真、善良、勇 敢的机器娃娃。“阿童木之父”手冢治虫曾说,将阿童木生日定在2003年4月7日。你的童年记忆中,有这个发型尖尖的少年吗?

  正好最近学习CSS3,就准备练练手,画一个阿童木的头像。实用性不是很大,主要为练习HTML+CSS,也是为了打发时间和磨练耐心。

  先上最终效果图:

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




  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.         .outer-circle {
  12.             position: absolute;
  13.             top: 32px;
  14.             left: 44px;
  15.             width: 289px;
  16.             height: 289px;
  17.             border: 4px solid #75BD4F;
  18.             -moz-border-radius: 50%;
  19.             -webkit-border-radius: 50%;
  20.             border-radius: 50%;
  21.         }

  22.         .inner-circle {
  23.             position: relative;
  24.             width: 269px;
  25.             height: 269px;
  26.             border: 10px solid #F5F910;
  27.             -moz-border-radius: 50%;
  28.             -webkit-border-radius: 50%;
  29.             border-radius: 50%;
  30.             background-color: #73BF43;
  31.         }

  32.         .inner-circle div {
  33.             position: absolute;
  34.         }

  35.         .inner-circle-light {
  36.             top: 41px;
  37.             left: 35px;
  38.             -moz-box-shadow: 26px 26px 29px 37px #fff;
  39.             -webkit-box-shadow: 26px 26px 29px 37px #fff;
  40.             box-shadow: 26px 26px 29px 37px #fff;
  41.         }

  42.         .header-top {
  43.             top: 11px;
  44.             right: 2px;
  45.             z-index: 100;
  46.             width: 180px;
  47.             height: 90px;
  48.             -moz-border-radius: 90px 90px 0 0;
  49.             -webkit-border-radius: 90px 90px 0 0;
  50.             border-radius: 90px 90px 0 0;
  51.             background-color: #000;
  52.             -moz-transform: rotate(32deg);
  53.             -ms-transform: rotate(32deg);
  54.             -o-transform: rotate(32deg);
  55.             -webkit-transform: rotate(32deg);
  56.             transform: rotate(32deg);
  57.         }

  58.         .header-left {
  59.             top: -20px;
  60.             left: 37px;
  61.             width: 114px;
  62.             height: 228px;
  63.             -moz-border-radius: 228px 0 0 228px;
  64.             -webkit-border-radius: 228px 0 0 228px;
  65.             border-radius: 228px 0 0 228px;
  66.             background-color: #000;
  67.             -moz-transform: rotate(26deg);
  68.             -ms-transform: rotate(26deg);
  69.             -o-transform: rotate(26deg);
  70.             -webkit-transform: rotate(26deg);
  71.             transform: rotate(26deg);
  72.         }

  73.         .hair-left-1 {
  74.             top: 15px;
  75.             left: 53px;
  76.             z-index: 55;
  77.             width: 85px;
  78.             height: 23px;
  79.             -webkit-border-top-left-radius: 30px 180px;
  80.             border-top-left-radius: 30px 180px;
  81.             -webkit-border-bottom-left-radius: 30px 80px;
  82.             border-bottom-left-radius: 30px 80px;
  83.             background-color: #000;
  84.             -moz-transform: rotate(-74deg) skew(-42deg, 23deg);
  85.             -ms-transform: rotate(-74deg) skew(-42deg, 23deg);
  86.             -o-transform: rotate(-74deg) skew(-42deg, 23deg);
  87.             -webkit-transform: rotate(-74deg) skew(-42deg, 23deg);
  88.             transform: rotate(-74deg) skew(-42deg, 23deg);
  89.         }

  90.         .hair-left-2 {
  91.             top: -20px;
  92.             left: 99px;
  93.             z-index: 60;
  94.             width: 49px;
  95.             height: 37px;
  96.             background-color: #000;
  97.             -moz-transform: rotate(-51deg) skew(-43deg, 0deg);
  98.             -ms-transform: rotate(-51deg) skew(-43deg, 0deg);
  99.             -o-transform: rotate(-51deg) skew(-43deg, 0deg);
  100.             -webkit-transform: rotate(-51deg) skew(-43deg, 0deg);
  101.             transform: rotate(-51deg) skew(-43deg, 0deg);
  102.         }

  103.         .hair-right-1 {
  104.             top: 70px;
  105.             right: 1px;
  106.             z-index: 60;
  107.             width: 81px;
  108.             height: 85px;
  109.             -webkit-border-top-right-radius: 26px 120px;
  110.             border-top-right-radius: 26px 120px;
  111.             background-color: black;
  112.             -moz-transform: rotate(1deg) skew(-51deg, 0deg);
  113.             -ms-transform: rotate(1deg) skew(-51deg, 0deg);
  114.             -o-transform: rotate(1deg) skew(-51deg, 0deg);
  115.             -webkit-transform: rotate(1deg) skew(-51deg, 0deg);
  116.             transform: rotate(1deg) skew(-51deg, 0deg);
  117.         }

  118.         .hair-right-2 {
  119.             width: 60px;
  120.             height: 10px;
  121.             -webkit-border-bottom-left-radius: 100%;
  122.             border-bottom-left-radius: 100%;
  123.             background-color: rgba(0,0,0,0.2);
  124.         }

  125.         .hair-light-1 {
  126.             top: 30px;
  127.             right: 45px;
  128.             z-index: 105;
  129.             width: 57px;
  130.             height: 17px;
  131.             -moz-border-radius: 100%;
  132.             -webkit-border-radius: 100%;
  133.             border-radius: 100%;
  134.             background-color: white;
  135.             -moz-transform: rotate(39deg);
  136.             -ms-transform: rotate(39deg);
  137.             -o-transform: rotate(39deg);
  138.             -webkit-transform: rotate(39deg);
  139.             transform: rotate(39deg);
  140.         }

  141.         .hair-light-1-over {
  142.             top: 32px;
  143.             right: 38px;
  144.             z-index: 105;
  145.             width: 83px;
  146.             height: 21px;
  147.             -moz-border-radius: 100%;
  148.             -webkit-border-radius: 100%;
  149.             border-radius: 100%;
  150.             background-color: black;
  151.             -moz-transform: rotate(41deg);
  152.             -ms-transform: rotate(41deg);
  153.             -o-transform: rotate(41deg);
  154.             -webkit-transform: rotate(41deg);
  155.             transform: rotate(41deg);
  156.         }

  157.         .hair-light-2 {
  158.             top: 16px;
  159.             right: 104px;
  160.             z-index: 105;
  161.             width: 4px;
  162.             height: 2px;
  163.             -moz-border-radius: 2px;
  164.             -webkit-border-radius: 2px;
  165.             border-radius: 2px;
  166.             background-color: white;
  167.             -moz-transform: rotate(10deg);
  168.             -ms-transform: rotate(10deg);
  169.             -o-transform: rotate(10deg);
  170.             -webkit-transform: rotate(10deg);
  171.             transform: rotate(10deg);
  172.         }

  173.         .ear {
  174.             top: 141px;
  175.             right: 36px;
  176.             z-index: 110;
  177.             width: 49px;
  178.             height: 48px;
  179.             border: 2px solid #000;
  180.             border-bottom-width: 1px;
  181.             -moz-border-radius: 50%;
  182.             -webkit-border-radius: 50%;
  183.             border-radius: 50%;
  184.             background-color: #F6C6B0;
  185.             -moz-box-shadow: -4px 0 0 0 #de9876 inset;
  186.             -webkit-box-shadow: -4px 0 0 0 #de9876 inset;
  187.             box-shadow: -4px 0 0 0 #de9876 inset;
  188.             -moz-transform: rotate(56deg) scaleY(1.4);
  189.             -ms-transform: rotate(56deg) scaleY(1.4);
  190.             -o-transform: rotate(56deg) scaleY(1.4);
  191.             -webkit-transform: rotate(56deg) scaleY(1.4);
  192.             transform: rotate(56deg) scaleY(1.4);
  193.         }

  194.         .ear-inner-1 {
  195.             top: 22px;
  196.             left: 22px;
  197.             z-index: 70;
  198.             width: 9px;
  199.             height: 5px;
  200.             border-top: 1px solid #110b00;
  201.             -moz-border-radius: 50%;
  202.             -webkit-border-radius: 50%;
  203.             border-radius: 50%;
  204.             -moz-transform: rotate(-6deg);
  205.             -ms-transform: rotate(-6deg);
  206.             -o-transform: rotate(-6deg);
  207.             -webkit-transform: rotate(-6deg);
  208.             transform: rotate(-6deg);
  209.         }

  210.         .ear-inner-2 {
  211.             top: 19px;
  212.             left: 18px;
  213.             width: 14px;
  214.             height: 7px;
  215.             border-top: 2px solid #110b00;
  216.             -moz-border-radius: 50%;
  217.             -webkit-border-radius: 50%;
  218.             border-radius: 50%;
  219.             -moz-box-shadow: 0px 2px 0 0 #de9876 inset;
  220.             -webkit-box-shadow: 0px 2px 0 0 #de9876 inset;
  221.             box-shadow: 0px 2px 0 0 #de9876 inset;
  222.             -moz-transform: rotate(-91deg);
  223.             -ms-transform: rotate(-91deg);
  224.             -o-transform: rotate(-91deg);
  225.             -webkit-transform: rotate(-91deg);
  226.             transform: rotate(-91deg);
  227.         }

  228.         .ear-light {
  229.             top: 21px;
  230.             right: 34px;
  231.             z-index: 105;
  232.             width: 17px;
  233.             height: 6px;
  234.             -moz-border-radius: 100%;
  235.             -webkit-border-radius: 100%;
  236.             border-radius: 100%;
  237.             background-color: #FFF;
  238.             -moz-transform: rotate(89deg);
  239.             -ms-transform: rotate(89deg);
  240.             -o-transform: rotate(89deg);
  241.             -webkit-transform: rotate(89deg);
  242.             transform: rotate(89deg);
  243.         }

  244.         .ear-over {
  245.             bottom: -44px;
  246.             left: -33px;
  247.             z-index: 55;
  248.             width: 69px;
  249.             height: 59px;
  250.             -moz-border-radius: 50%;
  251.             -webkit-border-radius: 50%;
  252.             border-radius: 50%;
  253.             background-color: #f6c6b0;
  254.             -moz-transform: rotate(26deg);
  255.             -ms-transform: rotate(26deg);
  256.             -o-transform: rotate(26deg);
  257.             -webkit-transform: rotate(26deg);
  258.             transform: rotate(26deg);
  259.         }

  260.         .face-main {
  261.             top: 30px;
  262.             left: 35px;
  263.             z-index: 50;
  264.             width: 180px;
  265.             height: 188px;
  266.             -moz-border-radius: 90px;
  267.             -webkit-border-radius: 90px;
  268.             border-radius: 90px;
  269.             background-color: #F6C6B0;
  270.             -moz-box-shadow: 3px -3px 0 0 #fff inset;
  271.             -webkit-box-shadow: 3px -3px 0 0 #fff inset;
  272.             box-shadow: 3px -3px 0 0 #fff inset;
  273.         }

  274.         .face-top {
  275.             top: 61px;
  276.             right: 75px;
  277.             z-index: 105;
  278.             width: 111px;
  279.             height: 46px;
  280.             -moz-border-radius: 50% 50% 26px 0;
  281.             -webkit-border-radius: 50% 50% 26px 0;
  282.             border-radius: 50% 50% 26px 0;
  283.             background-color: #f6c6b0;
  284.             -moz-transform: rotate(37deg);
  285.             -ms-transform: rotate(37deg);
  286.             -o-transform: rotate(37deg);
  287.             -webkit-transform: rotate(37deg);
  288.             transform: rotate(37deg);
  289.         }

  290.         .face-right-1 {
  291.             top: 115px;
  292.             right: 71px;
  293.             z-index: 105;
  294.             width: 68px;
  295.             height: 62px;
  296.             -moz-border-radius: 100% 0 0;
  297.             -webkit-border-radius: 100% 0 0;
  298.             border-radius: 100% 0 0;
  299.             background-color: #f6c6b0;
  300.             -moz-transform: rotate(99deg);
  301.             -ms-transform: rotate(99deg);
  302.             -o-transform: rotate(99deg);
  303.             -webkit-transform: rotate(99deg);
  304.             transform: rotate(99deg);
  305.         }

  306.         .face-bottom-1 {
  307.             bottom: 42px;
  308.             left: 45px;
  309.             z-index: 40;
  310.             width: 72px;
  311.             height: 52px;
  312.             -webkit-border-bottom-left-radius: 70px 40px;
  313.             -webkit-border-top-left-radius: 14px 11px;
  314.             border-top-left-radius: 14px 11px;
  315.             border-bottom-left-radius: 70px 40px;
  316.             background-color: #000;
  317.         }

  318.         .face-bottom-1-over {
  319.             bottom: 45px;
  320.             left: 48px;
  321.             z-index: 55;
  322.             width: 69px;
  323.             height: 47px;
  324.             -webkit-border-bottom-left-radius: 70px 40px;
  325.             -webkit-border-top-left-radius: 14px 11px;
  326.             border-top-left-radius: 14px 11px;
  327.             border-bottom-left-radius: 70px 40px;
  328.             background-color: #f6c6b0;
  329.             -moz-box-shadow: 3px 0px 0 0 #fff inset;
  330.             -webkit-box-shadow: 3px 0px 0 0 #fff inset;
  331.             box-shadow: 3px 0px 0 0 #fff inset;
  332.         }

  333.         .face-bottom-2 {
  334.             right: 97px;
  335.             bottom: 44px;
  336.             z-index: 55;
  337.             width: 43px;
  338.             height: 31px;
  339.             -webkit-border-bottom-right-radius: 70px 40px;
  340.             border-bottom-right-radius: 70px 40px;
  341.             background-color: #000;
  342.             -moz-transform: rotate(-4deg) skew(-49deg, 0deg);
  343.             -ms-transform: rotate(-4deg) skew(-49deg, 0deg);
  344.             -o-transform: rotate(-4deg) skew(-49deg, 0deg);
  345.             -webkit-transform: rotate(-4deg) skew(-49deg, 0deg);
  346.             transform: rotate(-4deg) skew(-49deg, 0deg);
  347.         }

  348.         .face-bottom-2-over {
  349.             right: 99px;
  350.             bottom: 46px;
  351.             z-index: 56;
  352.             width: 43px;
  353.             height: 31px;
  354.             -webkit-border-bottom-right-radius: 70px 40px;
  355.             border-bottom-right-radius: 70px 40px;
  356.             background-color: #f6c6b0;
  357.             -moz-box-shadow: -6px 2px 0 0 #de9876 inset;
  358.             -webkit-box-shadow: -6px 2px 0 0 #de9876 inset;
  359.             box-shadow: -6px 2px 0 0 #de9876 inset;
  360.             -moz-transform: rotate(-3deg) skew(-49deg, 0deg);
  361.             -ms-transform: rotate(-3deg) skew(-49deg, 0deg);
  362.             -o-transform: rotate(-3deg) skew(-49deg, 0deg);
  363.             -webkit-transform: rotate(-3deg) skew(-49deg, 0deg);
  364.             transform: rotate(-3deg) skew(-49deg, 0deg);
  365.         }

  366.         .face-light-1 {
  367.             right: 127px;
  368.             bottom: 95px;
  369.             z-index: 150;
  370.             width: 6px;
  371.             height: 6px;
  372.             -moz-border-radius: 50%;
  373.             -webkit-border-radius: 50%;
  374.             border-radius: 50%;
  375.             background-color: #fff;
  376.         }

  377.         .face-light-2 {
  378.             bottom: 82px;
  379.             left: 58px;
  380.             z-index: 150;
  381.             width: 4px;
  382.             height: 4px;
  383.             -moz-border-radius: 50%;
  384.             -webkit-border-radius: 50%;
  385.             border-radius: 50%;
  386.             background-color: #fff;
  387.         }

  388.         .chin {
  389.             bottom: 39px;
  390.             left: 111px;
  391.             z-index: 70;
  392.             width: 11px;
  393.             height: 12px;
  394.             border: 2px solid #000;
  395.             border-top-color: #f6c6b0;
  396.             border-left-color: #f6c6b0;
  397.             -webkit-border-bottom-right-radius: 6px;
  398.             border-bottom-right-radius: 6px;
  399.             background-color: #f6c6b0;
  400.             -moz-transform: rotate(34deg) skew(-9deg, 0deg);
  401.             -ms-transform: rotate(34deg) skew(-9deg, 0deg);
  402.             -o-transform: rotate(34deg) skew(-9deg, 0deg);
  403.             -webkit-transform: rotate(34deg) skew(-9deg, 0deg);
  404.             transform: rotate(34deg) skew(-9deg, 0deg);
  405.         }

  406.         .eye-right {
  407.             top: 97px;
  408.             left: 103px;
  409.             z-index: 110;
  410.             width: 39px;
  411.             height: 67px;
  412.             border: 1px solid #000;
  413.             border-top-width: 2px;
  414.             -moz-border-radius: 24px 43px 34px 28px / 34px 71px 34px 81px;
  415.             -webkit-border-radius: 24px 43px 34px 28px / 34px 71px 34px 81px;
  416.             border-radius: 24px 43px 34px 28px / 34px 71px 34px 81px;
  417.             background-color: #F8FAF7;
  418.             -moz-box-shadow: 0px 5px 0 0 #d5d9e2 inset;
  419.             -webkit-box-shadow: 0px 5px 0 0 #d5d9e2 inset;
  420.             box-shadow: 0px 5px 0 0 #d5d9e2 inset;
  421.         }

  422.         .eye-right-inner {
  423.             right: 0;
  424.             bottom: 3px;
  425.             z-index: 115;
  426.             width: 30px;
  427.             height: 52px;
  428.             -moz-border-radius: 32px 43px 28px 48px / 47px 55px 45px 75px;
  429.             -webkit-border-radius: 32px 43px 28px 48px / 47px 55px 45px 75px;
  430.             border-radius: 32px 43px 28px 48px / 47px 55px 45px 75px;
  431.             background-color: #000;
  432.         }

  433.         .eye-right-light1 {
  434.             top: 19px;
  435.             right: 0;
  436.             z-index: 120;
  437.             width: 19px;
  438.             height: 10px;
  439.             -moz-border-radius: 100%;
  440.             -webkit-border-radius: 100%;
  441.             border-radius: 100%;
  442.             background-color: #FFF;
  443.             -moz-animation: eye-flash 0.2s linear 0.1s infinite normal;
  444.             -o-animation: eye-flash 0.2s linear 0.1s infinite normal;
  445.             -webkit-animation: eye-flash 0.2s linear 0.1s infinite normal;
  446.             -moz-transform: rotate(41deg);
  447.             -ms-transform: rotate(41deg);
  448.             -o-transform: rotate(41deg);
  449.             -webkit-transform: rotate(41deg);
  450.             transform: rotate(41deg);
  451.             animation: eye-flash 0.2s linear 0.1s infinite normal;
  452.         }

  453.         @-webkit-keyframes eye-flash {
  454.             0% {
  455.                 top: 19px;
  456.             }

  457.             100% {
  458.                 top: 21px;
  459.             }
  460.         }

  461.         @-moz-keyframes eye-flash {
  462.             0% {
  463.                 top: 19px;
  464.             }

  465.             100% {
  466.                 top: 20px;
  467.             }
  468.         }

  469.         @-ms-keyframes eye-flash {
  470.             0% {
  471.                 top: 19px;
  472.             }

  473.             100% {
  474.                 top: 20px;
  475.             }
  476.         }

  477.         @keyframes eye-flash {
  478.             0% {
  479.                 top: 19px;
  480.             }

  481.             100% {
  482.                 top: 20px;
  483.             }
  484.         }

  485.         .eye-right-light2 {
  486.             bottom: 8px;
  487.             left: 9px;
  488.             z-index: 120;
  489.             width: 14px;
  490.             height: 7px;
  491.             -webkit-border-bottom-right-radius: 100%;
  492.             border-bottom-right-radius: 100%;
  493.             background-color: #FFF;
  494.             -moz-transform: rotate(-39deg);
  495.             -ms-transform: rotate(-39deg);
  496.             -o-transform: rotate(-39deg);
  497.             -webkit-transform: rotate(-39deg);
  498.             transform: rotate(-39deg);
  499.         }

  500.         .eye-right-eyelash1 {
  501.             top: 9px;
  502.             left: -3px;
  503.             width: 2px;
  504.             height: 4px;
  505.             background-color: #000;
  506.             -moz-transform: rotate(-54deg);
  507.             -ms-transform: rotate(-54deg);
  508.             -o-transform: rotate(-54deg);
  509.             -webkit-transform: rotate(-54deg);
  510.             transform: rotate(-54deg);
  511.         }

  512.         .eye-right-eyelash2 {
  513.             top: 1px;
  514.             left: 1px;
  515.             width: 2px;
  516.             height: 5px;
  517.             background-color: #000;
  518.             -moz-transform: rotate(-33deg);
  519.             -ms-transform: rotate(-33deg);
  520.             -o-transform: rotate(-33deg);
  521.             -webkit-transform: rotate(-33deg);
  522.             transform: rotate(-33deg);
  523.         }

  524.         .eye-right-eyelash3 {
  525.             top: -8px;
  526.             left: 8px;
  527.             width: 2px;
  528.             height: 7px;
  529.             background-color: #000;
  530.             -moz-transform: rotate(-21deg);
  531.             -ms-transform: rotate(-21deg);
  532.             -o-transform: rotate(-21deg);
  533.             -webkit-transform: rotate(-21deg);
  534.             transform: rotate(-21deg);
  535.         }

  536.         .eye-right-eyelash4 {
  537.             top: -6px;
  538.             left: 21px;
  539.             width: 2px;
  540.             height: 6px;
  541.             background-color: #000;
  542.             -moz-transform: rotate(11deg);
  543.             -ms-transform: rotate(11deg);
  544.             -o-transform: rotate(11deg);
  545.             -webkit-transform: rotate(11deg);
  546.             transform: rotate(11deg);
  547.         }

  548.         .eye-right-eyelash5 {
  549.             top: 1px;
  550.             right: 8px;
  551.             width: 2px;
  552.             height: 6px;
  553.             background-color: #000;
  554.             -moz-transform: rotate(14deg);
  555.             -ms-transform: rotate(14deg);
  556.             -o-transform: rotate(14deg);
  557.             -webkit-transform: rotate(14deg);
  558.             transform: rotate(14deg);
  559.         }

  560.         .eye-left {
  561.             top: 114px;
  562.             left: 45px;
  563.             z-index: 110;
  564.             width: 19px;
  565.             height: 63px;
  566.             border: 1px solid #000;
  567.             border-top-width: 2px;
  568.             -moz-border-radius: 29px 28px 33px / 97px 111px 40px 90px;
  569.             -webkit-border-radius: 29px 28px 33px / 97px 111px 40px 90px;
  570.             border-radius: 29px 28px 33px / 97px 111px 40px 90px;
  571.             background-color: #F8FAF7;
  572.             -moz-box-shadow: 0px 6px 0 0 #d5d9e2 inset;
  573.             -webkit-box-shadow: 0px 6px 0 0 #d5d9e2 inset;
  574.             box-sha