51CTO首页
AI.x社区
博客
学堂
精品班
软考社区
免费课
企业培训
鸿蒙开发者社区
WOT技术大会
IT证书
公众号矩阵
移动端
短视频免费课程课程排行直播课软考学堂
全部课程厂商认证IT技术24年11月软考PMP项目管理免费题库
在线学习
文章资源问答课堂专栏直播
51CTO
鸿蒙开发者社区
51CTO技术栈
51CTO官微
51CTO学堂
51CTO博客
CTO训练营
鸿蒙开发者社区订阅号
51CTO软考
51CTO学堂APP
51CTO学堂企业版APP
鸿蒙开发者社区视频号
51CTO软考题库
账号设置 退出

纯HTML+CSS实现阿童木头像

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

他有十万马力，能上天能入地；他分辨善恶，是勇敢正义化身；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.             margin: 0; 
  9.             padding: 0; 
  10.         } 
  11.  
  12.         .outer-circle { 
  13.             position: absolute; 
  14.             top: 32px; 
  15.             left: 44px; 
  16.             width: 289px; 
  17.             height: 289px; 
  18.             border: 4px solid #75BD4F; 
  19.             -moz-border-radius: 50%; 
  20.             -webkit-border-radius: 50%; 
  21.             border-radius: 50%; 
  22.         } 
  23.  
  24.         .inner-circle { 
  25.             position: relative; 
  26.             width: 269px; 
  27.             height: 269px; 
  28.             border: 10px solid #F5F910; 
  29.             -moz-border-radius: 50%; 
  30.             -webkit-border-radius: 50%; 
  31.             border-radius: 50%; 
  32.             background-color: #73BF43; 
  33.         } 
  34.  
  35.         .inner-circle div { 
  36.             position: absolute; 
  37.         } 
  38.  
  39.         .inner-circle-light { 
  40.             top: 41px; 
  41.             left: 35px; 
  42.             -moz-box-shadow: 26px 26px 29px 37px #fff; 
  43.             -webkit-box-shadow: 26px 26px 29px 37px #fff; 
  44.             box-shadow: 26px 26px 29px 37px #fff; 
  45.         } 
  46.  
  47.         .header-top { 
  48.             top: 11px; 
  49.             right: 2px; 
  50.             z-index: 100; 
  51.             width: 180px; 
  52.             height: 90px; 
  53.             -moz-border-radius: 90px 90px 0 0; 
  54.             -webkit-border-radius: 90px 90px 0 0; 
  55.             border-radius: 90px 90px 0 0; 
  56.             background-color: #000; 
  57.             -moz-transform: rotate(32deg); 
  58.             -ms-transform: rotate(32deg); 
  59.             -o-transform: rotate(32deg); 
  60.             -webkit-transform: rotate(32deg); 
  61.             transform: rotate(32deg); 
  62.         } 
  63.  
  64.         .header-left { 
  65.             top: -20px; 
  66.             left: 37px; 
  67.             width: 114px; 
  68.             height: 228px; 
  69.             -moz-border-radius: 228px 0 0 228px; 
  70.             -webkit-border-radius: 228px 0 0 228px; 
  71.             border-radius: 228px 0 0 228px; 
  72.             background-color: #000; 
  73.             -moz-transform: rotate(26deg); 
  74.             -ms-transform: rotate(26deg); 
  75.             -o-transform: rotate(26deg); 
  76.             -webkit-transform: rotate(26deg); 
  77.             transform: rotate(26deg); 
  78.         } 
  79.  
  80.         .hair-left-1 { 
  81.             top: 15px; 
  82.             left: 53px; 
  83.             z-index: 55; 
  84.             width: 85px; 
  85.             height: 23px; 
  86.             -webkit-border-top-left-radius: 30px 180px; 
  87.             border-top-left-radius: 30px 180px; 
  88.             -webkit-border-bottom-left-radius: 30px 80px; 
  89.             border-bottom-left-radius: 30px 80px; 
  90.             background-color: #000; 
  91.             -moz-transform: rotate(-74deg) skew(-42deg, 23deg); 
  92.             -ms-transform: rotate(-74deg) skew(-42deg, 23deg); 
  93.             -o-transform: rotate(-74deg) skew(-42deg, 23deg); 
  94.             -webkit-transform: rotate(-74deg) skew(-42deg, 23deg); 
  95.             transform: rotate(-74deg) skew(-42deg, 23deg); 
  96.         } 
  97.  
  98.         .hair-left-2 { 
  99.             top: -20px; 
  100.             left: 99px; 
  101.             z-index: 60; 
  102.             width: 49px; 
  103.             height: 37px; 
  104.             background-color: #000; 
  105.             -moz-transform: rotate(-51deg) skew(-43deg, 0deg); 
  106.             -ms-transform: rotate(-51deg) skew(-43deg, 0deg); 
  107.             -o-transform: rotate(-51deg) skew(-43deg, 0deg); 
  108.             -webkit-transform: rotate(-51deg) skew(-43deg, 0deg); 
  109.             transform: rotate(-51deg) skew(-43deg, 0deg); 
  110.         } 
  111.  
  112.         .hair-right-1 { 
  113.             top: 70px; 
  114.             right: 1px; 
  115.             z-index: 60; 
  116.             width: 81px; 
  117.             height: 85px; 
  118.             -webkit-border-top-right-radius: 26px 120px; 
  119.             border-top-right-radius: 26px 120px; 
  120.             background-color: black; 
  121.             -moz-transform: rotate(1deg) skew(-51deg, 0deg); 
  122.             -ms-transform: rotate(1deg) skew(-51deg, 0deg); 
  123.             -o-transform: rotate(1deg) skew(-51deg, 0deg); 
  124.             -webkit-transform: rotate(1deg) skew(-51deg, 0deg); 
  125.             transform: rotate(1deg) skew(-51deg, 0deg); 
  126.         } 
  127.  
  128.         .hair-right-2 { 
  129.             width: 60px; 
  130.             height: 10px; 
  131.             -webkit-border-bottom-left-radius: 100%; 
  132.             border-bottom-left-radius: 100%; 
  133.             background-color: rgba(0,0,0,0.2); 
  134.         } 
  135.  
  136.         .hair-light-1 { 
  137.             top: 30px; 
  138.             right: 45px; 
  139.             z-index: 105; 
  140.             width: 57px; 
  141.             height: 17px; 
  142.             -moz-border-radius: 100%; 
  143.             -webkit-border-radius: 100%; 
  144.             border-radius: 100%; 
  145.             background-color: white; 
  146.             -moz-transform: rotate(39deg); 
  147.             -ms-transform: rotate(39deg); 
  148.             -o-transform: rotate(39deg); 
  149.             -webkit-transform: rotate(39deg); 
  150.             transform: rotate(39deg); 
  151.         } 
  152.  
  153.         .hair-light-1-over { 
  154.             top: 32px; 
  155.             right: 38px; 
  156.             z-index: 105; 
  157.             width: 83px; 
  158.             height: 21px; 
  159.             -moz-border-radius: 100%; 
  160.             -webkit-border-radius: 100%; 
  161.             border-radius: 100%; 
  162.             background-color: black; 
  163.             -moz-transform: rotate(41deg); 
  164.             -ms-transform: rotate(41deg); 
  165.             -o-transform: rotate(41deg); 
  166.             -webkit-transform: rotate(41deg); 
  167.             transform: rotate(41deg); 
  168.         } 
  169.  
  170.         .hair-light-2 { 
  171.             top: 16px; 
  172.             right: 104px; 
  173.             z-index: 105; 
  174.             width: 4px; 
  175.             height: 2px; 
  176.             -moz-border-radius: 2px; 
  177.             -webkit-border-radius: 2px; 
  178.             border-radius: 2px; 
  179.             background-color: white; 
  180.             -moz-transform: rotate(10deg); 
  181.             -ms-transform: rotate(10deg); 
  182.             -o-transform: rotate(10deg); 
  183.             -webkit-transform: rotate(10deg); 
  184.             transform: rotate(10deg); 
  185.         } 
  186.  
  187.         .ear { 
  188.             top: 141px; 
  189.             right: 36px; 
  190.             z-index: 110; 
  191.             width: 49px; 
  192.             height: 48px; 
  193.             border: 2px solid #000; 
  194.             border-bottom-width: 1px; 
  195.             -moz-border-radius: 50%; 
  196.             -webkit-border-radius: 50%; 
  197.             border-radius: 50%; 
  198.             background-color: #F6C6B0; 
  199.             -moz-box-shadow: -4px 0 0 0 #de9876 inset; 
  200.             -webkit-box-shadow: -4px 0 0 0 #de9876 inset; 
  201.             box-shadow: -4px 0 0 0 #de9876 inset; 
  202.             -moz-transform: rotate(56deg) scaleY(1.4); 
  203.             -ms-transform: rotate(56deg) scaleY(1.4); 
  204.             -o-transform: rotate(56deg) scaleY(1.4); 
  205.             -webkit-transform: rotate(56deg) scaleY(1.4); 
  206.             transform: rotate(56deg) scaleY(1.4); 
  207.         } 
  208.  
  209.         .ear-inner-1 { 
  210.             top: 22px; 
  211.             left: 22px; 
  212.             z-index: 70; 
  213.             width: 9px; 
  214.             height: 5px; 
  215.             border-top: 1px solid #110b00; 
  216.             -moz-border-radius: 50%; 
  217.             -webkit-border-radius: 50%; 
  218.             border-radius: 50%; 
  219.             -moz-transform: rotate(-6deg); 
  220.             -ms-transform: rotate(-6deg); 
  221.             -o-transform: rotate(-6deg); 
  222.             -webkit-transform: rotate(-6deg); 
  223.             transform: rotate(-6deg); 
  224.         } 
  225.  
  226.         .ear-inner-2 { 
  227.             top: 19px; 
  228.             left: 18px; 
  229.             width: 14px; 
  230.             height: 7px; 
  231.             border-top: 2px solid #110b00; 
  232.             -moz-border-radius: 50%; 
  233.             -webkit-border-radius: 50%; 
  234.             border-radius: 50%; 
  235.             -moz-box-shadow: 0px 2px 0 0 #de9876 inset; 
  236.             -webkit-box-shadow: 0px 2px 0 0 #de9876 inset; 
  237.             box-shadow: 0px 2px 0 0 #de9876 inset; 
  238.             -moz-transform: rotate(-91deg); 
  239.             -ms-transform: rotate(-91deg); 
  240.             -o-transform: rotate(-91deg); 
  241.             -webkit-transform: rotate(-91deg); 
  242.             transform: rotate(-91deg); 
  243.         } 
  244.  
  245.         .ear-light { 
  246.             top: 21px; 
  247.             right: 34px; 
  248.             z-index: 105; 
  249.             width: 17px; 
  250.             height: 6px; 
  251.             -moz-border-radius: 100%; 
  252.             -webkit-border-radius: 100%; 
  253.             border-radius: 100%; 
  254.             background-color: #FFF; 
  255.             -moz-transform: rotate(89deg); 
  256.             -ms-transform: rotate(89deg); 
  257.             -o-transform: rotate(89deg); 
  258.             -webkit-transform: rotate(89deg); 
  259.             transform: rotate(89deg); 
  260.         } 
  261.  
  262.         .ear-over { 
  263.             bottom: -44px; 
  264.             left: -33px; 
  265.             z-index: 55; 
  266.             width: 69px; 
  267.             height: 59px; 
  268.             -moz-border-radius: 50%; 
  269.             -webkit-border-radius: 50%; 
  270.             border-radius: 50%; 
  271.             background-color: #f6c6b0; 
  272.             -moz-transform: rotate(26deg); 
  273.             -ms-transform: rotate(26deg); 
  274.             -o-transform: rotate(26deg); 
  275.             -webkit-transform: rotate(26deg); 
  276.             transform: rotate(26deg); 
  277.         } 
  278.  
  279.         .face-main { 
  280.             top: 30px; 
  281.             left: 35px; 
  282.             z-index: 50; 
  283.             width: 180px; 
  284.             height: 188px; 
  285.             -moz-border-radius: 90px; 
  286.             -webkit-border-radius: 90px; 
  287.             border-radius: 90px; 
  288.             background-color: #F6C6B0; 
  289.             -moz-box-shadow: 3px -3px 0 0 #fff inset; 
  290.             -webkit-box-shadow: 3px -3px 0 0 #fff inset; 
  291.             box-shadow: 3px -3px 0 0 #fff inset; 
  292.         } 
  293.  
  294.         .face-top { 
  295.             top: 61px; 
  296.             right: 75px; 
  297.             z-index: 105; 
  298.             width: 111px; 
  299.             height: 46px; 
  300.             -moz-border-radius: 50% 50% 26px 0; 
  301.             -webkit-border-radius: 50% 50% 26px 0; 
  302.             border-radius: 50% 50% 26px 0; 
  303.             background-color: #f6c6b0; 
  304.             -moz-transform: rotate(37deg); 
  305.             -ms-transform: rotate(37deg); 
  306.             -o-transform: rotate(37deg); 
  307.             -webkit-transform: rotate(37deg); 
  308.             transform: rotate(37deg); 
  309.         } 
  310.  
  311.         .face-right-1 { 
  312.             top: 115px; 
  313.             right: 71px; 
  314.             z-index: 105; 
  315.             width: 68px; 
  316.             height: 62px; 
  317.             -moz-border-radius: 100% 0 0; 
  318.             -webkit-border-radius: 100% 0 0; 
  319.             border-radius: 100% 0 0; 
  320.             background-color: #f6c6b0; 
  321.             -moz-transform: rotate(99deg); 
  322.             -ms-transform: rotate(99deg); 
  323.             -o-transform: rotate(99deg); 
  324.             -webkit-transform: rotate(99deg); 
  325.             transform: rotate(99deg); 
  326.         } 
  327.  
  328.         .face-bottom-1 { 
  329.             bottom: 42px; 
  330.             left: 45px; 
  331.             z-index: 40; 
  332.             width: 72px; 
  333.             height: 52px; 
  334.             -webkit-border-bottom-left-radius: 70px 40px; 
  335.             -webkit-border-top-left-radius: 14px 11px; 
  336.             border-top-left-radius: 14px 11px; 
  337.             border-bottom-left-radius: 70px 40px; 
  338.             background-color: #000; 
  339.         } 
  340.  
  341.         .face-bottom-1-over { 
  342.             bottom: 45px; 
  343.             left: 48px; 
  344.             z-index: 55; 
  345.             width: 69px; 
  346.             height: 47px; 
  347.             -webkit-border-bottom-left-radius: 70px 40px; 
  348.             -webkit-border-top-left-radius: 14px 11px; 
  349.             border-top-left-radius: 14px 11px; 
  350.             border-bottom-left-radius: 70px 40px; 
  351.             background-color: #f6c6b0; 
  352.             -moz-box-shadow: 3px 0px 0 0 #fff inset; 
  353.             -webkit-box-shadow: 3px 0px 0 0 #fff inset; 
  354.             box-shadow: 3px 0px 0 0 #fff inset; 
  355.         } 
  356.  
  357.         .face-bottom-2 { 
  358.             right: 97px; 
  359.             bottom: 44px; 
  360.             z-index: 55; 
  361.             width: 43px; 
  362.             height: 31px; 
  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-index: 56; 
  377.             width: 43px; 
  378.             height: 31px; 
  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-index: 150; 
  396.             width: 6px; 
  397.             height: 6px; 
  398.             -moz-border-radius: 50%; 
  399.             -webkit-border-radius: 50%; 
  400.             border-radius: 50%; 
  401.             background-color: #fff; 
  402.         } 
  403.  
  404.         .face-light-2 { 
  405.             bottom: 82px; 
  406.             left: 58px; 
  407.             z-index: 150; 
  408.             width: 4px; 
  409.             height: 4px; 
  410.             -moz-border-radius: 50%; 
  411.             -webkit-border-radius: 50%; 
  412.             border-radius: 50%; 
  413.             background-color: #fff; 
  414.         } 
  415.  
  416.         .chin { 
  417.             bottom: 39px; 
  418.             left: 111px; 
  419.             z-index: 70; 
  420.             width: 11px; 
  421.             height: 12px; 
  422.             border: 2px solid #000; 
  423.             border-top-color: #f6c6b0; 
  424.             border-left-color: #f6c6b0; 
  425.             -webkit-border-bottom-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-index: 110; 
  439.             width: 39px; 
  440.             height: 67px; 
  441.             border: 1px solid #000; 
  442.             border-top-width: 2px; 
  443.             -moz-border-radius: 24px 43px 34px 28px / 34px 71px 34px 81px; 
  444.             -webkit-border-radius: 24px 43px 34px 28px / 34px 71px 34px 81px; 
  445.             border-radius: 24px 43px 34px 28px / 34px 71px 34px 81px; 
  446.             background-color: #F8FAF7; 
  447.             -moz-box-shadow: 0px 5px 0 0 #d5d9e2 inset; 
  448.             -webkit-box-shadow: 0px 5px 0 0 #d5d9e2 inset; 
  449.             box-shadow: 0px 5px 0 0 #d5d9e2 inset; 
  450.         } 
  451.  
  452.         .eye-right-inner { 
  453.             right: 0; 
  454.             bottom: 3px; 
  455.             z-index: 115; 
  456.             width: 30px; 
  457.             height: 52px; 
  458.             -moz-border-radius: 32px 43px 28px 48px / 47px 55px 45px 75px; 
  459.             -webkit-border-radius: 32px 43px 28px 48px / 47px 55px 45px 75px; 
  460.             border-radius: 32px 43px 28px 48px / 47px 55px 45px 75px; 
  461.             background-color: #000; 
  462.         } 
  463.  
  464.         .eye-right-light1 { 
  465.             top: 19px; 
  466.             right: 0; 
  467.             z-index: 120; 
  468.             width: 19px; 
  469.             height: 10px; 
  470.             -moz-border-radius: 100%; 
  471.             -webkit-border-radius: 100%; 
  472.             border-radius: 100%; 
  473.             background-color: #FFF; 
  474.             -moz-animation: eye-flash 0.2s linear 0.1s infinite normal; 
  475.             -o-animation: eye-flash 0.2s linear 0.1s infinite normal; 
  476.             -webkit-animation: eye-flash 0.2s linear 0.1s infinite normal; 
  477.             -moz-transform: rotate(41deg); 
  478.             -ms-transform: rotate(41deg); 
  479.             -o-transform: rotate(41deg); 
  480.             -webkit-transform: rotate(41deg); 
  481.             transform: rotate(41deg); 
  482.             animation: eye-flash 0.2s linear 0.1s infinite normal; 
  483.         } 
  484.  
  485.         @-webkit-keyframes eye-flash { 
  486.             0% { 
  487.                 top: 19px; 
  488.             } 
  489.  
  490.             100% { 
  491.                 top: 21px; 
  492.             } 
  493.         } 
  494.  
  495.         @-moz-keyframes eye-flash { 
  496.             0% { 
  497.                 top: 19px; 
  498.             } 
  499.  
  500.             100% { 
  501.                 top: 20px; 
  502.             } 
  503.         } 
  504.  
  505.         @-ms-keyframes eye-flash { 
  506.             0% { 
  507.                 top: 19px; 
  508.             } 
  509.  
  510.             100% { 
  511.                 top: 20px; 
  512.             } 
  513.         } 
  514.  
  515.         @keyframes eye-flash { 
  516.             0% { 
  517.                 top: 19px; 
  518.             } 
  519.  
  520.             100% { 
  521.                 top: 20px; 
  522.             } 
  523.         } 
  524.  
  525.         .eye-right-light2 { 
  526.             bottom: 8px; 
  527.             left: 9px; 
  528.             z-index: 120; 
  529.             width: 14px; 
  530.             height: 7px; 
  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.             width: 2px; 
  545.             height: 4px; 
  546.             background-color: #000; 
  547.             -moz-transform: rotate(-54deg); 
  548.             -ms-transform: rotate(-54deg); 
  549.             -o-transform: rotate(-54deg); 
  550.             -webkit-transform: rotate(-54deg); 
  551.             transform: rotate(-54deg); 
  552.         } 
  553.  
  554.         .eye-right-eyelash2 { 
  555.             top: 1px; 
  556.             left: 1px; 
  557.             width: 2px; 
  558.             height: 5px; 
  559.             background-color: #000; 
  560.             -moz-transform: rotate(-33deg); 
  561.             -ms-transform: rotate(-33deg); 
  562.             -o-transform: rotate(-33deg); 
  563.             -webkit-transform: rotate(-33deg); 
  564.             transform: rotate(-33deg); 
  565.         } 
  566.  
  567.         .eye-right-eyelash3 { 
  568.             top: -8px; 
  569.             left: 8px; 
  570.             width: 2px; 
  571.             height: 7px; 
  572.             background-color: #000; 
  573.             -moz-transform: rotate(-21deg); 
  574.             -ms-transform: rotate(-21deg); 
  575.             -o-transform: rotate(-21deg); 
  576.             -webkit-transform: rotate(-21deg); 
  577.             transform: rotate(-21deg); 
  578.         } 
  579.  
  580.         .eye-right-eyelash4 { 
  581.             top: -6px; 
  582.             left: 21px; 
  583.             width: 2px; 
  584.             height: 6px; 
  585.             background-color: #000; 
  586.             -moz-transform: rotate(11deg); 
  587.             -ms-transform: rotate(11deg); 
  588.             -o-transform: rotate(11deg); 
  589.             -webkit-transform: rotate(11deg); 
  590.             transform: rotate(11deg); 
  591.         } 
  592.  
  593.         .eye-right-eyelash5 { 
  594.             top: 1px; 
  595.             right: 8px; 
  596.             width: 2px; 
  597.             height: 6px; 
  598.             background-color: #000; 
  599.             -moz-transform: rotate(14deg); 
  600.             -ms-transform: rotate(14deg); 
  601.             -o-transform: rotate(14deg); 
  602.             -webkit-transform: rotate(14deg); 
  603.             transform: rotate(14deg); 
  604.         } 
  605.  
  606.         .eye-left { 
  607.             top: 114px; 
  608.             left: 45px; 
  609.             z-index: 110; 
  610.             width: 19px; 
  611.             height: 63px; 
  612.             border: 1px solid #000; 
  613.             border-top-width: 2px; 
  614.             -moz-border-radius: 29px 28px 33px / 97px 111px 40px 90px; 
  615.             -webkit-border-radius: 29px 28px 33px / 97px 111px 40px 90px; 
  616.             border-radius: 29px 28px 33px / 97px 111px 40px 90px; 
  617.             background-color: #F8FAF7; 
  618.             -moz-box-shadow: 0px 6px 0 0 #d5d9e2 inset; 
  619.             -webkit-box-shadow: 0px 6px 0 0 #d5d9e2 inset; 
  620.             box-shadow: 0px 6px 0 0 #d5d9e2 inset; 
  621.             -moz-transform: rotate(-9deg); 
  622.             -ms-transform: rotate(-9deg); 
  623.             -o-transform: rotate(-9deg); 
  624.             -webkit-transform: rotate(-9deg); 
  625.             transform: rotate(-9deg); 
  626.         } 
  627.  
  628.         .eye-left-inner { 
  629.             right: 0; 
  630.             bottom: 1px; 
  631.             z-index: 115; 
  632.             width: 15px; 
  633.             height: 46px; 
  634.             -moz-border-radius: 49px 44px 29px 58px / 143px 83px 45px 122px; 
  635.             -webkit-border-radius: 49px 44px 29px 58px / 143px 83px 45px 122px; 
  636.             border-radius: 49px 44px 29px 58px / 143px 83px 45px 122px; 
  637.             background-color: #000; 
  638.         } 
  639.  
  640.         .eye-left-light1 { 
  641.             top: 19px; 
  642.             right: 1px; 
  643.             z-index: 120; 
  644.             width: 7px; 
  645.             height: 18px; 
  646.             -moz-border-radius: 100%; 
  647.             -webkit-border-radius: 100%; 
  648.             border-radius: 100%; 
  649.             background-color: #FFF; 
  650.             -moz-animation: eye-flash 0.2s linear 0.1s infinite normal; 
  651.             -o-animation: eye-flash 0.2s linear 0.1s infinite normal; 
  652.             -webkit-animation: eye-flash 0.2s linear 0.1s infinite normal; 
  653.             -moz-transform: rotate(-9deg); 
  654.             -ms-transform: rotate(-9deg); 
  655.             -o-transform: rotate(-9deg); 
  656.             -webkit-transform: rotate(-9deg); 
  657.             transform: rotate(-9deg); 
  658.             animation: eye-flash 0.2s linear 0.1s infinite normal; 
  659.         } 
  660.  
  661.         .eye-left-light2 { 
  662.             bottom: 6px; 
  663.             left: 4px; 
  664.             z-index: 120; 
  665.             width: 11px; 
  666.             height: 4px; 
  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.             width: 2px; 
  681.             height: 4px; 
  682.             background-color: #000; 
  683.             -moz-transform: rotate(-49deg); 
  684.             -ms-transform: rotate(-49deg); 
  685.             -o-transform: rotate(-49deg); 
  686.             -webkit-transform: rotate(-49deg); 
  687.             transform: rotate(-49deg); 
  688.         } 
  689.  
  690.         .eye-left-eyelash2 { 
  691.             top: -1px; 
  692.             left: 2px; 
  693.             width: 2px; 
  694.             height: 5px; 
  695.             background-color: #000; 
  696.             -moz-transform: rotate(-28deg); 
  697.             -ms-transform: rotate(-28deg); 
  698.             -o-transform: rotate(-28deg); 
  699.             -webkit-transform: rotate(-28deg); 
  700.             transform: rotate(-28deg); 
  701.         } 
  702.  
  703.         .eye-left-eyelash3 { 
  704.             top: -6px; 
  705.             left: 7px; 
  706.             width: 2px; 
  707.             height: 5px; 
  708.             background-color: #000; 
  709.             -moz-transform: rotate(-4deg); 
  710.             -ms-transform: rotate(-4deg); 
  711.             -o-transform: rotate(-4deg); 
  712.             -webkit-transform: rotate(-4deg); 
  713.             transform: rotate(-4deg); 
  714.         } 
  715.  
  716.         .eye-left-eyelash4 { 
  717.             top: -4px; 
  718.             left: 13px; 
  719.             width: 2px; 
  720.             height: 4px; 
  721.             background-color: #000; 
  722.             -moz-transform: rotate(25deg); 
  723.             -ms-transform: rotate(25deg); 
  724.             -o-transform: rotate(25deg); 
  725.             -webkit-transform: rotate(25deg); 
  726.             transform: rotate(25deg); 
  727.         } 
  728.  
  729.         .eye-left-eyelash5 { 
  730.             top: 3px; 
  731.             right: 0; 
  732.             width: 2px; 
  733.             height: 4px; 
  734.             background-color: #000; 
  735.             -moz-transform: rotate(41deg); 
  736.             -ms-transform: rotate(41deg); 
  737.             -o-transform: rotate(41deg); 
  738.             -webkit-transform: rotate(41deg); 
  739.             transform: rotate(41deg); 
  740.         } 
  741.  
  742.         .right-eyebrow { 
  743.             top: 68px; 
  744.             left: 92px; 
  745.             z-index: 110; 
  746.             width: 66px; 
  747.             height: 36px; 
  748.             border: 2px solid #000; 
  749.             border-width: 2px 1px 0px 1px; 
  750.             -moz-border-radius: 45px 51px 0 0; 
  751.             -webkit-border-radius: 45px 51px 0 0; 
  752.             border-radius: 45px 51px 0 0; 
  753.             background-color: transparent; 
  754.             -moz-transform: skew(-6deg, 16deg); 
  755.             -ms-transform: skew(-6deg, 16deg); 
  756.             -o-transform: skew(-6deg, 16deg); 
  757.             -webkit-transform: skew(-6deg, 16deg); 
  758.             transform: skew(-6deg, 16deg); 
  759.         } 
  760.  
  761.         .right-eyebrow-over { 
  762.             top: 21px; 
  763.             right: -5px; 
  764.             z-index: 115; 
  765.             width: 13px; 
  766.             height: 20px; 
  767.             background-color: #f6c6b0; 
  768.         } 
  769.  
  770.         .left-eyebrow { 
  771.             top: 89px; 
  772.             left: 36px; 
  773.             z-index: 100; 
  774.             width: 30px; 
  775.             height: 68px; 
  776.             border: 2px solid #000; 
  777.             border-width: 2px 1px 0px 1px; 
  778.             -moz-border-radius: 100%; 
  779.             -webkit-border-radius: 100%; 
  780.             border-radius: 100%; 
  781.             background-color: transparent; 
  782.             -moz-transform: rotate(-2deg); 
  783.             -ms-transform: rotate(-2deg); 
  784.             -o-transform: rotate(-2deg); 
  785.             -webkit-transform: rotate(-2deg); 
  786.             transform: rotate(-2deg); 
  787.         } 
  788.  
  789.         .left-eyebrow-over { 
  790.             top: 17px; 
  791.             right: -9px; 
  792.             z-index: 105; 
  793.             width: 39px; 
  794.             height: 55px; 
  795.             -moz-border-radius: 21px 12px 0 17px; 
  796.             -webkit-border-radius: 21px 12px 0 17px; 
  797.             border-radius: 21px 12px 0 17px; 
  798.             background-color: #f6c6b0; 
  799.             -moz-transform: rotate(-13deg); 
  800.             -ms-transform: rotate(-13deg); 
  801.             -o-transform: rotate(-13deg); 
  802.             -webkit-transform: rotate(-13deg); 
  803.             transform: rotate(-13deg); 
  804.         } 
  805.  
  806.         .nose { 
  807.             top: 172px; 
  808.             left: 63px; 
  809.             z-index: 115; 
  810.             width: 21px; 
  811.             height: 16px; 
  812.             border: 2px solid #000; 
  813.             -moz-border-radius: 50%; 
  814.             -webkit-border-radius: 50%; 
  815.             border-radius: 50%; 
  816.             -moz-box-shadow: 3px 1px 0 0 #fff inset; 
  817.             -webkit-box-shadow: 3px 1px 0 0 #fff inset; 
  818.             box-shadow: 3px 1px 0 0 #fff inset; 
  819.         } 
  820.  
  821.         .nose-over { 
  822.             top: -1px; 
  823.             right: -11px; 
  824.             z-index: 115; 
  825.             width: 19px; 
  826.             height: 14px; 
  827.             background-color: #f6c6b0; 
  828.             -moz-transform: rotate(31deg); 
  829.             -ms-transform: rotate(31deg); 
  830.             -o-transform: rotate(31deg); 
  831.             -webkit-transform: rotate(31deg); 
  832.             transform: rotate(31deg); 
  833.         } 
  834.  
  835.         .nose-tip { 
  836.             top: -7px; 
  837.             left: 13px; 
  838.             width: 2px; 
  839.             height: 6px; 
  840.             background-color: #000; 
  841.             -moz-transform: rotate(14deg); 
  842.             -ms-transform: rotate(14deg); 
  843.             -o-transform: rotate(14deg); 
  844.             -webkit-transform: rotate(14deg); 
  845.             transform: rotate(14deg); 
  846.         } 
  847.  
  848.         .mouth { 
  849.             bottom: 61px; 
  850.             left: 72px; 
  851.             z-index: 110; 
  852.             width: 46px; 
  853.             height: 47px; 
  854.             border: 2px solid #000; 
  855.             border-width: 0 1px 2px 0; 
  856.             -moz-border-radius: 32px 29px 23px 48px / 47px 82px 52px 75px; 
  857.             -webkit-border-radius: 32px 29px 23px 48px / 47px 82px 52px 75px; 
  858.             border-radius: 32px 29px 23px 48px / 47px 82px 52px 75px; 
  859.             background-color: #92222E; 
  860.             -moz-transform: rotate(1deg) skew(0deg, 39deg); 
  861.             -ms-transform: rotate(1deg) skew(0deg, 39deg); 
  862.             -o-transform: rotate(1deg) skew(0deg, 39deg); 
  863.             -webkit-transform: rotate(1deg) skew(0deg, 39deg); 
  864.             transform: rotate(1deg) skew(0deg, 39deg); 
  865.         } 
  866.  
  867.         .mouth-over-1 { 
  868.             bottom: 0; 
  869.             left: -4px; 
  870.             z-index: 115; 
  871.             width: 37px; 
  872.             height: 58px; 
  873.             border-right: 1px solid #000; 
  874.             -moz-border-radius: 38px 13px 10px 77px / 47px 82px 52px 73px; 
  875.             -webkit-border-radius: 38px 13px 10px 77px / 47px 82px 52px 73px; 
  876.             border-radius: 38px 13px 10px 77px / 47px 82px 52px 73px; 
  877.             background-color: #f6c6b0; 
  878.             -moz-transform: rotate(38deg) skew(0deg, 6deg); 
  879.             -ms-transform: rotate(38deg) skew(0deg, 6deg); 
  880.             -o-transform: rotate(38deg) skew(0deg, 6deg); 
  881.             -webkit-transform: rotate(38deg) skew(0deg, 6deg); 
  882.             transform: rotate(38deg) skew(0deg, 6deg); 
  883.         } 
  884.  
  885.         .mouth-over-2 { 
  886.             bottom: 38px; 
  887.             left: 30px; 
  888.             z-index: 150; 
  889.             width: 7px; 
  890.             height: 19px; 
  891.             background-color: #f6c6b0; 
  892.             -moz-transform: rotate(-233deg); 
  893.             -ms-transform: rotate(-233deg); 
  894.             -o-transform: rotate(-233deg); 
  895.             -webkit-transform: rotate(-233deg); 
  896.             transform: rotate(-233deg); 
  897.         } 
  898.  
  899.         .mouth-over-3 { 
  900.             bottom: -9px; 
  901.             left: 11px; 
  902.             z-index: 115; 
  903.             width: 27px; 
  904.             height: 9px; 
  905.             border-top: 2px solid #000; 
  906.             -moz-border-radius: 100%; 
  907.             -webkit-border-radius: 100%; 
  908.             border-radius: 100%; 
  909.             background-color: #f6c6b0; 
  910.             -moz-transform: rotate(-4deg); 
  911.             -ms-transform: rotate(-4deg); 
  912.             -o-transform: rotate(-4deg); 
  913.             -webkit-transform: rotate(-4deg); 
  914.             transform: rotate(-4deg); 
  915.         } 
  916.  
  917.         .mouth-over-4 { 
  918.             bottom: -6px; 
  919.             left: -1px; 
  920.             z-index: 150; 
  921.             width: 7px; 
  922.             height: 15px; 
  923.             background-color: #f6c6b0; 
  924.             -moz-transform: rotate(-226deg); 
  925.             -ms-transform: rotate(-226deg); 
  926.             -o-transform: rotate(-226deg); 
  927.             -webkit-transform: rotate(-226deg); 
  928.             transform: rotate(-226deg); 
  929.         } 
  930.  
  931.         .mouth-tip { 
  932.             bottom: 39px; 
  933.             left: 41px; 
  934.             z-index: 120; 
  935.             width: 2px; 
  936.             height: 3px; 
  937.             background-color: #000; 
  938.             -moz-transform: rotate(-51deg); 
  939.             -ms-transform: rotate(-51deg); 
  940.             -o-transform: rotate(-51deg); 
  941.             -webkit-transform: rotate(-51deg); 
  942.             transform: rotate(-51deg); 
  943.         } 
  944.  
  945.         .mouth-inner { 
  946.             bottom: 50px; 
  947.             left: 107px; 
  948.             z-index: 115; 
  949.             width: 10px; 
  950.             height: 18px; 
  951.             -moz-border-radius: 10px 0 4px 6px / 8px 2px 8px 9px; 
  952.             -webkit-border-radius: 10px 0 4px 6px / 8px 2px 8px 9px; 
  953.             border-radius: 10px 0 4px 6px / 8px 2px 8px 9px; 
  954.             background-color: #ed675c; 
  955.             -moz-transform: rotate(6deg); 
  956.             -ms-transform: rotate(6deg); 
  957.             -o-transform: rotate(6deg); 
  958.             -webkit-transform: rotate(6deg); 
  959.             transform: rotate(6deg); 
  960.         } 
  961.  
  962.         .name-lable { 
  963.             bottom: -9px; 
  964.             left: -8px; 
  965.             z-index: 150; 
  966.             width: 280px; 
  967.             color: #005aa9; 
  968.             text-align: center; 
  969.             font-weight: bold; 
  970.             font-style: italic; 
  971.             font-size: 50px; 
  972.             font-family: Times New Roman; 
  973.         } 
  974.  
  975.         .name-lable-light { 
  976.             top: 30px; 
  977.             width: 100%; 
  978.             height: 0; 
  979.             -moz-box-shadow: 0 0 3px 3px #fff; 
  980.             -webkit-box-shadow: 0 0 3px 3px #fff; 
  981.             box-shadow: 0 0 3px 3px #fff; 
  982.         } 
  983.  
  984.         @-webkit-keyframes input-flash { 
  985.             0% { 
  986.                 border-color: #ccc; 
  987.                 -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); 
  988.                 -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); 
  989.                 box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); 
  990.             } 
  991.  
  992.             100% { 
  993.                 border-color: rgba(82,168,236,0.8); 
  994.                 -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6); 
  995.                 -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6); 
  996.                 box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6); 
  997.             } 
  998.         } 
  999.  
  1000.         @-moz-keyframes input-flash { 
  1001.             0% { 
  1002.                 border-color: #ccc; 
  1003.                 -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); 
  1004.                 -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); 
  1005.                 box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); 
  1006.             } 
  1007.  
  1008.             100% { 
  1009.                 border-color: rgba(82,168,236,0.8); 
  1010.                 -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6); 
  1011.                 -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6); 
  1012.                 box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6); 
  1013.             } 
  1014.         } 
  1015.  
  1016.         @-ms-keyframes input-flash { 
  1017.             0% { 
  1018.                 border-color: #ccc; 
  1019.                 -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); 
  1020.                 -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); 
  1021.                 box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); 
  1022.             } 
  1023.  
  1024.             100% { 
  1025.                 border-color: rgba(82,168,236,0.8); 
  1026.                 -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6); 
  1027.                 -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6); 
  1028.                 box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6); 
  1029.             } 
  1030.         } 
  1031.  
  1032.         @keyframes input-flash { 
  1033.             0% { 
  1034.                 border-color: #ccc; 
  1035.                 -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); 
  1036.                 -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); 
  1037.                 box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); 
  1038.             } 
  1039.  
  1040.             100% { 
  1041.                 border-color: rgba(82,168,236,0.8); 
  1042.                 -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6); 
  1043.                 -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6); 
  1044.                 box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6); 
  1045.             } 
  1046.         } 
  1047.     </style> 
  1048. </head> 
  1049. <body> 
  1050.     <div style="width: 400px; height: 359px; position: relative; margin: 50px auto;"> 
  1051.         <div class="outer-circle"> 
  1052.             <!--外圆--> 
  1053.             <div class="inner-circle"> 
  1054.                 <!--内圆--> 
  1055.                 <div class="inner-circle-light"></div> 
  1056.                 <div class="header-top"></div> 
  1057.                 <!--头发--> 
  1058.                 <div class="hair-left-1"></div> 
  1059.                 <div class="hair-left-2"></div> 
  1060.                 <div class="hair-light-1"></div> 
  1061.                 <div class="hair-light-1-over"></div> 
  1062.                 <div class="hair-light-2"></div> 
  1063.                 <div class="hair-right-1"> 
  1064.                     <div class="hair-right-2"> 
  1065.                     </div> 
  1066.                 </div> 
  1067.                 <div class="header-left"></div> 
  1068.                 <!--脸部--> 
  1069.                 <div class="face-main"></div> 
  1070.                 <div class="face-light-1"></div> 
  1071.                 <div class="face-light-2"></div> 
  1072.                 <div class="face-top"></div> 
  1073.                 <div class="face-right-1"></div> 
  1074.                 <div class="face-bottom-1"></div> 
  1075.                 <div class="face-bottom-1-over"></div> 
  1076.                 <div class="face-bottom-2"></div> 
  1077.                 <div class="face-bottom-2-over"></div> 
  1078.                 <div class="chin"></div> 
  1079.                 <div class="ear"> 
  1080.                     <!--耳朵--> 
  1081.                     <div class="ear-inner-1"></div> 
  1082.                     <div class="ear-inner-2"></div> 
  1083.                     <div class="ear-over"></div> 
  1084.                     <div class="ear-light"></div> 
  1085.                 </div> 
  1086.                 <div class="eye-left"> 
  1087.                     <!--左眼--> 
  1088.                     <div class="eye-left-inner"></div> 
  1089.                     <div class="eye-left-light1"></div> 
  1090.                     <div class="eye-left-light2"></div> 
  1091.                     <div class="eye-left-eyelash1"></div> 
  1092.                     <div class="eye-left-eyelash2"></div> 
  1093.                     <div class="eye-left-eyelash3"></div> 
  1094.                     <div class="eye-left-eyelash4"></div> 
  1095.                     <div class="eye-left-eyelash5"></div> 
  1096.                 </div> 
  1097.                 <div class="eye-right"> 
  1098.                     <!--右眼--> 
  1099.                     <div class="eye-right-inner"></div> 
  1100.                     <div class="eye-right-light1"></div> 
  1101.                     <div class="eye-right-light2"></div> 
  1102.                     <div class="eye-right-eyelash1"></div> 
  1103.                     <div class="eye-right-eyelash2"></div> 
  1104.                     <div class="eye-right-eyelash3"></div> 
  1105.                     <div class="eye-right-eyelash4"></div> 
  1106.                     <div class="eye-right-eyelash5"></div> 
  1107.                 </div> 
  1108.                 <div class="right-eyebrow"> 
  1109.                     <!--右眼眉毛--> 
  1110.                     <div class="right-eyebrow-over"></div> 
  1111.                 </div> 
  1112.                 <div class="left-eyebrow"> 
  1113.                     <!--左眼眉毛--> 
  1114.                     <div class="left-eyebrow-over"></div> 
  1115.                 </div> 
  1116.                 <div class="nose"> 
  1117.                     <!--鼻子--> 
  1118.                     <div class="nose-tip"></div> 
  1119.                     <div class="nose-over"></div> 
  1120.                 </div> 
  1121.                 <div class="mouth"> 
  1122.                     <!--嘴巴--> 
  1123.                     <div class="mouth-over-1"></div> 
  1124.                     <div class="mouth-over-2"></div> 
  1125.                     <div class="mouth-over-3"></div> 
  1126.                     <div class="mouth-over-4"></div> 
  1127.                     <div class="mouth-tip"></div> 
  1128.                 </div> 
  1129.                 <div class="mouth-inner"></div> 
  1130.                 <div class="name-lable"> 
  1131.                     ASTRO BOY 
  1132.                     <div class="name-lable-light"></div> 
  1133.                 </div> 
  1134.             </div> 
  1135.         </div> 
  1136.     </div> 
  1137. </body> 
  1138. </html> 

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

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

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

责任编辑：王雪燕 来源： 博客园
HTML+CSS阿童木头像
相关推荐
纯 CSS 实现 Beautiful 按钮
近期工作中遇到一个需求——实现一些酷炫的按钮，看到效果图之后，按钮确实漂亮，有弹跳、颜色渐变、扫光、霓虹灯，瞬间激起了我的好奇心，开启了研究实现之路。

2021-10-19 22:23:47

CSSBeautiful按钮
纯CSS实现电梯导航！
通常要实现这样一个交互肯定少不了JS，常规的做法是监听滚动事件，也可以用IntersectionObserver监听元素的滚动位置状态。

2024-08-29 08:13:58

聊聊纯 CSS 实现 Beautiful 按钮
实现这些漂亮的按钮主要利用了一些CSS的属性，主要有animation、backgroundsize、backgroundposition、lineargradient(),下面对这四个内容进行简要概述。

2022-02-21 07:02:16

CSSbeautiful按钮
CSS 实现自适应文本的头像
cqw容器查询宽度（ContainerQueryWidth）占比。1cqw等于容器宽度的1%。假设容器宽度是1000px，则此时1cqw对应的计算值就是10px。

2022-10-24 17:57:06

CSS容器查询
OpenHarmony - 纯CSS实现卡通狮子
在做鸿蒙项目过程中，发现在H5用的CSS的式样在鸿蒙上有些属性不支持，显示效果不一样，所以做了一个卡通狮子帮助更好的在鸿蒙中熟悉CSS的用法。

2022-08-10 16:08:38

鸿蒙CSS
日历图标的纯CSS实现
我们需要用一个外围元素，在这里用的是p元素（或者使用HTML5中的新元素——TIME）。在这个外围元素中我们还需要一个包含着月份的元素。

2013-04-08 14:07:28

CSS
纯CSS实现密室逃脱游戏
“密室逃脱”这个词想必大家并不陌生，在以前的flash时代，这是一类很经典的益智游戏之一。

2020-11-04 13:55:06

CSS密室逃脱前端
HarmonyOS之CSS实现哆啦A梦头像
相信很多人的童年是看哆啦A梦一起长大的吧，小时候是真的希望能有一个自己的蓝胖子，因为蓝胖子无所不能。那么这次试着用纯css来实现一个静态版本的蓝胖子吧。

2022-03-21 15:29:35

CSSHarmonyOS鸿蒙
CSS 实现头像名称首字符自动占位
现代浏览器（Chrome、Firefox）img标签都支持伪元素了，不过只有当图片加载失败的时候才能看到

2022-05-05 18:32:18

浏览器图片CSS
纯CSS方式实现CSS动画的暂停与播放！
使用纯CSS的方法，能否暂停、播放CSS动画看起来不可能，至少很麻烦。本文介绍代码来实现了纯CSS方式实现CSS动画的暂停与播放。

2017-04-27 14:05:59

CSS动画前端
HarmonyOS - 纯CSS实现吹灭蜡烛动画
为了体验鸿蒙应用开发，决定动手实现一个案例——通过Css动画实现吹灭蜡烛动画，看了一下鸿蒙应用开发文档，有js和ets两种开发方式，综合考量了一下，决定采用js方式实现。

2022-08-29 17:39:53

应用开发css动画
纯CSS实现常见的UI效果
在用纯CSS实现这些效果之前，笔者先介绍几个常用的SCSSMixin和一个得力武器，用它们来进行创作将会事半功倍。

2021-01-19 12:16:10

CSS前端UI
纯 CSS 实现标签自动显示超出数量
1.计数累加器可以放在滚动驱动动画中，这样在动画触发时也就相当于计数器生效了，这样就能统计可视区的标签数量了。

2024-05-09 00:00:00

CSS标签JavaScript
纯Css实现旋转的金字塔
css是个神奇的东西，在学习的过程中你会发现绘画和艺术的美,金字塔是世界八大奇迹之一，设计精巧，计算精密，令世人赞叹。那么如何用CSS画一个金字塔呢？

2021-01-25 06:37:06

Css前端CSS 特效
纯HTML+CSS+JS编写的计算器应用
之前偶然看到一个公司的笔试题，题目如下：用HTML5、CSS3、JavaScript，做一个网页，实现如下图形式计算器。

2017-07-18 14:28:04

HTMLCSSJS
纯 CSS 实现拼图游戏
本文，将向大家介绍一种将多个CSS技巧运用到极致的技巧，利用纯CSS实现拼图游戏。

2022-08-04 06:57:54

CSS拼图游戏
纯 CSS 实现的三种扫光效果
由于扫光在文本内部，所以需要将这个渐变作为文本的颜色。文本渐变色，可以用backgrondclip:text来实现，假设HTML是这样的。

2024-07-31 20:38:18

纯 CSS 实现一个计时器
CSS现在可不仅仅只是改一个颜色这么简单，还可以做很多交互，比如做一个功能齐全的计时器？

2023-04-17 09:08:27

CSS计时器
前端: 轻松教你使用纯css实现水波动画
下面就是笔者就来带大家介绍如何用css3实现H5Dooring编辑器中的水波动画。

2022-03-28 08:44:15

css3水波动画
纯CSS实现三列DIV等高布局方法揭秘
DIV等高布局问题相信大家都比较熟悉，解决方法也有不少，比如有的是通过背景图片，实现假象的等高效果；还有的用js实现等等，这里向大家简单介绍一下如何使用纯CSS实现等高！

2010-09-06 15:46:08

CSSDIV
点赞
收藏

51CTO技术栈公众号

业务
速览
在线客服