碉堡了！ 纯 CSS 绘制《辛普森一家》人物头像

　　这篇文章给大家分享一组纯 CSS 绘制的《辛普森一家》人物头像。《辛普森一家》（The Simpsons）是马特·格勒宁为美国福克斯广播公司创作的一部动画情景喜剧。该剧通过对霍默、玛琦、巴特、莉萨和玛吉一家五口生活的描绘，用搞笑的方式自我嘲讽了美国的文化、社会、电视以及人类境况的诸多方面。

　　温馨提示：为保证最佳的效果，请在 Chrome、Firefox 和 Safari 等现代浏览器中浏览。

源码下载 在线演示

Homer

辛普森一家中的父亲，一人养着全家。全名是 Homer Jay Simpson。

Homer 人物头像 HTML 代码：

<div class="head">    <!-- Hair and top of head -->    <div class="hair1"></div>    <div class="hair2"></div>    <div class="body head-top"></div>    <div class="no-border body head-main"></div>    <!-- The 'M' above the ear -->    <div class="no-border m1"></div>    <div class="no-border m2"></div>    <div class="no-border m3"></div>    <div class="no-border m4"></div>    <!-- The neck parts -->    <div class="no-border neck1"></div>    <div class="body neck2"></div>    <!-- The ear -->    <div class="body ear">    <div class="no-border inner1"></div>    <div class="no-border inner2"></div>    <div class="no-border body clip"></div>    </div>    <!-- The mouth -->    <div class="mouth">    <div class="mouth5"></div>    <div class="mouth2"></div>    <div class="mouth1"></div>    <div class="mouth7"></div>    <div class="no-border mouth3"></div>    <div class="no-border mouth4"></div>    <div class="no-border mouth6"></div>    <div class="no-border mouth8"></div>    </div>    <!-- The right eye -->    <div class="right-eye">    <div class="no-border right-eye-pupil"></div>    <div class="no-border body eyelid-top"></div>    <div class="no-border body eyelid-bottom"></div>    </div>    <!-- The nose -->    <div class="body nose"></div>    <div class="body nose-tip"></div>    <!-- The left eye -->    <div class="left-eye">    <div class="no-border left-eye-pupil"></div>    <div class="no-border body eyelid-top"></div>    <div class="no-border body eyelid-bottom"></div>    </div></div>

Homer 人物头像CSS 代码如下：

#homer *{    position: absolute;    box-sizing:content-box;    -moz-box-sizing:content-box;}#homer{    position: relative;    width: 94px;    height: 133px;    margin: 0 auto;}#homer .head *{    border: 1px solid #110b00;}#homer .head .no-border{    border: none;}#homer .head .body{    background: #fbd800;}#homer .head .hair1{    top: 14px;    left: 0px;        height:13px;    width:22px;    border-radius: 22px 22px 0 0;    -moz-border-radius: 22px 22px 0 0;    -webkit-border-radius: 22px 22px 0 0;    background: transparent;    -webkit-transform: rotate(-44deg);    -ms-transform: rotate(-44deg);    transform: rotate(-44deg);    border-bottom: none;}#homer .head .hair2{    top: 8px;    left: 9px;        height:16px;    width:26px;    border-radius: 32px 32px 0 0;    -moz-border-radius: 32px 32px 0 0;    -webkit-border-radius: 32px 32px 0 0;    background: transparent;    -webkit-transform: rotate(-27deg);    -ms-transform: rotate(-27deg);    transform: rotate(-27deg);    border-bottom: none;}#homer .head .head-top{    top: 15px;    left: 2px;    width: 65px;    height: 62px;    border-bottom: none;    -webkit-transform: rotate(-24deg);    -ms-transform: rotate(-24deg);    transform: rotate(-24deg);    -moz-border-radius: 43% 44% 0 0;    -webkit-border-radius: 43% 44% 0 0;    border-radius: 43% 44% 0 0;    -webkit-box-shadow: inset 8px 12px 0px -12px rgba(247,254,140,1), inset 13px 3px 0px -11px rgba(247,254,140,1), inset -2px 0px 0px 0px rgba(229,158,4,1);    -moz-box-shadow: inset 8px 12px 0px -12px rgba(247,254,140,1), inset 13px 3px 0px -11px rgba(247,254,140,1), inset -2px 0px 0px 0px rgba(229,158,4,1);    box-shadow: inset 8px 12px 0px -12px rgba(247,254,140,1), inset 13px 3px 0px -11px rgba(247,254,140,1), inset -2px 0px 0px 0px rgba(229,158,4,1);}#homer .head .head-main{    top: 40px;    left: 17px;    width: 48px;    height: 62px;    -webkit-transform: rotate(-24deg);    -ms-transform: rotate(-24deg);    transform: rotate(-24deg);}#homer .head .m1, #homer .head .m2, #homer .head .m3, #homer .head .m4{    width: 1px;    height: 14px;    background: #110b00;}#homer .head .m1{    top: 77px;    left: 9px;    -webkit-transform: rotate(-13deg);    -ms-transform: rotate(-13deg);    transform: rotate(-13deg);}#homer .head .m2{    top: 76px;    left: 12px;    height: 12px;    -webkit-transform: rotate(-45deg);    -ms-transform: rotate(-45deg);    transform: rotate(-45deg);}#homer .head .m3{    top: 71px;    left: 16px;    height: 15px;    -webkit-transform: rotate(1deg);    -ms-transform: rotate(1deg);    transform: rotate(1deg);}#homer .head .m4{    top: 70px;    left: 21px;    -webkit-transform: rotate(-39deg);    -ms-transform: rotate(-39deg);    transform: rotate(-39deg);}#homer .head .ear{    top: 90px;    left: 14px;    width: 11px;    height: 13px;    -moz-border-radius: 50%;    -webkit-border-radius: 50%;    border-radius: 50%;}#homer .head .ear .inner1{    top: 3px;    left: 2px;    width: 7px;    height: 5px;    -moz-border-radius: 50%;    -webkit-border-radius: 50%;    border-radius: 50%;    border-top: 1px solid #110b00;    -webkit-transform: rotate(-21deg);    -ms-transform: rotate(-21deg);    transform: rotate(-21deg);}#homer .head .ear .inner2{    top: 3px;    left: 4px;    width: 7px;    height: 5px;    -moz-border-radius: 50%;    -webkit-border-radius: 50%;    border-radius: 50%;    border-top: 1px solid #110b00;    -webkit-transform: rotate(-109deg);    -ms-transform: rotate(-109deg);    transform: rotate(-109deg);}#homer .head .ear .clip{    top: 1px;    left: 8px;    width: 5px;    height: 10px;}#homer .head .right-eye{    top: 48px;    left: 48px;    width: 31px;    height: 31px;    -moz-border-radius: 50%;    -webkit-border-radius: 50%;    border-radius: 50%;    background: #ffffff;    box-shadow: -2px -1px 0px 0px rgba(247,254,140,1);    overflow: hidden;}#homer .head .right-eye .right-eye-pupil{    top: 11px;    left: 20px;    width: 4px;    height: 4px;    -moz-border-radius: 50%;    -webkit-border-radius: 50%;    border-radius: 50%;    background: #110b00;}#homer .head .left-eye{    top: 51px;    left: 23px;    width: 31px;    height: 31px;    -moz-border-radius: 50%;    -webkit-border-radius: 50%;    border-radius: 50%;    background: #ffffff;    box-shadow: -1px -1px 0px 0px rgba(247,254,140,1);    overflow: hidden;}#homer .head .left-eye .left-eye-pupil{    top: 13px;    left: 11px;    width: 4px;    height: 4px;    -moz-border-radius: 50%;    -webkit-border-radius: 50%;    border-radius: 50%;    background: #110b00;}#homer .head .left-eye .eyelid-top{    top: -21px;    left: 0px;    width: 30px;    height: 20px;    border-bottom: 1px solid #110b00;    border-radius: 50% 50% 0 0;        -webkit-animation-name: homerlefteyelidtop;    -webkit-animation-duration: 10s;    -webkit-animation-timing-function: linear;    -webkit-animation-delay: 1s;    -webkit-animation-iteration-count: infinite;    -webkit-animation-play-state: running;    animation-name: homerlefteyelidtop;    animation-duration: 10s;    animation-timing-function: linear;    animation-delay: 1s;    animation-iteration-count: infinite;    animation-play-state: running;}#homer .head .left-eye .eyelid-bottom{    bottom: -11px;    left: 0px;    width: 30px;    height: 10px;    border-top: 1px solid #110b00;    border-radius: 0 0 50% 50%;        -webkit-animation-name: homerlefteyelidbottom;    -webkit-animation-duration: 10s;    -webkit-animation-timing-function: linear;    -