纯HTML+CSS实现阿童木头像_.NET_编程开发_程序员俱乐部

中国优秀的程序员网站程序员频道CXYCLUB技术地图
最新资讯 | 百度新闻 | GOOGLE地图 | RSS订阅 | 更多
热搜：
更多>>
 
您所在的位置： 程序员俱乐部 > 编程开发 > .NET > 纯HTML+CSS实现阿童木头像

纯HTML+CSS实现阿童木头像

 2015/4/24 2:51:42  06213142  程序员俱乐部  我要评论(0)
  • 摘要：他有十万马力，能上天能入地；他分辨善恶，是勇敢正义化身；1963年，他登上荧幕，在日本创下了未曾有过的高收视率……他叫阿童木，一个纯真、善良、勇敢的机器娃娃。“阿童木之父”手冢治虫曾说，将阿童木生日定在2003年4月7日。你的童年记忆中，有这个发型尖尖的少年吗？正好最近学习CSS3，就准备练练手，画一个阿童木的头像。实用性不是很大，主要为练习HTML+CSS，也是为了打发时间和磨练耐心。先上最终效果图：在里面主要用的了CSS中的几个属性
  • 标签：实现

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

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

　　先上最终效果图：

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

class="code_img_closed" src="/Upload/Images/2015042402/0015B68B3C38AA5B.gif" alt="" />logs_code_hide('70a7c346-9da9-4abe-a888-907ef5b06baf',event)" src="/Upload/Images/2015042402/2B1B950FA3DF188F.gif" alt="" /> 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>纯CSS漫画</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .outer-circle {
            position: absolute;
            top: 32px;
            left: 44px;
            width: 289px;
            height: 289px;
            border: 4px solid #75BD4F;
            -moz-border-radius: 50%;
            -webkit-border-radius: 50%;
            border-radius: 50%;
        }

        .inner-circle {
            position: relative;
            width: 269px;
            height: 269px;
            border: 10px solid #F5F910;
            -moz-border-radius: 50%;
            -webkit-border-radius: 50%;
            border-radius: 50%;
            background-color: #73BF43;
        }

        .inner-circle div {
            position: absolute;
        }

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

        .header-top {
            top: 11px;
            right: 2px;
            z-index: 100;
            width: 180px;
            height: 90px;
            -moz-border-radius: 90px 90px 0 0;
            -webkit-border-radius: 90px 90px 0 0;
            border-radius: 90px 90px 0 0;
            background-color: #000;
            -moz-transform: rotate(32deg);
            -ms-transform: rotate(32deg);
            -o-transform: rotate(32deg);
            -webkit-transform: rotate(32deg);
            transform: rotate(32deg);
        }

        .header-left {
            top: -20px;
            left: 37px;
            width: 114px;
            height: 228px;
            -moz-border-radius: 228px 0 0 228px;
            -webkit-border-radius: 228px 0 0 228px;
            border-radius: 228px 0 0 228px;
            background-color: #000;
            -moz-transform: rotate(26deg);
            -ms-transform: rotate(26deg);
            -o-transform: rotate(26deg);
            -webkit-transform: rotate(26deg);
            transform: rotate(26deg);
        }

        .hair-left-1 {
            top: 15px;
            left: 53px;
            z-index: 55;
            width: 85px;
            height: 23px;
            -webkit-border-top-left-radius: 30px 180px;
            border-top-left-radius: 30px 180px;
            -webkit-border-bottom-left-radius: 30px 80px;
            border-bottom-left-radius: 30px 80px;
            background-color: #000;
            -moz-transform: rotate(-74deg) skew(-42deg, 23deg);
            -ms-transform: rotate(-74deg) skew(-42deg, 23deg);
            -o-transform: rotate(-74deg) skew(-42deg, 23deg);
            -webkit-transform: rotate(-74deg) skew(-42deg, 23deg);
            transform: rotate(-74deg) skew(-42deg, 23deg);
        }

        .hair-left-2 {
            top: -20px;
            left: 99px;
            z-index: 60;
            width: 49px;
            height: 37px;
            background-color: #000;
            -moz-transform: rotate(-51deg) skew(-43deg, 0deg);
            -ms-transform: rotate(-51deg) skew(-43deg, 0deg);
            -o-transform: rotate(-51deg) skew(-43deg, 0deg);
            -webkit-transform: rotate(-51deg) skew(-43deg, 0deg);
            transform: rotate(-51deg) skew(-43deg, 0deg);
        }

        .hair-right-1 {
            top: 70px;
            right: 1px;
            z-index: 60;
            width: 81px;
            height: 85px;
            -webkit-border-top-right-radius: 26px 120px;
            border-top-right-radius: 26px 120px;
            background-color: black;
            -moz-transform: rotate(1deg) skew(-51deg, 0deg);
            -ms-transform: rotate(1deg) skew(-51deg, 0deg);
            -o-transform: rotate(1deg) skew(-51deg, 0deg);
            -webkit-transform: rotate(1deg) skew(-51deg, 0deg);
            transform: rotate(1deg) skew(-51deg, 0deg);
        }

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

        .hair-light-1 {
            top: 30px;
            right: 45px;
            z-index: 105;
            width: 57px;
            height: 17px;
            -moz-border-radius: 100%;
            -webkit-border-radius: 100%;
            border-radius: 100%;
            background-color: white;
            -moz-transform: rotate(39deg);
            -ms-transform: rotate(39deg);
            -o-transform: rotate(39deg);
            -webkit-transform: rotate(39deg);
            transform: rotate(39deg);
        }

        .hair-light-1-over {
            top: 32px;
            right: 38px;
            z-index: 105;
            width: 83px;
            height: 21px;
            -moz-border-radius: 100%;
            -webkit-border-radius: 100%;
            border-radius: 100%;
            background-color: black;
            -moz-transform: rotate(41deg);
            -ms-transform: rotate(41deg);
            -o-transform: rotate(41deg);
            -webkit-transform: rotate(41deg);
            transform: rotate(41deg);
        }

        .hair-light-2 {
            top: 16px;
            right: 104px;
            z-index: 105;
            width: 4px;
            height: 2px;
            -moz-border-radius: 2px;
            -webkit-border-radius: 2px;
            border-radius: 2px;
            background-color: white;
            -moz-transform: rotate(10deg);
            -ms-transform: rotate(10deg);
            -o-transform: rotate(10deg);
            -webkit-transform: rotate(10deg);
            transform: rotate(10deg);
        }

        .ear {
            top: 141px;
            right: 36px;
            z-index: 110;
            width: 49px;
            height: 48px;
            border: 2px solid #000;
            border-bottom-width: 1px;
            -moz-border-radius: 50%;
            -webkit-border-radius: 50%;
            border-radius: 50%;
            background-color: #F6C6B0;
            -moz-box-shadow: -4px 0 0 0 #de9876 inset;
            -webkit-box-shadow: -4px 0 0 0 #de9876 inset;
            box-shadow: -4px 0 0 0 #de9876 inset;
            -moz-transform: rotate(56deg) scaleY(1.4);
            -ms-transform: rotate(56deg) scaleY(1.4);
            -o-transform: rotate(56deg) scaleY(1.4);
            -webkit-transform: rotate(56deg) scaleY(1.4);
            transform: rotate(56deg) scaleY(1.4);
        }

        .ear-inner-1 {
            top: 22px;
            left: 22px;
            z-index: 70;
            width: 9px;
            height: 5px;
            border-top: 1px solid #110b00;
            -moz-border-radius: 50%;
            -webkit-border-radius: 50%;
            border-radius: 50%;
            -moz-transform: rotate(-6deg);
            -ms-transform: rotate(-6deg);
            -o-transform: rotate(-6deg);
            -webkit-transform: rotate(-6deg);
            transform: rotate(-6deg);
        }

        .ear-inner-2 {
            top: 19px;
            left: 18px;
            width: 14px;
            height: 7px;
            border-top: 2px solid #110b00;
            -moz-border-radius: 50%;
            -webkit-border-radius: 50%;
            border-radius: 50%;
            -moz-box-shadow: 0px 2px 0 0 #de9876 inset;
            -webkit-box-shadow: 0px 2px 0 0 #de9876 inset;
            box-shadow: 0px 2px 0 0 #de9876 inset;
            -moz-transform: rotate(-91deg);
            -ms-transform: rotate(-91deg);
            -o-transform: rotate(-91deg);
            -webkit-transform: rotate(-91deg);
            transform: rotate(-91deg);
        }

        .ear-light {
            top: 21px;
            right: 34px;
            z-index: 105;
            width: 17px;
            height: 6px;
            -moz-border-radius: 100%;
            -webkit-border-radius: 100%;
            border-radius: 100%;
            background-color: #FFF;
            -moz-transform: rotate(89deg);
            -ms-transform: rotate(89deg);
            -o-transform: rotate(89deg);
            -webkit-transform: rotate(89deg);
            transform: rotate(89deg);
        }

        .ear-over {
            bottom: -44px;
            left: -33px;
            z-index: 55;
            width: 69px;
            height: 59px;
            -moz-border-radius: 50%;
            -webkit-border-radius: 50%;
            border-radius: 50%;
            background-color: #f6c6b0;
            -moz-transform: rotate(26deg);
            -ms-transform: rotate(26deg);
            -o-transform: rotate(26deg);
            -webkit-transform: rotate(26deg);
            transform: rotate(26deg);
        }

        .face-main {
            top: 30px;
            left: 35px;
            z-index: 50;
            width: 180px;
            height: 188px;
            -moz-border-radius: 90px;
            -webkit-border-radius: 90px;
            border-radius: 90px;
            background-color: #F6C6B0;
            -moz-box-shadow: 3px -3px 0 0 #fff inset;
            -webkit-box-shadow: 3px -3px 0 0 #fff inset;
            box-shadow: 3px -3px 0 0 #fff inset;
        }

        .face-top {
            top: 61px;
            right: 75px;
            z-index: 105;
            width: 111px;
            height: 46px;
            -moz-border-radius: 50% 50% 26px 0;
            -webkit-border-radius: 50% 50% 26px 0;
            border-radius: 50% 50% 26px 0;
            background-color: #f6c6b0;
            -moz-transform: rotate(37deg);
            -ms-transform: rotate(37deg);
            -o-transform: rotate(37deg);
            -webkit-transform: rotate(37deg);
            transform: rotate(37deg);
        }

        .face-right-1 {
            top: 115px;
            right: 71px;
            z-index: 105;
            width: 68px;
            height: 62px;
            -moz-border-radius: 100% 0 0;
            -webkit-border-radius: 100% 0 0;
            border-radius: 100% 0 0;
            background-color: #f6c6b0;
            -moz-transform: rotate(99deg);
            -ms-transform: rotate(99deg);
            -o-transform: rotate(99deg);
            -webkit-transform: rotate(99deg);
            transform: rotate(99deg);
        }

        .face-bottom-1 {
            bottom: 42px;
            left: 45px;
            z-index: 40;
            width: 72px;
            height: 52px;
            -webkit-border-bottom-left-radius: 70px 40px;
            -webkit-border-top-left-radius: 14px 11px;
            border-top-left-radius: 14px 11px;
            border-bottom-left-radius: 70px 40px;
            background-color: #000;
        }

        .face-bottom-1-over {
            bottom: 45px;
            left: 48px;
            z-index: 55;
            width: 69px;
            height: 47px;
            -webkit-border-bottom-left-radius: 70px 40px;
            -webkit-border-top-left-radius: 14px 11px;
            border-top-left-radius: 14px 11px;
            border-bottom-left-radius: 70px 40px;
            background-color: #f6c6b0;
            -moz-box-shadow: 3px 0px 0 0 #fff inset;
            -webkit-box-shadow: 3px 0px 0 0 #fff inset;
            box-shadow: 3px 0px 0 0 #fff inset;
        }

        .face-bottom-2 {
            right: 97px;
            bottom: 44px;
            z-index: 55;
            width: 43px;
            height: 31px;
            -webkit-border-bottom-right-radius: 70px 40px;
            border-bottom-right-radius: 70px 40px;
            background-color: #000;
            -moz-transform: rotate(-4deg) skew(-49deg, 0deg);
            -ms-transform: rotate(-4deg) skew(-49deg, 0deg);
            -o-transform: rotate(-4deg) skew(-49deg, 0deg);
            -webkit-transform: rotate(-4deg) skew(-49deg, 0deg);
            transform: rotate(-4deg) skew(-49deg, 0deg);
        }

        .face-bottom-2-over {
            right: 99px;
            bottom: 46px;
            z-index: 56;
            width: 43px;
            height: 31px;
            -webkit-border-bottom-right-radius: 70px 40px;
            border-bottom-right-radius: 70px 40px;
            background-color: #f6c6b0;
            -moz-box-shadow: -6px 2px 0 0 #de9876 inset;
            -webkit-box-shadow: -6px 2px 0 0 #de9876 inset;
            box-shadow: -6px 2px 0 0 #de9876 inset;
            -moz-transform: rotate(-3deg) skew(-49deg, 0deg);
            -ms-transform: rotate(-3deg) skew(-49deg, 0deg);
            -o-transform: rotate(-3deg) skew(-49deg, 0deg);
            -webkit-transform: rotate(-3deg) skew(-49deg, 0deg);
            transform: rotate(-3deg) skew(-49deg, 0deg);
        }

        .face-light-1 {
            right: 127px;
            bottom: 95px;
            z-index: 150;
            width: 6px;
            height: 6px;
            -moz-border-radius: 50%;
            -webkit-border-radius: 50%;
            border-radius: 50%;
            background-color: #fff;
        }

        .face-light-2 {
            bottom: 82px;
            left: 58px;
            z-index: 150;
            width: 4px;
            height: 4px;
            -moz-border-radius: 50%;
            -webkit-border-radius: 50%;
            border-radius: 50%;
            background-color: #fff;
        }

        .chin {
            bottom: 39px;
            left: 111px;
            z-index: 70;
            width: 11px;
            height: 12px;
            border: 2px solid #000;
            border-top-color: #f6c6b0;
            border-left-color: #f6c6b0;
            -webkit-border-bottom-right-radius: 6px;
            border-bottom-right-radius: 6px;
            background-color: #f6c6b0;
            -moz-transform: rotate(34deg) skew(-9deg, 0deg);
            -ms-transform: rotate(34deg) skew(-9deg, 0deg);
            -o-transform: rotate(34deg) skew(-9deg, 0deg);
            -webkit-transform: rotate(34deg) skew(-9deg, 0deg);
            transform: rotate(34deg) skew(-9deg, 0deg);
        }

        .eye-right {
            top: 97px;
            left: 103px;
            z-index: 110;
            width: 39px;
            height: 67px;
            border: 1px solid #000;
            border-top-width: 2px;
            -moz-border-radius: 24px 43px 34px 28px / 34px 71px 34px 81px;
            -webkit-border-radius: 24px 43px 34px 28px / 34px 71px 34px 81px;
            border-radius: 24px 43px 34px 28px / 34px 71px 34px 81px;
            background-color: #F8FAF7;
            -moz-box-shadow: 0px 5px 0 0 #d5d9e2 inset;
            -webkit-box-shadow: 0px 5px 0 0 #d5d9e2 inset;
            box-shadow: 0px 5px 0 0 #d5d9e2 inset;
        }

        .eye-right-inner {
            right: 0;
            bottom: 3px;
            z-index: 115;
            width: 30px;
            height: 52px;
            -moz-border-radius: 32px 43px 28px 48px / 47px 55px 45px 75px;
            -webkit-border-radius: 32px 43px 28px 48px / 47px 55px 45px 75px;
            border-radius: 32px 43px 28px 48px / 47px 55px 45px 75px;
            background-color: #000;
        }

        .eye-right-light1 {
            top: 19px;
            right: 0;
            z-index: 120;
            width: 19px;
            height: 10px;
            -moz-border-radius: 100%;
            -webkit-border-radius: 100%;
            border-radius: 100%;
            background-color: #FFF;
            -moz-animation: eye-flash 0.2s linear 0.1s infinite normal;
            -o-animation: eye-flash 0.2s linear 0.1s infinite normal;
            -webkit-animation: eye-flash 0.2s linear 0.1s infinite normal;
            -moz-transform: rotate(41deg);
            -ms-transform: rotate(41deg);
            -o-transform: rotate(41deg);
            -webkit-transform: rotate(41deg);
            transform: rotate(41deg);
            animation: eye-flash 0.2s linear 0.1s infinite normal;
        }

        @-webkit-keyframes eye-flash {
            0% {
                top: 19px;
            }

            100% {
                top: 21px;
            }
        }

        @-moz-keyframes eye-flash {
            0% {
                top: 19px;
            }

            100% {
                top: 20px;
            }
        }

        @-ms-keyframes eye-flash {
            0% {
                top: 19px;
            }

            100% {
                top: 20px;
            }
        }

        @keyframes eye-flash {
            0% {
                top: 19px;
            }

            100% {
                top: 20px;
            }
        }

        .eye-right-light2 {
            bottom: 8px;
            left: 9px;
            z-index: 120;
            width: 14px;
            height: 7px;
            -webkit-border-bottom-right-radius: 100%;
            border-bottom-right-radius: 100%;
            background-color: #FFF;
            -moz-transform: rotate(-39deg);
            -ms-transform: rotate(-39deg);
            -o-transform: rotate(-39deg);
            -webkit-transform: rotate(-39deg);
            transform: rotate(-39deg);
        }

        .eye-right-eyelash1 {
            top: 9px;
            left: -3px;
            width: 2px;
            height: 4px;
            background-color: #000;
            -moz-transform: rotate(-54deg);
            -ms-transform: rotate(-54deg);
            -o-transform: rotate(-54deg);
            -webkit-transform: rotate(-54deg);
            transform: rotate(-54deg);
        }

        .eye-right-eyelash2 {
            top: 1px;
            left: 1px;
            width: 2px;
            height: 5px;
            background-color: #000;
            -moz-transform: rotate(-33deg);
            -ms-transform: rotate(-33deg);
            -o-transform: rotate(-33deg);
            -webkit-transform: rotate(-33deg);
            transform: rotate(-33deg);
        }

        .eye-right-eyelash3 {
            top: -8px;
            left: 8px;
            width: 2px;
            height: 7px;
            background-color: #000;
            -moz-transform: rotate(-21deg);
            -ms-transform: rotate(-21deg);
            -o-transform: rotate(-21deg);
            -webkit-transform: rotate(-21deg);
            transform: rotate(-21deg);
        }

        .eye-right-eyelash4 {
            top: -6px;
            left: 21px;
            width: 2px;
            height: 6px;
            background-color: #000;
            -moz-transform: rotate(11deg);
            -ms-transform: rotate(11deg);
            -o-transform: rotate(11deg);
            -webkit-transform: rotate(11deg);
            transform: rotate(11deg);
        }

        .eye-right-eyelash5 {
            top: 1px;
            right: 8px;
            width: 2px;
            height: 6px;
            background-color: #000;
            -moz-transform: rotate(14deg);
            -ms-transform: rotate(14deg);
            -o-transform: rotate(14deg);
            -webkit-transform: rotate(14deg);
            transform: rotate(14deg);
        }

        .eye-left {
            top: 114px;
            left: 45px;
            z-index: 110;
            width: 19px;
            height: 63px;
            border: 1px solid #000;
            border-top-width: 2px;
            -moz-border-radius: 29px 28px 33px / 97px 111px 40px 90px;
            -webkit-border-radius: 29px 28px 33px / 97px 111px 40px 90px;
            border-radius: 29px 28px 33px / 97px 111px 40px 90px;
            background-color: #F8FAF7;
            -moz-box-shadow: 0px 6px 0 0 #d5d9e2 inset;
            -webkit-box-shadow: 0px 6px 0 0 #d5d9e2 inset;
            box-shadow: 0px 6px 0 0 #d5d9e2 inset;
            -moz-transform: rotate(-9deg);
            -ms-transform: rotate(-9deg);
            -o-transform: rotate(-9deg);
            -webkit-transform: rotate(-9deg);
            transform: rotate(-9deg);
        }

        .eye-left-inner {
            right: 0;
            bottom: 1px;
            z-index: 115;
            width: 15px;
            height: 46px;
            -moz-border-radius: 49px 44px 29px 58px / 143px 83px 45px 122px;
            -webkit-border-radius: 49px 44px 29px 58px / 143px 83px 45px 122px;
            border-radius: 49px 44px 29px 58px / 143px 83px 45px 122px;
            background-color: #000;
        }

        .eye-left-light1 {
            top: 19px;
            right: 1px;
            z-index: 120;
            width: 7px;
            height: 18px;
            -moz-border-radius: 100%;
            -webkit-border-radius: 100%;
            border-radius: 100%;
            background-color: #FFF;
            -moz-animation: eye-flash 0.2s linear 0.1s infinite normal;
            -o-animation: eye-flash 0.2s linear 0.1s infinite normal;
            -webkit-animation: eye-flash 0.2s linear 0.1s infinite normal;
            -moz-transform: rotate(-9deg);
            -ms-transform: rotate(-9deg);
            -o-transform: rotate(-9deg);
            -webkit-transform: rotate(-9deg);
            transform: rotate(-9deg);
            animation: eye-flash 0.2s linear 0.1s infinite normal;
        }

        .eye-left-light2 {
            bottom: 6px;
            left: 4px;
            z-index: 120;
            width: 11px;
            height: 4px;
            -webkit-border-bottom-right-radius: 100%;
            border-bottom-right-radius: 100%;
            background-color: #FFF;
            -moz-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
        }

        .eye-left-eyelash1 {
            top: 7px;
            left: -1px;
            width: 2px;
            height: 4px;
            background-color: #000;
            -moz-transform: rotate(-49deg);
            -ms-transform: rotate(-49deg);
            -o-transform: rotate(-49deg);
            -webkit-transform: rotate(-49deg);
            transform: rotate(-49deg);
        }

        .eye-left-eyelash2 {
            top: -1px;
            left: 2px;
            width: 2px;
            height: 5px;
            background-color: #000;
            -moz-transform: rotate(-28deg);
            -ms-transform: rotate(-28deg);
            -o-transform: rotate(-28deg);
            -webkit-transform: rotate(-28deg);
            transform: rotate(-28deg);
        }

        .eye-left-eyelash3 {
            top: -6px;
            left: 7px;
            width: 2px;
            height: 5px;
            background-color: #000;
            -moz-transform: rotate(-4deg);
            -ms-transform: rotate(-4deg);
            -o-transform: rotate(-4deg);
            -webkit-transform: rotate(-4deg);
            transform: rotate(-4deg);
        }

        .eye-left-eyelash4 {
            top: -4px;
            left: 13px;
            width: 2px;
            height: 4px;
            background-color: #000;
            -moz-transform: rotate(25deg);
            -ms-transform: rotate(25deg);
            -o-transform: rotate(25deg);
            -webkit-transform: rotate(25deg);
            transform: rotate(25deg);
        }

        .eye-left-eyelash5 {
            top: 3px;
            right: 0;
            width: 2px;
            height: 4px;
            background-color: #000;
            -moz-transform: rotate(41deg);
            -ms-transform: rotate(41deg);
            -o-transform: rotate(41deg);
            -webkit-transform: rotate(41deg);
            transform: rotate(41deg);
        }

        .right-eyebrow {
            top: 68px;
            left: 92px;
            z-index: 110;
            width: 66px;
            height: 36px;
            border: 2px solid #000;
            border-width: 2px 1px 0px 1px;
            -moz-border-radius: 45px 51px 0 0;
            -webkit-border-radius: 45px 51px 0 0;
            border-radius: 45px 51px 0 0;
            background-color: transparent;
            -moz-transform: skew(-6deg, 16deg);
            -ms-transform: skew(-6deg, 16deg);
            -o-transform: skew(-6deg, 16deg);
            -webkit-transform: skew(-6deg, 16deg);
            transform: skew(-6deg, 16deg);
        }

        .right-eyebrow-over {
            top: 21px;
            right: -5px;
            z-index: 115;
            width: 13px;
            height: 20px;
            background-color: #f6c6b0;
        }

        .left-eyebrow {
            top: 89px;
            left: 36px;
            z-index: 100;
            width: 30px;
            height: 68px;
            border: 2px solid #000;
            border-width: 2px 1px 0px 1px;
            -moz-border-radius: 100%;
            -webkit-border-radius: 100%;
            border-radius: 100%;
            background-color: transparent;
            -moz-transform: rotate(-2deg);
            -ms-transform: rotate(-2deg);
            -o-transform: rotate(-2deg);
            -webkit-transform: rotate(-2deg);
            transform: rotate(-2deg);
        }

        .left-eyebrow-over {
            top: 17px;
            right: -9px;
            z-index: 105;
            width: 39px;
            height: 55px;
            -moz-border-radius: 21px 12px 0 17px;
            -webkit-border-radius: 21px 12px 0 17px;
            border-radius: 21px 12px 0 17px;
            background-color: #f6c6b0;
            -moz-transform: rotate(-13deg);
            -ms-transform: rotate(-13deg);
            -o-transform: rotate(-13deg);
            -webkit-transform: rotate(-13deg);
            transform: rotate(-13deg);
        }

        .nose {
            top: 172px;
            left: 63px;
            z-index: 115;
            width: 21px;
            height: 16px;
            border: 2px solid #000;
            -moz-border-radius: 50%;
            -webkit-border-radius: 50%;
            border-radius: 50%;
            -moz-box-shadow: 3px 1px 0 0 #fff inset;
            -webkit-box-shadow: 3px 1px 0 0 #fff inset;
            box-shadow: 3px 1px 0 0 #fff inset;
        }

        .nose-over {
            top: -1px;
            right: -11px;
            z-index: 115;
            width: 19px;
            height: 14px;
            background-color: #f6c6b0;
            -moz-transform: rotate(31deg);
            -ms-transform: rotate(31deg);
            -o-transform: rotate(31deg);
            -webkit-transform: rotate(31deg);
            transform: rotate(31deg);
        }

        .nose-tip {
            top: -7px;
            left: 13px;
            width: 2px;
            height: 6px;
            background-color: #000;
            -moz-transform: rotate(14deg);
            -ms-transform: rotate(14deg);
            -o-transform: rotate(14deg);
            -webkit-transform: rotate(14deg);
            transform: rotate(14deg);
        }

        .mouth {
            bottom: 61px;
            left: 72px;
            z-index: 110;
            width: 46px;
            height: 47px;
            border: 2px solid #000;
            border-width: 0 1px 2px 0;
            -moz-border-radius: 32px 29px 23px 48px / 47px 82px 52px 75px;
            -webkit-border-radius: 32px 29px 23px 48px / 47px 82px 52px 75px;
            border-radius: 32px 29px 23px 48px / 47px 82px 52px 75px;
            background-color: #92222E;
            -moz-transform: rotate(1deg) skew(0deg, 39deg);
            -ms-transform: rotate(1deg) skew(0deg, 39deg);
            -o-transform: rotate(1deg) skew(0deg, 39deg);
            -webkit-transform: rotate(1deg) skew(0deg, 39deg);
            transform: rotate(1deg) skew(0deg, 39deg);
        }

        .mouth-over-1 {
            bottom: 0;
            left: -4px;
            z-index: 115;
            width: 37px;
            height: 58px;
            border-right: 1px solid #000;
            -moz-border-radius: 38px 13px 10px 77px / 47px 82px 52px 73px;
            -webkit-border-radius: 38px 13px 10px 77px / 47px 82px 52px 73px;
            border-radius: 38px 13px 10px 77px / 47px 82px 52px 73px;
            background-color: #f6c6b0;
            -moz-transform: rotate(38deg) skew(0deg, 6deg);
            -ms-transform: rotate(38deg) skew(0deg, 6deg);
            -o-transform: rotate(38deg) skew(0deg, 6deg);
            -webkit-transform: rotate(38deg) skew(0deg, 6deg);
            transform: rotate(38deg) skew(0deg, 6deg);
        }

        .mouth-over-2 {
            bottom: 38px;
            left: 30px;
            z-index: 150;
            width: 7px;
            height: 19px;
            background-color: #f6c6b0;
            -moz-transform: rotate(-233deg);
            -ms-transform: rotate(-233deg);
            -o-transform: rotate(-233deg);
            -webkit-transform: rotate(-233deg);
            transform: rotate(-233deg);
        }

        .mouth-over-3 {
            bottom: -9px;
            left: 11px;
            z-index: 115;
            width: 27px;
            height: 9px;
            border-top: 2px solid #000;
            -moz-border-radius: 100%;
            -webkit-border-radius: 100%;
            border-radius: 100%;
            background-color: #f6c6b0;
            -moz-transform: rotate(-4deg);
            -ms-transform: rotate(-4deg);
            -o-transform: rotate(-4deg);
            -webkit-transform: rotate(-4deg);
            transform: rotate(-4deg);
        }

        .mouth-over-4 {
            bottom: -6px;
            left: -1px;
            z-index: 150;
            width: 7px;
            height: 15px;
            background-color: #f6c6b0;
            -moz-transform: rotate(-226deg);
            -ms-transform: rotate(-226deg);
            -o-transform: rotate(-226deg);
            -webkit-transform: rotate(-226deg);
            transform: rotate(-226deg);
        }

        .mouth-tip {
            bottom: 39px;
            left: 41px;
            z-index: 120;
            width: 2px;
            height: 3px;
            background-color: #000;
            -moz-transform: rotate(-51deg);
            -ms-transform: rotate(-51deg);
            -o-transform: rotate(-51deg);
            -webkit-transform: rotate(-51deg);
            transform: rotate(-51deg);
        }

        .mouth-inner {
            bottom: 50px;
            left: 107px;
            z-index: 115;
            width: 10px;
            height: 18px;
            -moz-border-radius: 10px 0 4px 6px / 8px 2px 8px 9px;
            -webkit-border-radius: 10px 0 4px 6px / 8px 2px 8px 9px;
            border-radius: 10px 0 4px 6px / 8px 2px 8px 9px;
            background-color: #ed675c;
            -moz-transform: rotate(6deg);
            -ms-transform: rotate(6deg);
            -o-transform: rotate(6deg);
            -webkit-transform: rotate(6deg);
            transform: rotate(6deg);
        }

        .name-lable {
            bottom: -9px;
            left: -8px;
            z-index: 150;
            width: 280px;
            color: #005aa9;
            text-align: center;
            font-weight: bold;
            font-style: italic;
            font-size: 50px;
            font-family: Times New Roman;
        }

        .name-lable-light {
            top: 30px;
            width: 100%;
            height: 0;
            -moz-box-shadow: 0 0 3px 3px #fff;
            -webkit-box-shadow: 0 0 3px 3px #fff;
            box-shadow: 0 0 3px 3px #fff;
        }

        @-webkit-keyframes input-flash {
            0% {
                border-color: #ccc;
                -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
                -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
                box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
            }

            100% {
                border-color: rgba(82,168,236,0.8);
                -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6);
                -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6);
                box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6);
            }
        }

        @-moz-keyframes input-flash {
            0% {
                border-color: #ccc;
                -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
                -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
                box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
            }

            100% {
                border-color: rgba(82,168,236,0.8);
                -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6);
                -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6);
                box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6);
            }
        }

        @-ms-keyframes input-flash {
            0% {
                border-color: #ccc;
                -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
                -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
                box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
            }

            100% {
                border-color: rgba(82,168,236,0.8);
                -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6);
                -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6);
                box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6);
            }
        }

        @keyframes input-flash {
            0% {
                border-color: #ccc;
                -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
                -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
                box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
            }

            100% {
                border-color: rgba(82,168,236,0.8);
                -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6);
                -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6);
                box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6);
            }
        }
    </style>
</head>
<body>
    <div style="width: 400px; height: 359px; position: relative; margin: 50px auto;">
        <div class="outer-circle">
            <!--外圆-->
            <div class="inner-circle">
                <!--内圆-->
                <div class="inner-circle-light"></div>
                <div class="header-top"></div>
                <!--头发-->
                <div class="hair-left-1"></div>
                <div class="hair-left-2"></div>
                <div class="hair-light-1"></div>
                <div class="hair-light-1-over"></div>
                <div class="hair-light-2"></div>
                <div class="hair-right-1">
                    <div class="hair-right-2">
                    </div>
                </div>
                <div class="header-left"></div>
                <!--脸部-->
                <div class="face-main"></div>
                <div class="face-light-1"></div>
                <div class="face-light-2"></div>
                <div class="face-top"></div>
                <div class="face-right-1"></div>
                <div class="face-bottom-1"></div>
                <div class="face-bottom-1-over"></div>
                <div class="face-bottom-2"></div>
                <div class="face-bottom-2-over"></div>
                <div class="chin"></div>
                <div class="ear">
                    <!--耳朵-->
                    <div class="ear-inner-1"></div>
                    <div class="ear-inner-2"></div>
                    <div class="ear-over"></div>
                    <div class="ear-light"></div>
                </div>
                <div class="eye-left">
                    <!--左眼-->
                    <div class="eye-left-inner"></div>
                    <div class="eye-left-light1"></div>
                    <div class="eye-left-light2"></div>
                    <div class="eye-left-eyelash1"></div>
                    <div class="eye-left-eyelash2"></div>
                    <div class="eye-left-eyelash3"></div>
                    <div class="eye-left-eyelash4"></div>
                    <div class="eye-left-eyelash5"></div>
                </div>
                <div class="eye-right">
                    <!--右眼-->
                    <div class="eye-right-inner"></div>
                    <div class="eye-right-light1"></div>
                    <div class="eye-right-light2"></div>
                    <div class="eye-right-eyelash1"></div>
                    <div class="eye-right-eyelash2"></div>
                    <div class="eye-right-eyelash3"></div>
                    <div class="eye-right-eyelash4"></div>
                    <div class="eye-right-eyelash5"></div>
                </div>
                <div class="right-eyebrow">
                    <!--右眼眉毛-->
                    <div class="right-eyebrow-over"></div>
                </div>
                <div class="left-eyebrow">
                    <!--左眼眉毛-->
                    <div class="left-eyebrow-over"></div>
                </div>
                <div class="nose">
                    <!--鼻子-->
                    <div class="nose-tip"></div>
                    <div class="nose-over"></div>
                </div>
                <div class="mouth">
                    <!--嘴巴-->
                    <div class="mouth-over-1"></div>
                    <div class="mouth-over-2"></div>
                    <div class="mouth-over-3"></div>
                    <div class="mouth-over-4"></div>
                    <div class="mouth-tip"></div>
                </div>
                <div class="mouth-inner"></div>
                <div class="name-lable">
                    ASTRO BOY
                    <div class="name-lable-light"></div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
View Code

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

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

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

上一篇： MS下Keytool生成Https+ssl双向证书认证 下一篇： CSS：水平居中与垂直居中
纯HTML+CSS实现阿童木头像
C#实现WinForm窗体逐渐显示效果
ASP.NET MVC下实现前端视图页的Session
.net 实现 URL重写，伪静态（方法一）
C#实现WinForm DataGridView控件支持叠加数据绑定

发表评论
用户名: 匿名

最新文章
ORM框架的设计
ORM框架的设..
XsdGen：通过自定义Attribute与反射自动生成XSD
XsdGen：..

最新标签
  • 弹出窗
  • 高手
  • 大型网站
  • 天猫
  • 回溯
  • 循环
  • class
  • instance
  • Win8
  • 美图秀秀

    • 今日热点

    推荐文章
    【共享】流程图控件
    【共享】流程图..
    C# String.Format用法
    C# Stri..