纯HTML+CSS实现阿童木头像
他有十万马力，能上天能入地；他分辨善恶，是勇敢正义化身；1963年，他登上荧幕，在日本创下了未曾有过的高收视率……他叫阿童木，一个纯真、善良、勇 敢的机器娃娃。“阿童木之父”手冢治虫曾说，将阿童木生日定在2003年4月7日。你的童年记忆中，有这个发型尖尖的少年吗？
正好最近学习CSS3，就准备练练手，画一个阿童木的头像。实用性不是很大，主要为练习HTML+CSS，也是为了打发时间和磨练耐心。
先上最终效果图： 
在里面主要用的了CSS中的几个属性：position—定位；border-radius—圆角；box-shadow—阴影；background（linear-gradient）—渐变；transform—旋转和变换；animation —动画，技术点不是很多，主要是细心和耐心。还是直接上最终源码吧。由于考虑浏览器的CSS兼容性，代码比较多。
<!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>
PS：建议大家使用IE9+,FireFox,Chrome浏览器打开。
第一次写博客，写的不是很好，以后不断努力。觉得好推荐一下吧！