纯HTML+CSS实现阿童木头像
先上最终效果图：
在里面主要用的了CSS中的几个属性：position—定位；border-radius—圆角；box-shadow—阴 影；background（linear-gradient）—渐变；transform—旋转和变换；animation —动画，技术点不是很多，主要是细心和耐心。还是直接上最终源码吧。由于考虑浏览器的CSS兼容性，代码比较多。
CSS Code复制内容到剪贴板 <!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; rightright: 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-rightright-1 { top: 70px; rightright: 1px; z-index: 60; width: 81px; height: 85px; -webkit-border-top-rightright-radius: 26px 120px; border-top-rightright-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-rightright-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; rightright: 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; rightright: 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; rightright: 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; rightright: 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; rightright: 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 { bottombottom: -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; rightright: 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-rightright-1 { top: 115px; rightright: 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-bottombottom-1 { bottombottom: 42px; left: 45px; z-index: 40; width: 72px; height: 52px; -webkit-border-bottom-left-radius: 
