纯HTML+CSS实现阿童木头像

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

目前创新互联建站已为上千多家的企业提供了网站建设、域名、虚拟空间、网站运营、企业网站设计、花溪网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。

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

先上最终效果图:

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

 
 
  1.     
  2.     纯CSS漫画
  3.     
  4.         * {
  5.             margin: 0;
  6.             padding: 0;
  7.         }
  8.         .outer-circle {
  9.             position: absolute;
  10.             top: 32px;
  11.             left: 44px;
  12.             width: 289px;
  13.             height: 289px;
  14.             border: 4px solid #75BD4F;
  15.             -moz-border-radius: 50%;
  16.             -webkit-border-radius: 50%;
  17.             border-radius: 50%;
  18.         }
  19.         .inner-circle {
  20.             position: relative;
  21.             width: 269px;
  22.             height: 269px;
  23.             border: 10px solid #F5F910;
  24.             -moz-border-radius: 50%;
  25.             -webkit-border-radius: 50%;
  26.             border-radius: 50%;
  27.             background-color: #73BF43;
  28.         }
  29.         .inner-circle div {
  30.             position: absolute;
  31.         }
  32.         .inner-circle-light {
  33.             top: 41px;
  34.             left: 35px;
  35.             -moz-box-shadow: 26px 26px 29px 37px #fff;
  36.             -webkit-box-shadow: 26px 26px 29px 37px #fff;
  37.             box-shadow: 26px 26px 29px 37px #fff;
  38.         }
  39.         .header-top {
  40.             top: 11px;
  41.             right: 2px;
  42.             z-index: 100;
  43.             width: 180px;
  44.             height: 90px;
  45.             -moz-border-radius: 90px 90px 0 0;
  46.             -webkit-border-radius: 90px 90px 0 0;
  47.             border-radius: 90px 90px 0 0;
  48.             background-color: #000;
  49.             -moz-transform: rotate(32deg);
  50.             -ms-transform: rotate(32deg);
  51.             -o-transform: rotate(32deg);
  52.             -webkit-transform: rotate(32deg);
  53.             transform: rotate(32deg);
  54.         }
  55.         .header-left {
  56.             top: -20px;
  57.             left: 37px;
  58.             width: 114px;
  59.             height: 228px;
  60.             -moz-border-radius: 228px 0 0 228px;
  61.             -webkit-border-radius: 228px 0 0 228px;
  62.             border-radius: 228px 0 0 228px;
  63.             background-color: #000;
  64.             -moz-transform: rotate(26deg);
  65.             -ms-transform: rotate(26deg);
  66.             -o-transform: rotate(26deg);
  67.             -webkit-transform: rotate(26deg);
  68.             transform: rotate(26deg);
  69.         }
  70.         .hair-left-1 {
  71.             top: 15px;
  72.             left: 53px;
  73.             z-index: 55;
  74.             width: 85px;
  75.             height: 23px;
  76.             -webkit-border-top-left-radius: 30px 180px;
  77.             border-top-left-radius: 30px 180px;
  78.             -webkit-border-bottom-left-radius: 30px 80px;
  79.             border-bottom-left-radius: 30px 80px;
  80.             background-color: #000;
  81.             -moz-transform: rotate(-74deg) skew(-42deg, 23deg);
  82.             -ms-transform: rotate(-74deg) skew(-42deg, 23deg);
  83.             -o-transform: rotate(-74deg) skew(-42deg, 23deg);
  84.             -webkit-transform: rotate(-74deg) skew(-42deg, 23deg);
  85.             transform: rotate(-74deg) skew(-42deg, 23deg);
  86.         }
  87.         .hair-left-2 {
  88.             top: -20px;
  89.             left: 99px;
  90.             z-index: 60;
  91.             width: 49px;
  92.             height: 37px;
  93.             background-color: #000;
  94.             -moz-transform: rotate(-51deg) skew(-43deg, 0deg);
  95.             -ms-transform: rotate(-51deg) skew(-43deg, 0deg);
  96.             -o-transform: rotate(-51deg) skew(-43deg, 0deg);
  97.             -webkit-transform: rotate(-51deg) skew(-43deg, 0deg);
  98.             transform: rotate(-51deg) skew(-43deg, 0deg);
  99.         }
  100.         .hair-right-1 {
  101.             top: 70px;
  102.             right: 1px;
  103.             z-index: 60;
  104.             width: 81px;
  105.             height: 85px;
  106.             -webkit-border-top-right-radius: 26px 120px;
  107.             border-top-right-radius: 26px 120px;
  108.             background-color: black;
  109.             -moz-transform: rotate(1deg) skew(-51deg, 0deg);
  110.             -ms-transform: rotate(1deg) skew(-51deg, 0deg);
  111.             -o-transform: rotate(1deg) skew(-51deg, 0deg);
  112.             -webkit-transform: rotate(1deg) skew(-51deg, 0deg);
  113.             transform: rotate(1deg) skew(-51deg, 0deg);
  114.         }
  115.         .hair-right-2 {
  116.             width: 60px;
  117.             height: 10px;
  118.             -webkit-border-bottom-left-radius: 100%;
  119.             border-bottom-left-radius: 100%;
  120.             background-color: rgba(0,0,0,0.2);
  121.         }
  122.         .hair-light-1 {
  123.             top: 30px;
  124.             right: 45px;
  125.             z-index: 105;
  126.             width: 57px;
  127.             height: 17px;
  128.             -moz-border-radius: 100%;
  129.             -webkit-border-radius: 100%;
  130.             border-radius: 100%;
  131.             background-color: white;
  132.             -moz-transform: rotate(39deg);
  133.             -ms-transform: rotate(39deg);
  134.             -o-transform: rotate(39deg);
  135.             -webkit-transform: rotate(39deg);
  136.             transform: rotate(39deg);
  137.         }
  138.         .hair-light-1-over {
  139.             top: 32px;
  140.             right: 38px;
  141.             z-index: 105;
  142.             width: 83px;
  143.             height: 21px;
  144.             -moz-border-radius: 100%;
  145.             -webkit-border-radius: 100%;
  146.             border-radius: 100%;
  147.             background-color: black;
  148.             -moz-transform: rotate(41deg);
  149.             -ms-transform: rotate(41deg);
  150.             -o-transform: rotate(41deg);
  151.             -webkit-transform: rotate(41deg);
  152.             transform: rotate(41deg);
  153.         }
  154.         .hair-light-2 {
  155.             top: 16px;
  156.             right: 104px;
  157.             z-index: 105;
  158.             width: 4px;
  159.             height: 2px;
  160.             -moz-border-radius: 2px;
  161.             -webkit-border-radius: 2px;
  162.             border-radius: 2px;
  163.             background-color: white;
  164.             -moz-transform: rotate(10deg);
  165.             -ms-transform: rotate(10deg);
  166.             -o-transform: rotate(10deg);
  167.             -webkit-transform: rotate(10deg);
  168.             transform: rotate(10deg);
  169.         }
  170.         .ear {
  171.             top: 141px;
  172.             right: 36px;
  173.             z-index: 110;
  174.             width: 49px;
  175.             height: 48px;
  176.             border: 2px solid #000;
  177.             border-bottom-width: 1px;
  178.             -moz-border-radius: 50%;
  179.             -webkit-border-radius: 50%;
  180.             border-radius: 50%;
  181.             background-color: #F6C6B0;
  182.             -moz-box-shadow: -4px 0 0 0 #de9876 inset;
  183.             -webkit-box-shadow: -4px 0 0 0 #de9876 inset;
  184.             box-shadow: -4px 0 0 0 #de9876 inset;
  185.             -moz-transform: rotate(56deg) scaleY(1.4);
  186.             -ms-transform: rotate(56deg) scaleY(1.4);
  187.             -o-transform: rotate(56deg) scaleY(1.4);
  188.             -webkit-transform: rotate(56deg) scaleY(1.4);
  189.             transform: rotate(56deg) scaleY(1.4);
  190.         }
  191.         .ear-inner-1 {
  192.             top: 22px;
  193.             left: 22px;
  194.             z-index: 70;
  195.             width: 9px;
  196.             height: 5px;
  197.             border-top: 1px solid #110b00;
  198.             -moz-border-radius: 50%;
  199.             -webkit-border-radius: 50%;
  200.             border-radius: 50%;
  201.             -moz-transform: rotate(-6deg);
  202.             -ms-transform: rotate(-6deg);
  203.             -o-transform: rotate(-6deg);
  204.             -webkit-transform: rotate(-6deg);
  205.             transform: rotate(-6deg);
  206.         }
  207.         .ear-inner-2 {
  208.             top: 19px;
  209.             left: 18px;
  210.             width: 14px;
  211.             height: 7px;
  212.             border-top: 2px solid #110b00;
  213.             -moz-border-radius: 50%;
  214.             -webkit-border-radius: 50%;
  215.             border-radius: 50%;
  216.             -moz-box-shadow: 0px 2px 0 0 #de9876 inset;
  217.             -webkit-box-shadow: 0px 2px 0 0 #de9876 inset;
  218.             box-shadow: 0px 2px 0 0 #de9876 inset;
  219.             -moz-transform: rotate(-91deg);
  220.             -ms-transform: rotate(-91deg);
  221.             -o-transform: rotate(-91deg);
  222.             -webkit-transform: rotate(-91deg);
  223.             transform: rotate(-91deg);
  224.         }
  225.         .ear-light {
  226.             top: 21px;
  227.             right: 34px;
  228.             z-index: 105;
  229.             width: 17px;
  230.             height: 6px;
  231.             -moz-border-radius: 100%;
  232.             -webkit-border-radius: 100%;
  233.             border-radius: 100%;
  234.             background-color: #FFF;
  235.             -moz-transform: rotate(89deg);
  236.             -ms-transform: rotate(89deg);
  237.             -o-transform: rotate(89deg);
  238.             -webkit-transform: rotate(89deg);
  239.             transform: rotate(89deg);
  240.         }
  241.         .ear-over {
  242.             bottom: -44px;
  243.             left: -33px;
  244.             z-index: 55;
  245.             width: 69px;
  246.             height: 59px;
  247.             -moz-border-radius: 50%;
  248.             -webkit-border-radius: 50%;
  249.             border-radius: 50%;
  250.             background-color: #f6c6b0;
  251.             -moz-transform: rotate(26deg);
  252.             -ms-transform: rotate(26deg);
  253.             -o-transform: rotate(26deg);
  254.             -webkit-transform: rotate(26deg);
  255.             transform: rotate(26deg);
  256.         }
  257.         .face-main {
  258.             top: 30px;
  259.             left: 35px;
  260.             z-index: 50;
  261.             width: 180px;
  262.             height: 188px;
  263.             -moz-border-radius: 90px;
  264.             -webkit-border-radius: 90px;
  265.             border-radius: 90px;
  266.             background-color: #F6C6B0;
  267.             -moz-box-shadow: 3px -3px 0 0 #fff inset;
  268.             -webkit-box-shadow: 3px -3px 0 0 #fff inset;
  269.             box-shadow: 3px -3px 0 0 #fff inset;
  270.         }
  271.         .face-top {
  272.             top: 61px;
  273.             right: 75px;
  274.             z-index: 105;
  275.             width: 111px;
  276.             height: 46px;
  277.             -moz-border-radius: 50% 50% 26px 0;
  278.             -webkit-border-radius: 50% 50% 26px 0;
  279.             border-radius: 50% 50% 26px 0;
  280.             background-color: #f6c6b0;
  281.             -moz-transform: rotate(37deg);
  282.             -ms-transform: rotate(37deg);
  283.             -o-transform: rotate(37deg);
  284.             -webkit-transform: rotate(37deg);
  285.             transform: rotate(37deg);
  286.         }
  287.         .face-right-1 {
  288.             top: 115px;
  289.             right: 71px;
  290.             z-index: 105;
  291.             width: 68px;
  292.             height: 62px;
  293.             -moz-border-radius: 100% 0 0;
  294.             -webkit-border-radius: 100% 0 0;
  295.             border-radius: 100% 0 0;
  296.             background-color: #f6c6b0;
  297.             -moz-transform: rotate(99deg);
  298.             -ms-transform: rotate(99deg);
  299.             -o-transform: rotate(99deg);
  300.             -webkit-transform: rotate(99deg);
  301.             transform: rotate(99deg);
  302.         }
  303.         .face-bottom-1 {
  304.             bottom: 42px;
  305.             left: 45px;
  306.             z-index: 40;
  307.             width: 72px;
  308.             height: 52px;
  309.             -webkit-border-bottom-left-radius: 70px 40px;
  310.             -webkit-border-top-left-radius: 14px 11px;
  311.             border-top-left-radius: 14px 11px;
  312.             border-bottom-left-radius: 70px 40px;
  313.             background-color: #000;
  314.         }
  315.         .face-bottom-1-over {
  316.             bottom: 45px;
  317.             left: 48px;
  318.             z-index: 55;
  319.             width: 69px;
  320.             height: 47px;
  321.             -webkit-border-bottom-left-radius: 70px 40px;
  322.             -webkit-border-top-left-radius: 14px 11px;
  323.             border-top-left-radius: 14px 11px;
  324.             border-bottom-left-radius: 70px 40px;
  325.             background-color: #f6c6b0;
  326.             -moz-box-shadow: 3px 0px 0 0 #fff inset;
  327.             -webkit-box-shadow: 3px 0px 0 0 #fff inset;
  328.             box-shadow: 3px 0px 0 0 #fff inset;
  329.         }
  330.         .face-bottom-2 {
  331.             right: 97px;
  332.             bottom: 44px;
  333.             z-index: 55;
  334.             width: 43px;
  335.             height: 31px;
  336.             -webkit-border-bottom-right-radius: 70px 40px;
  337.             border-bottom-right-radius: 70px 40px;
  338.             background-color: #000;
  339.             -moz-transform: rotate(-4deg) skew(-49deg, 0deg);
  340.             -ms-transform: rotate(-4deg) skew(-49deg, 0deg);
  341.             -o-transform: rotate(-4deg) skew(-49deg, 0deg);
  342.             -webkit-transform: rotate(-4deg) skew(-49deg, 0deg);
  343.             transform: rotate(-4deg) skew(-49deg, 0deg);
  344.         }
  345.         .face-bottom-2-over {
  346.             right: 99px;
  347.             bottom: 46px;
  348.             z-index: 56;
  349.             width: 43px;
  350.             height: 31px;
  351.             -webkit-border-bottom-right-radius: 70px 40px;
  352.             border-bottom-right-radius: 70px 40px;
  353.             background-color: #f6c6b0;
  354.             -moz-box-shadow: -6px 2px 0 0 #de9876 inset;
  355.             -webkit-box-shadow: -6px 2px 0 0 #de9876 inset;
  356.             box-shadow: -6px 2px 0 0 #de9876 inset;
  357.             -moz-transform: rotate(-3deg) skew(-49deg, 0deg);
  358.             -ms-transform: rotate(-3deg) skew(-49deg, 0deg);
  359.             -o-transform: rotate

    文章题目:纯HTML+CSS实现阿童木头像
    分享地址:http://www.mswzjz.cn/qtweb/news33/407533.html

    攀枝花网站建设、攀枝花网站运维推广公司-贝锐智能,是专注品牌与效果的网络营销公司;服务项目有等

    广告

    声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 贝锐智能