欢迎访问 licqi IT技术
我们一直在努力

纯HTML+CSS实现阿童木头像

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

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

先上最终效果图:

纯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.             margin0
  9.             padding0
  10.         } 
  11.  
  12.         .outer-circle { 
  13.             positionabsolute
  14.             top: 32px
  15.             left: 44px
  16.             width289px
  17.             height289px
  18.             border4px solid #75BD4F
  19.             -moz-border-radius: 50%
  20.             -webkit-border-radius: 50%
  21.             border-radius: 50%
  22.         } 
  23.  
  24.         .inner-circle { 
  25.             positionrelative
  26.             width269px
  27.             height269px
  28.             border10px 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.             positionabsolute
  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.             right: 2px
  50.             z-index100
  51.             width180px
  52.             height90px
  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.             width114px
  68.             height228px
  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-index55
  84.             width85px
  85.             height23px
  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-index60
  102.             width49px
  103.             height37px
  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-right-1 { 
  113.             top: 70px
  114.             right: 1px
  115.             z-index60
  116.             width81px
  117.             height85px
  118.             -webkit-border-top-right-radius: 26px 120px
  119.             border-top-right-radius: 26px 120px
  120.             background-colorblack
  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-right-2 { 
  129.             width60px
  130.             height10px
  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.             right: 45px
  139.             z-index105
  140.             width57px
  141.             height17px
  142.             -moz-border-radius: 100%
  143.             -webkit-border-radius: 100%
  144.             border-radius: 100%
  145.             background-colorwhite
  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.             right: 38px
  156.             z-index105
  157.             width83px
  158.             height21px
  159.             -moz-border-radius: 100%
  160.             -webkit-border-radius: 100%
  161.             border-radius: 100%
  162.             background-colorblack
  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.             right: 104px
  173.             z-index105
  174.             width4px
  175.             height2px
  176.             -moz-border-radius: 2px
  177.             -webkit-border-radius: 2px
  178.             border-radius: 2px
  179.             background-colorwhite
  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.             right: 36px
  190.             z-index110
  191.             width49px
  192.             height48px
  193.             border2px solid #000
  194.             border-bottom-width1px
  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-index70
  213.             width9px
  214.             height5px
  215.             border-top1px 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.             width14px
  230.             height7px
  231.             border-top2px 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.             right: 34px
  248.             z-index105
  249.             width17px
  250.             height6px
  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.             bottom: -44px
  264.             left: -33px
  265.             z-index55
  266.             width69px
  267.             height59px
  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-index50
  283.             width180px
  284.             height188px
  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.             right: 75px
  297.             z-index105
  298.             width111px
  299.             height46px
  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-right-1 { 
  312.             top: 115px
  313.             right: 71px
  314.             z-index105
  315.             width68px
  316.             height62px
  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-bottom-1 { 
  329.             bottom: 42px
  330.             left: 45px
  331.             z-index40
  332.             width72px
  333.             height52px
  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-bottom-1-over { 
  342.             bottom: 45px
  343.             left: 48px
  344.             z-index55
  345.             width69px
  346.             height47px
  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-bottom-2 { 
  358.             right: 97px
  359.             bottom: 44px
  360.             z-index55
  361.             width43px
  362.             height31px
  363.             -webkit-border-bottom-right-radius: 70px 40px
  364.             border-bottom-right-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-bottom-2-over { 
  374.             right: 99px
  375.             bottom: 46px
  376.             z-index56
  377.             width43px
  378.             height31px
  379.             -webkit-border-bottom-right-radius: 70px 40px
  380.             border-bottom-right-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.             right: 127px
  394.             bottom: 95px
  395.             z-index150
  396.             width6px
  397.             height6px
  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.             bottom: 82px
  406.             left: 58px
  407.             z-index150
  408.             width4px
  409.             height4px
  410.             -moz-border-radius: 50%
  411.             -webkit-border-radius: 50%
  412.             border-radius: 50%
  413.             background-color#fff
  414.         } 
  415.  
  416.         .chin { 
  417.             bottom: 39px
  418.             left: 111px
  419.             z-index70
  420.             width11px
  421.             height12px
  422.             border2px solid #000
  423.             border-top-color#f6c6b0
  424.             border-left-color#f6c6b0
  425.             -webkit-border-bottom-right-radius: 6px
  426.             border-bottom-right-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-right { 
  436.             top: 97px
  437.             left: 103px
  438.             z-index110
  439.             width39px
  440.             height67px
  441.             border1px solid #000
  442.             border-top-width2px
  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-right-inner { 
  453.             right: 0
  454.             bottom: 3px
  455.             z-index115
  456.             width30px
  457.             height52px
  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-right-light1 { 
  465.             top: 19px
  466.             right: 0
  467.             z-index120
  468.             width19px
  469.             height10px
  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-right-light2 { 
  526.             bottom: 8px
  527.             left: 9px
  528.             z-index120
  529.             width14px
  530.             height7px
  531.             -webkit-border-bottom-right-radius: 100%
  532.             border-bottom-right-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-right-eyelash1 { 
  542.             top: 9px
  543.             left: -3px
  544.             width2px
  545.             height4px
  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-right-eyelash2 { 
  555.             top: 1px
  556.             left: 1px
  557.             width2px
  558.             height5px
  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-right-eyelash3 { 
  568.             top: -8px
  569.             left: 8px
  570.             width2px
  571.             height7px
  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-right-eyelash4 { 
  581.             top: -6px
  582.             left: 21px
  583.             width2px
  584.             height6px
  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-right-eyelash5 { 
  594.             top: 1px
  595.             right: 8px
  596.             width2px
  597.             height6px
  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-index110
  610.             width19px
  611.             height63px
  612.             border1px solid #000
  613.             border-top-width2px
  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.             right: 0
  630.             bottom: 1px
  631.             z-index115
  632.             width15px
  633.             height46px
  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.             right: 1px
  643.             z-index120
  644.             width7px
  645.             height18px
  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.             bottom: 6px
  663.             left: 4px
  664.             z-index120
  665.             width11px
  666.             height4px
  667.             -webkit-border-bottom-right-radius: 100%
  668.             border-bottom-right-radius: 100%
  669.             background-color#FFF
  670.             -moz-transform: rotate(-45deg); 
  671.             -ms-transform: rotate(-45deg); 
  672.             -o-transform: rotate(-45deg); 
  673.             -webkit-transform: rotate(-45deg); 
  674.             transform: rotate(-45deg); 
  675.         } 
  676.  
  677.         .eye-left-eyelash1 { 
  678.             top: 7px
  679.             left: -1px
  680.             width2px
  681.             height4px
  682.             background-color#000
  683.             -moz-transform: rotate(-49deg); 
  684.             -ms-transform: rotate(-49deg); 
  685.             -o-transform: rotate(-49deg); 
  686.             -webkit-transform: rotate(-49deg); 
  687.             transform: rotate(-49deg); 
  688.         } 
  689.  
  690.         .eye-left-eyelash2 { 
  691.             top: -1px
  692.             left: 2px
  693.             width2px
  694.             height5px
  695.             background-color#000
  696.             -moz-transform: rotate(-28deg); 
  697.             -ms-transform: rotate(-28deg); 
  698.             -o-transform: rotate(-28deg); 
  699.             -webkit-transform: rotate(-28deg); 
  700.             transform: rotate(-28deg); 
  701.         } 
  702.  
  703.         .eye-left-eyelash3 { 
  704.             top: -6px
  705.             left: 7px
  706.             width2px
  707.             height5px
  708.             background-color#000
  709.             -moz-transform: rotate(-4deg); 
  710.             -ms-transform: rotate(-4deg); 
  711.             -o-transform: rotate(-4deg); 
  712.             -webkit-transform: rotate(-4deg); 
  713.             transform: rotate(-4deg); 
  714.         } 
  715.  
  716.         .eye-left-eyelash4 { 
  717.             top: -4px
  718.             left: 13px
  719.             width2px
  720.             height4px
  721.             background-color#000
  722.             -moz-transform: rotate(25deg); 
  723.             -ms-transform: rotate(25deg); 
  724.             -o-transform: rotate(25deg); 
  725.             -webkit-transform: rotate(25deg); 
  726.             transform: rotate(25deg); 
  727.         } 
  728.  
  729.         .eye-left-eyelash5 { 
  730.             top: 3px
  731.             right: 0
  732.             width2px
  733.             height4px
  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.         .right-eyebrow { 
  743.             top: 68px
  744.             left: 92px
  745.             z-index110
  746.             width66px
  747.             height36px
  748.             border2px solid #000
  749.             border-width2px 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-colortransparent
  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.         .right-eyebrow-over { 
  762.             top: 21px
  763.             right: -5px
  764.             z-index115
  765.             width13px
  766.             height20px
  767.             background-color#f6c6b0
  768.         } 
  769.  
  770.         .left-eyebrow { 
  771.             top: 89px
  772.             left: 36px
  773.             z-index100
  774.             width30px
  775.             height68px
  776.             border2px solid #000
  777.             border-width2px 1px 0px 1px
  778.             -moz-border-radius: 100%
  779.             -webkit-border-radius: 100%
  780.             border-radius: 100%
  781.             background-colortransparent
  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.             right: -9px
  792.             z-index105
  793.             width39px
  794.             height55px
  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-index115
  810.             width21px
  811.             height16px
  812.             border2px 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.             right: -11px
  824.             z-index115
  825.             width19px
  826.             height14px
  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.             width2px
  839.             height6px
  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.             bottom: 61px
  850.             left: 72px
  851.             z-index110
  852.             width46px
  853.             height47px
  854.             border2px solid #000
  855.             border-width0 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.             bottom: 0
  869.             left: -4px
  870.             z-index115
  871.             width37px
  872.             height58px
  873.             border-right1px 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.             bottom: 38px
  887.             left: 30px
  888.             z-index150
  889.             width7px
  890.             height19px
  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.             bottom: -9px
  901.             left: 11px
  902.             z-index115
  903.             width27px
  904.             height9px
  905.             border-top2px 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.             bottom: -6px
  919.             left: -1px
  920.             z-index150
  921.             width7px
  922.             height15px
  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.             bottom: 39px
  933.             left: 41px
  934.             z-index120
  935.             width2px
  936.             height3px
  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.             bottom: 50px
  947.             left: 107px
  948.             z-index115
  949.             width10px
  950.             height18px
  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.             bottom: -9px
  964.             left: -8px
  965.             z-index150
  966.             width280px
  967.             color#005aa9
  968.             text-aligncenter
  969.             font-weightbold
  970.             font-styleitalic
  971.             font-size50px
  972.             font-family: Times New Roman; 
  973.         } 
  974.  
  975.         .name-lable-light { 
  976.             top: 30px
  977.             width100%
  978.             height0
  979.             -moz-box-shadow: 0 0 3px 3px #fff
  980.             -webkit-box-shadow: 0 0 3px 3px #fff
  981.             box-shadow: 0 0 3px 3px #fff
  982.         } 
  983.  
  984.         @-webkit-keyframes input-flash { 
  985.             0% { 
  986.                 border-color#ccc
  987.                 -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); 
  988.                 -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); 
  989.                 box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); 
  990.             } 
  991.  
  992.             100% { 
  993.                 border-color: rgba(82,168,236,0.8); 
  994.                 -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6); 
  995.                 -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6); 
  996.                 box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6); 
  997.             } 
  998.         } 
  999.  
  1000.         @-moz-keyframes input-flash { 
  1001.             0% { 
  1002.                 border-color#ccc
  1003.                 -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); 
  1004.                 -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); 
  1005.                 box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); 
  1006.             } 
  1007.  
  1008.             100% { 
  1009.                 border-color: rgba(82,168,236,0.8); 
  1010.                 -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6); 
  1011.                 -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6); 
  1012.                 box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6); 
  1013.             } 
  1014.         } 
  1015.  
  1016.         @-ms-keyframes input-flash { 
  1017.             0% { 
  1018.                 border-color#ccc
  1019.                 -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); 
  1020.                 -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); 
  1021.                 box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); 
  1022.             } 
  1023.  
  1024.             100% { 
  1025.                 border-color: rgba(82,168,236,0.8); 
  1026.                 -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6); 
  1027.                 -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6); 
  1028.                 box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6); 
  1029.             } 
  1030.         } 
  1031.  
  1032.         @keyframes input-flash { 
  1033.             0% { 
  1034.                 border-color#ccc
  1035.                 -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); 
  1036.                 -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); 
  1037.                 box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); 
  1038.             } 
  1039.  
  1040.             100% { 
  1041.                 border-color: rgba(82,168,236,0.8); 
  1042.                 -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6); 
  1043.                 -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6); 
  1044.                 box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6); 
  1045.             } 
  1046.         } 
  1047.     </style> 
  1048. </head> 
  1049. <body> 
  1050.     <div style="width: 400px; height: 359px; position: relative; margin: 50px auto;"
  1051.         <div class="outer-circle"
  1052.             <!--外圆--> 
  1053.             <div class="inner-circle"
  1054.                 <!--内圆--> 
  1055.                 <div class="inner-circle-light"></div> 
  1056.                 <div class="header-top"></div> 
  1057.                 <!--头发--> 
  1058.                 <div class="hair-left-1"></div> 
  1059.                 <div class="hair-left-2"></div> 
  1060.                 <div class="hair-light-1"></div> 
  1061.                 <div class="hair-light-1-over"></div> 
  1062.                 <div class="hair-light-2"></div> 
  1063.                 <div class="hair-right-1"
  1064.                     <div class="hair-right-2"
  1065.                     </div> 
  1066.                 </div> 
  1067.                 <div class="header-left"></div> 
  1068.                 <!--脸部--> 
  1069.                 <div class="face-main"></div> 
  1070.                 <div class="face-light-1"></div> 
  1071.                 <div class="face-light-2"></div> 
  1072.                 <div class="face-top"></div> 
  1073.                 <div class="face-right-1"></div> 
  1074.                 <div class="face-bottom-1"></div> 
  1075.                 <div class="face-bottom-1-over"></div> 
  1076.                 <div class="face-bottom-2"></div> 
  1077.                 <div class="face-bottom-2-over"></div> 
  1078.                 <div class="chin"></div> 
  1079.                 <div class="ear"
  1080.                     <!--耳朵--> 
  1081.                     <div class="ear-inner-1"></div> 
  1082.                     <div class="ear-inner-2"></div> 
  1083.                     <div class="ear-over"></div> 
  1084.                     <div class="ear-light"></div> 
  1085.                 </div> 
  1086.                 <div class="eye-left"
  1087.                     <!--左眼--> 
  1088.                     <div class="eye-left-inner"></div> 
  1089.                     <div class="eye-left-light1"></div> 
  1090.                     <div class="eye-left-light2"></div> 
  1091.                     <div class="eye-left-eyelash1"></div> 
  1092.                     <div class="eye-left-eyelash2"></div> 
  1093.                     <div class="eye-left-eyelash3"></div> 
  1094.                     <div class="eye-left-eyelash4"></div> 
  1095.                     <div class="eye-left-eyelash5"></div> 
  1096.                 </div> 
  1097.                 <div class="eye-right"
  1098.                     <!--右眼--> 
  1099.                     <div class="eye-right-inner"></div> 
  1100.                     <div class="eye-right-light1"></div> 
  1101.                     <div class="eye-right-light2"></div> 
  1102.                     <div class="eye-right-eyelash1"></div> 
  1103.                     <div class="eye-right-eyelash2"></div> 
  1104.                     <div class="eye-right-eyelash3"></div> 
  1105.                     <div class="eye-right-eyelash4"></div> 
  1106.                     <div class="eye-right-eyelash5"></div> 
  1107.                 </div> 
  1108.                 <div class="right-eyebrow"
  1109.                     <!--右眼眉毛--> 
  1110.                     <div class="right-eyebrow-over"></div> 
  1111.                 </div> 
  1112.                 <div class="left-eyebrow"
  1113.                     <!--左眼眉毛--> 
  1114.                     <div class="left-eyebrow-over"></div> 
  1115.                 </div> 
  1116.                 <div class="nose"
  1117.                     <!--鼻子--> 
  1118.                     <div class="nose-tip"></div> 
  1119.                     <div class="nose-over"></div> 
  1120.                 </div> 
  1121.                 <div class="mouth"
  1122.                     <!--嘴巴--> 
  1123.                     <div class="mouth-over-1"></div> 
  1124.                     <div class="mouth-over-2"></div> 
  1125.                     <div class="mouth-over-3"></div> 
  1126.                     <div class="mouth-over-4"></div> 
  1127.                     <div class="mouth-tip"></div> 
  1128.                 </div> 
  1129.                 <div class="mouth-inner"></div> 
  1130.                 <div class="name-lable"
  1131.                     ASTRO BOY 
  1132.                     <div class="name-lable-light"></div> 
  1133.                 </div> 
  1134.             </div> 
  1135.         </div> 
  1136.     </div> 
  1137. </body> 
  1138. </html> 

PS:建议大家使用IE9+,FireFox,Chrome浏览器打开。

第一次写博客,写的不是很好,以后不断努力。觉得好推荐一下吧!

附上源码:http://files.cnblogs.com/files/gangang/ASTRO_BOY.rar

赞(0) 打赏
未经允许不得转载:licqi IT技术 » 纯HTML+CSS实现阿童木头像
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏