碉堡了！纯 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;
    -webkit-animation-delay: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-play-state: running;
    animation-name: homerlefteyelidbottom;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    animation-play-state: running;
}


@-webkit-keyframes homerlefteyelidtop
{
0% {top: -21px;}
2% {top: 0px;}
4% {top: -21px;}
100% {top: -21px;}
}


@keyframes homerlefteyelidtop
{
0% {top: -21px;}
2% {top: 0px;}
4% {top: -21px;}
100% {top: -21px;}
}

@-webkit-keyframes homerlefteyelidbottom
{
0% {bottom: -11px;}
2% {bottom: 0px;}
4% {bottom: -11px;}
100% {bottom: -11px;}
}


@keyframes homerlefteyelidbottom
{
0% {bottom: -11px;}
2% {bottom: 0px;}
4% {bottom: -11px;}
100% {bottom: -11px;}
}

#homer .head .right-eye .eyelid-top
{
    top: -18px;
    left: 0px;
    width: 30px;
    height: 17px;
    border-bottom: 1px solid #110b00;
    border-radius: 50% 50% 0 0;
    
    -webkit-animation-name: homerrighteyelidtop;
    -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: homerrighteyelidtop;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    animation-play-state: running;
}

#homer .head .right-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: homerrighteyelidbottom;
    -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: homerrighteyelidbottom;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    animation-play-state: running;
}

@-webkit-keyframes homerrighteyelidtop
{
0% {top: -18px;}
2% {top: 0px;}
4% {top: -18px;}
100% {top: -18px;}
}

@keyframes homerrighteyelidtop
{
0% {top: -18px;}
2% {top: 0px;}
4% {top: -18px;}
100% {top: -18px;}
}

@-webkit-keyframes homerrighteyelidbottom
{
0% {bottom: -11px;}
2% {bottom: 0px;}
4% {bottom: -11px;}
100% {bottom: -11px;}
}

@keyframes homerrighteyelidbottom
{
0% {bottom: -11px;}
2% {bottom: 0px;}
4% {bottom: -11px;}
100% {bottom: -11px;}
}

#homer .head .nose
{
    top: 71px;
    left: 50px;
    width: 18px;
    height: 12px;
    border-left: none;
    border-right: none;
    -webkit-transform: rotate(-13deg);
    -ms-transform: rotate(-13deg);
    transform: rotate(-13deg);
}

#homer .head .nose-tip
{
    top: 69px;
    left: 60px;
    width: 14px;
    height: 12px;
    border-left: none;
    -moz-border-radius: 0 50% 50% 0%;
    -webkit-border-radius: 0 50% 50% 0;
    border-radius: 0 50% 50% 0;
    -webkit-transform: rotate(-13deg);
    -ms-transform: rotate(-13deg);
    transform: rotate(-13deg);
}

#homer .head .neck1
{
    top: 85px;
    left: 16px;
    width: 6px;
    height: 31px;
    background: transparent;
    border-right: 1px solid #110b00;
    border-radius: 50% 50% 25% 50%;
    -webkit-transform: rotate(-14deg);
    -ms-transform: rotate(-14deg);
    transform: rotate(-14deg);
    -webkit-box-shadow: 2px 0px 0px 0px rgba(247,254,140,1), 5px 0px 0px 0px rgba(251,216,0,1);
    -moz-box-shadow: 2px 0px 0px 0px rgba(247,254,140,1), 5px 0px 0px 0px rgba(251,216,0,1);
    box-shadow: 2px 0px 0px 0px rgba(247,254,140,1), 5px 0px 0px 0px rgba(251,216,0,1);
}

#homer .head .neck2
{
    top: 114px;
    left: 25px;
    width: 45px;
    height: 19px;
    border-top: none;
    border-bottom: none;
    -webkit-box-shadow: inset 2px 0px 0px 0px rgba(247,254,140,1);
    -moz-box-shadow: inset 2px 0px 0px 0px rgba(247,254,140,1);
    box-shadow: inset 2px 0px 0px 0px rgba(247,254,140,1);
}

#homer .head .mouth1
{
    top: 86px;
    left: 28px;
    width: 48px;
    height: 44px;
    background: #cfae67;
    -moz-border-radius: 46% 52% 44% 50%;
    -webkit-border-radius: 46% 52% 44% 50%;
    border-radius: 46% 52% 44% 50%;
    -webkit-box-shadow: inset -1px -1px 0px 0px rgba(152,110,36,1);
    -moz-box-shadow: inset -1px -1px 0px 0px rgba(152,110,36,1);
    box-shadow: inset -1px -1px 0px 0px rgba(152,110,36,1);
}

#homer .head .mouth2
{
    top: 101px;
    left: 43px;
    width: 48px;
    height: 12px;
    background: #cfae67;
    -moz-border-radius: 46% 52% 44% 50%;
    -webkit-border-radius: 46% 52% 44% 50%;
    border-radius: 46% 52% 44% 50%;
    -webkit-transform: rotate(-15deg);
    -ms-transform: rotate(-15deg);
    transform: rotate(-15deg);
    -webkit-box-shadow: inset -1px 0px 0px 0px rgba(152,110,36,1);
    -moz-box-shadow: inset -1px 0px 0px 0px rgba(152,110,36,1);
    box-shadow: inset -1px 0px 0px 0px rgba(152,110,36,1);
}

#homer .head .mouth3
{
    top: 102px;
    left: 35px;
    width: 48px;
    height: 12px;
    background: transparent;
    -moz-border-radius: 46% 52% 44% 50%;
    -webkit-border-radius: 46% 52% 44% 50%;
    border-radius: 46% 52% 44% 50%;
    border-bottom: 1px solid #110b00;
    -webkit-transform: rotate(-4deg);
    -ms-transform: rotate(-4deg);
    transform: rotate(-4deg);
}

#homer .head .mouth4
{
    top: 110px;
    left: 38px;
    width: 7px;
    height: 5px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    border-top: 1px solid #110b00;
    -webkit-transform: rotate(-81deg);
    -ms-transform: rotate(-81deg);
    transform: rotate(-81deg);
}

#homer .head .mouth5
{
    top: 84px;
    left: 64px;
    width: 27px;
    height: 13px;
    background: transparent;
    -moz-border-radius: 46% 52% 44% 50%;
    -webkit-border-radius: 46% 52% 44% 50%;
    border-radius: 46% 52% 44% 50%;
    -webkit-transform: rotate(-131deg);
    -ms-transform: rotate(-131deg);
    transform: rotate(-131deg);
    border-top: none;
    -webkit-box-shadow: inset -1px -1px 0px 0px rgba(152,110,36,1);
    -moz-box-shadow: inset -1px -1px 0px 0px rgba(152,110,36,1);
    box-shadow: inset -1px -1px 0px 0px rgba(152,110,36,1);
}

#homer .head .mouth6
{
    top: 84px;
    left: 46px;
    width: 32px;
    height: 31px;
    background: #cfae67;
    -webkit-transform: rotate(-18deg);
    -ms-transform: rotate(-18deg);
    transform: rotate(-18deg);
    -moz-border-radius: 0 0 0px 22px;
    -webkit-border-radius: 0 0 0px 22px;
    border-radius: 0 0 0px 22px;
}

#homer .head .mouth7
{
    top: 104px;
    left: 62px;
    width: 17px;
    height: 12px;
    background: #cfae67;
    -moz-border-radius: 46% 52% 44% 50%;
    -webkit-border-radius: 46% 52% 44% 50%;
    border-radius: 46% 52% 44% 50%;
    border-left: none;
    border-bottom: none;
    -webkit-transform: rotate(6deg);
    -ms-transform: rotate(6deg);
    transform: rotate(6deg);
}

#homer .head .mouth8
{
    top: 79px;
    left: 71px;
    width: 15px;
    height: 30px;
    background: #cfae67;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -webkit-transform: rotate(-30deg);
    -ms-transform: rotate(-30deg);
    transform: rotate(-30deg);
}

Bart

一个淘气可爱的男孩子，10岁。全名 Bartholomew J. Simpson。

Bart 人物头像 HTML 代码：

<div class="bart" style="margin-top: 75px;">
    <div class="head">
        <div class="no-border body hair hair1"></div>
        <div class="no-border body hair hair2"></div>
        <div class="no-border body hair hair3"></div>
        <div class="no-border body hair hair4"></div>
        <div class="no-border body hair hair5"></div>
        <div class="no-border body hair hair6"></div>
        <div class="no-border body hair hair7"></div>
        <div class="no-border body hair hair8"></div>
        <div class="no-border body hair hair9"></div>
        <div class="body mouth-lip2"></div>
        <div class="no-border body head-left1"></div>
        <div class="no-border body head-left2"></div>
        <div class="no-border body head-left3"></div>
        <div class="no-border body head-left4"></div>
        <div class="no-border body head-left5"></div>
        <div class="no-border body head-left6"></div>
        <div class="no-border body head-left7"></div>
        <div class="body eyelid"></div>
        <div class="no-border body mouth"></div>
        <div class="body mouth-lip"></div>
        <div class="no-border body head-right2"></div>
        <div class="no-border body head-right1"></div>
        <div class="no-border body head-right3"></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 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="no-border 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 class="no-border mouth-smile"></div>
    </div>
</div>

Bart 人物头像 CSS 代码：

.bart *
{
    position: absolute;
    box-sizing:content-box;
    -moz-box-sizing:content-box;
}

.bart
{
    position: relative;
    width: 80px;
    height: 130px;
    margin: 0 auto;
}

.bart .head *
{
    border: 1px solid #110b00;
}

.bart .head .no-border
{
    border: none;
}

.bart .head .body
{
    background: #fbd800;
}

.bart.green .head .body
{
    background: #a3f57a;
}

.bart.colourless .head .body {
    background: #ffffff;
}

.bart .head .hair
{
    border-top: 1px solid #110b00;
    border-left: 1px solid #110b00;
    -webkit-border-radius: 2px 0 0 0;
    -moz-border-radius: 2px 0 0 0;
    border-radius: 2px 0 0 0;
}

.bart .head .hair1
{
    top: 22px;
    left: 0px;
    width: 6px;
    height: 7px;
    -webkit-transform: rotate(-22deg) skew(-7deg, 51deg);
    -ms-transform: rotate(-22deg) skew(-7deg, 51deg);
    transform: rotate(-22deg) skew(-7deg, 51deg);
}

.bart .head .hair2
{
    top: 20px;
    left: 5px;
    width: 9px;
    height: 7px;
    -webkit-transform: rotate(25deg) skew(23deg, 16deg);
    -ms-transform: rotate(25deg) skew(23deg, 16deg);
    transform: rotate(25deg) skew(23deg, 16deg);
}

.bart .head .hair3
{
    top: 17px;
    left: 12px;
    width: 9px;
    height: 8px;
    -webkit-transform: rotate(27deg) skew(22deg, 16deg);
    -ms-transform: rotate(27deg) skew(22deg, 16deg);
    transform: rotate(27deg) skew(22deg, 16deg);
}

.bart .head .hair4
{
    top: 15px;
    left: 20px;
    width: 10px;
    height: 9px;
    -webkit-transform: rotate(35deg) skew(22deg, 16deg);
    -ms-transform: rotate(35deg) skew(22deg, 16deg);
    transform: rotate(35deg) skew(22deg, 16deg);
}

.bart .head .hair5
{
    top: 13px;
    left: 29px;
    width: 9px;
    height: 9px;
    -webkit-transform: rotate(37deg) skew(22deg, 16deg);
    -ms-transform: rotate(37deg) skew(22deg, 16deg);
    transform: rotate(37deg) skew(22deg, 16deg);
}

.bart .head .hair6
{
    top: 12px;
    left: 37px;
    width: 10px;
    height: 9px;
    -webkit-transform: rotate(50deg) skew(24deg, 16deg);
    -ms-transform: rotate(50deg) skew(24deg, 16deg);
    transform: rotate(50deg) skew(24deg, 16deg);
}

.bart .head .hair7
{
    top: 12px;
    left: 45px;
    width: 10px;
    height: 8px;
    -webkit-transform: rotate(51deg) skew(24deg, 10deg);
    -ms-transform: rotate(51deg) skew(24deg, 10deg);
    transform: rotate(51deg) skew(24deg, 10deg);
}

.bart .head .hair8
{
    top: 14px;
    left: 54px;
    width: 9px;
    height: 7px;
    -webkit-transform: rotate(51deg) skew(24deg, 10deg);
    -ms-transform: rotate(51deg) skew(24deg, 10deg);
    transform: rotate(51deg) skew(24deg, 10deg);
}

.bart .head .hair9
{
    top: 15px;
    left: 61px;
    width: 9px;
    height: 7px;
    -webkit-transform: rotate(79deg) skew(35deg, 10deg);
    -ms-transform: rotate(79deg) skew(35deg, 10deg);
    transform: rotate(79deg) skew(35deg, 10deg);
}

.bart .head .head-left1
{
    top: 24px;
    left: 1px;
    width: 17px;
    height: 15px;
    border-left: 1px solid #110b00;
    -webkit-transform: rotate(-13deg);
    -ms-transform: rotate(-13deg);
    transform: rotate(-13deg);
}

.bart .head .head-left2
{
    top: 33px;
    left: 3px;
    width: 17px;
    height: 18px;
    border-left: 1px solid #110b00;
    -webkit-transform: rotate(-11deg);
    -ms-transform: rotate(-11deg);
    transform: rotate(-11deg);
}

.bart .head .head-left3
{
    top: 46px;
    left: 5px;
    width: 17px;
    height: 16px;
    border-left: 1px solid #110b00;
    -webkit-transform: rotate(-9deg);
    -ms-transform: rotate(-9deg);
    transform: rotate(-9deg);
}

.bart .head .head-left4
{
    top: 61px;
    left: 7px;
    width: 17px;
    height: 16px;
    border-left: 1px solid #110b00;
    -webkit-transform: rotate(-7deg);
    -ms-transform: rotate(-7deg);
    transform: rotate(-7deg);
}

.bart .head .head-left5
{
    top: 76px;
    left: 9px;
    width: 20px;
    height: 16px;
    border-left: 1px solid #110b00;
    -webkit-transform: rotate(-8deg);
    -ms-transform: rotate(-8deg);
    transform: rotate(-8deg);
}

.bart .head .head-left6
{
    top: 90px;
    left: 11px;
    width: 28px;
    height: 31px;
    border-left: 1px solid #110b00;
    -webkit-transform: rotate(2deg);
    -ms-transform: rotate(2deg);
    transform: rotate(2deg);
}

.bart .head .head-left7
{
    top: 119px;
    left: 10px;
    width: 27px;
    height: 8px;
    border-left: 1px solid #110b00;
    border-right: 1px solid #110b00;
    -webkit-transform: rotate(6deg);
    -ms-transform: rotate(6deg);
    transform: rotate(6deg);
}

.bart .head .head-right1
{
    top: 20px;
    left: 19px;
    width: 50px;
    height: 37px;
    border-right: 1px solid #000000;
    -webkit-transform: rotate(-2deg);
    -ms-transform: rotate(-2deg);
    transform: rotate(-2deg);
}

.bart .head .head-right2
{
    top: 46px;
    left: 19px;
    width: 51px;
    height: 24px;
    -webkit-transform: rotate(-2deg);
    -ms-transform: rotate(-2deg);
    transform: rotate(-2deg);
}

.bart .head .head-right3
{
    top: 83px;
    left: 24px;
    width: 50px;
    height: 27px;
    border-right: 1px solid #000000;
    -webkit-transform: rotate(-8deg);
    -ms-transform: rotate(-8deg);
    transform: rotate(-8deg);
}

.bart .head .ear
{
    top: 88px;
    left: 5px;
    width: 11px;
    height: 13px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

.bart .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);
}

.bart .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);
}

.bart .head .ear .clip
{
    top: 1px;
    left: 9px;
    width: 3px;
    height: 10px;
}

.bart .head .eyelid
{
    top: 55px;
    left: 63px;
    width: 10px;
    height: 10px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.bart .head .right-eye
{
    top: 60px;
    left: 51px;
    width: 27px;
    height: 27px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #ffffff;
    overflow: hidden;
}

.bart .head .right-eye .right-eye-pupil
{
    top: 11px;
    left: 8px;
    width: 4px;
    height: 4px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #110b00;
}

.bart .head .right-eye .eyelid-top
{
    top: -18px;
    left: 0px;
    width: 30px;
    height: 17px;
    border-bottom: 1px solid #110b00;
    border-radius: 50% 50% 0 0;
    
    -webkit-animation-name: bartrighteyelidtop;
    -webkit-animation-duration: 10s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 2.5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-play-state: running;
    animation-name: bartrighteyelidtop;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-delay: 2.5s;
    animation-iteration-count: infinite;
    animation-play-state: running;
}

.bart .head .right-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: bartrighteyelidbottom;
    -webkit-animation-duration: 10s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 2.5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-play-state: running;
    animation-name: bartrighteyelidbottom;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-delay: 2.5s;
    animation-iteration-count: infinite;
    animation-play-state: running;
}

@-webkit-keyframes bartrighteyelidtop
{
0% {top: -18px;}
2% {top: 0px;}
4% {top: -18px;}
100% {top: -18px;}
}

@keyframes bartrighteyelidtop
{
0% {top: -18px;}
2% {top: 0px;}
4% {top: -18px;}
100% {top: -18px;}
}

@-webkit-keyframes bartrighteyelidbottom
{
0% {bottom: -11px;}
2% {bottom: 0px;}
4% {bottom: -11px;}
100% {bottom: -11px;}
}

@keyframes bartrighteyelidbottom
{
0% {bottom: -11px;}
2% {bottom: 0px;}
4% {bottom: -11px;}
100% {bottom: -11px;}
}

.bart .head .left-eye
{
    top: 60px;
    left: 24px;
    width: 30px;
    height: 30px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #ffffff;
    overflow: hidden;
}

.bart .head .left-eye .left-eye-pupil
{
    top: 13px;
    left: 9px;
    width: 4px;
    height: 4px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #110b00;
}

.bart .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: bartlefteyelidtop;
    -webkit-animation-duration: 10s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 2.5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-play-state: running;
    animation-name: bartlefteyelidtop;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-delay: 2.5s;
    animation-iteration-count: infinite;
    animation-play-state: running;
}

.bart .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: bartlefteyelidbottom;
    -webkit-animation-duration: 10s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 2.5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-play-state: running;
    animation-name: bartlefteyelidbottom;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-delay: 2.5s;
    animation-iteration-count: infinite;
    animation-play-state: running;
}

@-webkit-keyframes bartlefteyelidtop
{
0% {top: -21px;}
2% {top: 0px;}
4% {top: -21px;}
100% {top: -21px;}
}

@keyframes bartlefteyelidtop
{
0% {top: -21px;}
2% {top: 0px;}
4% {top: -21px;}
100% {top: -21px;}
}

@-webkit-keyframes bartlefteyelidbottom
{
0% {bottom: -11px;}
2% {bottom: 0px;}
4% {bottom: -11px;}
100% {bottom: -11px;}
}

@keyframes bartlefteyelidbottom
{
0% {bottom: -11px;}
2% {bottom: 0px;}
4% {bottom: -11px;}
100% {bottom: -11px;}
}

.bart .head .nose
{
    top: 83px;
    left: 55px;
    width: 12px;
    height: 12px;
    border-top: 1px solid #110b00;
}

.bart .head .nose-tip
{
    top: 82px;
    left: 60px;
    width: 14px;
    height: 12px;
    border-left: none;
    -moz-border-radius: 0 50% 50% 0%;
    -webkit-border-radius: 0 50% 50% 0;
    border-radius: 0 50% 50% 0;
    -webkit-transform: rotate(-6deg);
    -ms-transform: rotate(-6deg);
    transform: rotate(-6deg);
}

.bart .head .mouth
{
    top: 101px;
    left: 27px;
    width: 50px;
    height: 15px;
    border-bottom: 1px solid #110b00;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

.bart .head .mouth-smile
{
    top: 111px;
    left: 28px;
    width: 7px;
    height: 5px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    border-top: 1px solid #110b00;
    -webkit-transform: rotate(-52deg);
    -ms-transform: rotate(-52deg);
    transform: rotate(-52deg);
}

.bart .head .mouth-lip
{
    top: 101px;
    left: 26px;
    width: 50px;
    height: 14px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

.bart .head .mouth-lip2
{
    top: 106px;
    left: 17px;
    width: 30px;
    height: 14px;
    -moz-border-radius: 32%;
    -webkit-border-radius: 32%;
    border-radius: 32%;
}

Marge

一个充满包容的母亲和妻子，家庭主妇，当过女警。（原名Marge Bouvier）

Marge 人物头像 HTML 代码：

<div id="marge">
<div class="head">
    <div class="no-border body head-main"></div>
    <div class="body mouth-lip2"></div>
    <div class="body mouth-lip"></div>
    <div class="no-border body neck"></div>
    <div class="no-border body mouth"></div>
    <div class="no-border body neck2"></div>
    <div class="no-border body neck3"></div>
    <div class="no-border mouth-smile"></div>

    <div class="hair hair1 hair-circle"></div>
    <div class="hair hair2 hair-circle"></div>
    <div class="hair hair3 hair-circle"></div>
    <div class="hair hair4 hair-circle"></div>
    <div class="hair hair5 hair-circle"></div>
    <div class="hair hair6 hair-circle"></div>
    <div class="hair hair7 hair-circle"></div>
    <div class="hair hair8 hair-circle"></div>
    <div class="hair hair9 hair-circle"></div>
    <div class="hair hair10 hair-circle"></div>
    <div class="hair hair11 hair-circle"></div>
    <div class="hair hair12 hair-circle"></div>
    <div class="hair hair13 hair-circle"></div>
    <div class="hair hair14 hair-circle"></div>
    <div class="hair hair15 hair-circle"></div>
    <div class="hair hair16 hair-circle"></div>
    <div class="hair hair17 hair-circle"></div>
    <div class="hair hair18 hair-circle"></div>
    <div class="hair hair19 hair-circle"></div>
    <div class="hair hair20 hair-circle"></div>
    <div class="hair hair21 hair-circle"></div>
    <div class="hair hair22 hair-circle"></div>
    <div class="hair hair23 hair-circle"></div>
    <div class="hair hair24 hair-circle"></div>
    <div class="hair hair25 hair-circle"></div>
    <div class="hair hair26 hair-circle"></div>
    <div class="hair hair27 hair-circle"></div>
    <div class="hair hair28 hair-circle"></div>
    <div class="hair hair29 hair-circle"></div>
    <div class="hair hair30 hair-circle"></div>
    <div class="no-border hair hair-main"></div>
    <div class="no-border hair hair-main2"></div>
    <div class="no-border hair hair-main3"></div>
    <div class="no-border hair hair-main4"></div>
    <div class="no-border hair hair-main5"></div>
    <div class="no-border hair hair-main6"></div>
    <div class="no-border hair hair-main7 hair-circle"></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>

    <div class="no-border eyelash1 eyelash"></div>
    <div class="no-border eyelash2 eyelash"></div>
    <div class="no-border eyelash3 eyelash"></div>
    <div class="no-border eyelash4 eyelash"></div>
    <div class="no-border eyelash5 eyelash"></div>
    <div class="no-border eyelash6 eyelash"></div>
    <div class="no-border eyelash7 eyelash"></div>
    <div class="no-border eyelash8 eyelash"></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="no-border 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>
</div>

Marge 人物头像 CSS 代码：

#marge *
{
    position: absolute;
    box-sizing:content-box;
    -moz-box-sizing:content-box;
}

#marge
{
    position: relative;
    width: 140px;
    height: 205px;
    margin: 0 auto;
}

#marge .head *
{
    border: 1px solid #110b00;
}

#marge .head .no-border
{
    border: none;
}

#marge .head .body
{
    background: #fbd800;
}

#marge .head .hair
{
    background: #107dc0;
}

#marge .head .hair-circle
{
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
}

#marge .head .hair-main
{
    top: 7px;
    left: 29px;
    width: 67px;
    height: 133px;
    -webkit-transform: rotate(-18deg);
    -ms-transform: rotate(-18deg);
    transform: rotate(-18deg);
    border-radius: 19px 33px 0px 0px;
}

#marge .head .hair-main2
{
    top: 5px;
    left: 22px;
    width: 58px;
    height: 37px;
    -webkit-transform: rotate(7deg);
    -ms-transform: rotate(7deg);
    transform: rotate(7deg);
    border-radius: 50% 50% 50% 50%;
}

#marge .head .hair-main3
{
    top: 63px;
    left: 50px;
    width: 90px;
    height: 19px;
    -webkit-transform: rotate(71deg);
    -ms-transform: rotate(71deg);
    transform: rotate(71deg);
    border-radius: 50%;
}

#marge .head .hair-main4
{
    top: 114px;
    left: 88px;
    width: 43px;
    height: 12px;
    -webkit-transform: rotate(67deg);
    -ms-transform: rotate(67deg);
    transform: rotate(67deg);
    border-radius: 50%;
}

#marge .head .hair-main5
{
    top: 46px;
    left: 30px;
    width: 30px;
    height: 83px;
    -webkit-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    transform: rotate(-20deg);
}

#marge .head .hair-main6
{
    top: 140px;
    left: 51px;
    width: 17px;
    height: 34px;
    border-radius: 10px 22px 27px 10px;
    -webkit-border-radius: 10px 22px 27px 10px;
    -moz-border-radius: 10px 22px 27px 10px;
    -webkit-transform: rotate(-15deg);
    -ms-transform: rotate(-15deg);
    transform: rotate(-15deg);
}

#marge .head .hair-main7
{
    top: 179px;
    left: 62px;
    width: 7px;
    height: 7px;
}

#marge .head .hair1
{
    top: 1px;
    left: 37px;
    width: 17px;
    height: 10px;
    -webkit-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    transform: rotate(-5deg);
    -webkit-box-shadow: inset 0px 2px 0px 0px rgba(149,179,222,1);
    -moz-box-shadow: inset 0px 2px 0px 0px rgba(149,179,222,1);
    box-shadow: inset 0px 2px 0px 0px rgba(149,179,222,1);
}

#marge .head .hair2
{
    top: 3px;
    left: 54px;
    width: 15px;
    height: 10px;
    -webkit-transform: rotate(28deg);
    -ms-transform: rotate(28deg);
    transform: rotate(28deg);
    -webkit-box-shadow: inset 0px 2px 0px 0px rgba(149,179,222,1);
    -moz-box-shadow: inset 0px 2px 0px 0px rgba(149,179,222,1);
    box-shadow: inset 0px 2px 0px 0px rgba(149,179,222,1);
}

#marge .head .hair3
{
    top: 12px;
    left: 66px;
    width: 15px;
    height: 10px;
    -webkit-transform: rotate(53deg);
    -ms-transform: rotate(53deg);
    transform: rotate(53deg);
    -webkit-box-shadow: inset 0px 2px 0px 0px rgba(149,179,222,1);
    -moz-box-shadow: inset 0px 2px 0px 0px rgba(149,179,222,1);
    box-shadow: inset 0px 2px 0px 0px rgba(149,179,222,1);
}

#marge .head .hair4
{
    top: 24px;
    left: 75px;
    width: 15px;
    height: 10px;
    -webkit-transform: rotate(68deg);
    -ms-transform: rotate(68deg);
    transform: rotate(68deg);
    -webkit-box-shadow: inset 0px 2px 0px 0px rgba(149,179,222,1);
    -moz-box-shadow: inset 0px 2px 0px 0px rgba(149,179,222,1);
    box-shadow: inset 0px 2px 0px 0px rgba(149,179,222,1);
}

#marge .head .hair5
{
    top: 38px;
    left: 82px;
    width: 16px;
    height: 10px;
    -webkit-transform: rotate(68deg);
    -ms-transform: rotate(68deg);
    transform: rotate(68deg);
    -webkit-box-shadow: inset 0px 2px 0px 0px rgba(149,179,222,1);
    -moz-box-shadow: inset 0px 2px 0px 0px rgba(149,179,222,1);
    box-shadow: inset 0px 2px 0px 0px rgba(149,179,222,1);
}

#marge .head .hair6
{
    top: 52px;
    left: 88px;
    width: 16px;
    height: 10px;
    -webkit-transform: rotate(68deg);
    -ms-transform: rotate(68deg);
    transform: rotate(68deg);
    -webkit-box-shadow: inset 0px 2px 0px 0px rgba(149,179,222,1);
    -moz-box-shadow: inset 0px 2px 0px 0px rgba(149,179,222,1);
    box-shadow: inset 0px 2px 0px 0px rgba(149,179,222,1);
}

#marge .head .hair7
{
    top: 66px;
    left: 94px;
    width: 15px;
    height: 10px;
    -webkit-transform: rotate(66deg);
    -ms-transform: rotate(66deg);
    transform: rotate(66deg);
    -webkit-box-shadow: inset 0px 2px 0px 0px rgba(149,179,222,1);
    -moz-box-shadow: inset 0px 2px 0px 0px rgba(149,179,222,1);
    box-shadow: inset 0px 2px 0px 0px rgba(149,179,222,1);
}

#marge .head .hair8
{
    top: 80px;
    left: 99px;
    width: 14px;
    height: 10px;
    -webkit-transform: rotate(79deg);
    -ms-transform: rotate(79deg);
    transform: rotate(79deg);
    -webkit-box-shadow: inset 0px 2px 0px 0px rgba(149,179,222,1);
    -moz-box-shadow: inset 0px 2px 0px 0px rgba(149,179,222,1);
    box-shadow: inset 0px 2px 0px 0px rgba(149,179,222,1);
}

#marge .head .hair9
{
    top: 93px;
    left: 101px;
    width: 15px;
    height: 10px;
    -webkit-transform: rotate(65deg);
    -ms-transform: rotate(65deg);
    transform: rotate(65deg);
    -webkit-box-shadow: inset 0px 2px 0px 0px rgba(149,179,222,1);
    -moz-box-shadow: inset 0px 2px 0px 0px rgba(149,179,222,1);
    box-shadow: inset 0px 2px 0px 0px rgba(149,179,222,1);
}

#marge .head .hair10
{
    top: 107px;
    left: 104px;
    width: 16px;
    height: 10px;
    -webkit-transform: rotate(65deg);
    -ms-transform: rotate(65deg);
    transform: rotate(65deg);
    -webkit-box-shadow: inset 0px 2px 0px 0px rgba(149,179,222,1);
    -moz-box-shadow: inset 0px 2px 0px 0px rgba(149,179,222,1);
    box-shadow: inset 0px 2px 0px 0px rgba(149,179,222,1);
}

#marge .head .hair11
{
    top: 121px;
    left: 106px;
    width: 15px;
    height: 14px;
    -webkit-transform: rotate(95deg);
    -ms-transform: rotate(95deg);
    transform: rotate(95deg);
    -webkit-box-shadow: inset 0px 1px 0px 0px rgba(149,179,222,1);
    -moz-box-shadow: inset 0px 1px 0px 0px rgba(149,179,222,1);
    box-shadow: inset 0px 1px 0px 0px rgba(149,179,222,1);
}

#marge .head .hair12
{
    top: 134px;
    left: 109px;
    width: 13px;
    height: 10px;
    -webkit-transform: rotate(82deg);
    -ms-transform: rotate(82deg);
    transform: rotate(82deg);
    -webkit-box-shadow: inset 0px 1px 0px 0px rgba(149,179,222,1);
    -moz-box-shadow: inset 0px 1px 0px 0px rgba(149,179,222,1);
    box-shadow: inset 0px 1px 0px 0px rgba(149,179,222,1);
}

#marge .head .hair13
{
    top: 125px;
    left: 94px;
    width: 15px;
    height: 10px;
    -webkit-transform: rotate(7deg);
    -ms-transform: rotate(7deg);
    transform: rotate(7deg);
}

#marge .head .hair14
{
    top: 126px;
    left: 79px;
    width: 16px;
    height: 10px;
    -webkit-transform: rotate(-18deg);
    -ms-transform: rotate(-18deg);
    transform: rotate(-18deg);
}

#marge .head .hair15
{
    top: 131px;
    left: 64px;
    width: 16px;
    height: 10px;
    -webkit-transform: rotate(-18deg);
    -ms-transform: rotate(-18deg);
    transform: rotate(-18deg);
}

#marge .head .hair16
{
    top: 139px;
    left: 52px;
    width: 16px;
    height: 19px;
    -webkit-transform: rotate(-18deg);
    -ms-transform: rotate(-18deg);
    transform: rotate(-18deg);
}

#marge .head .hair17
{
    top: 154px;
    left: 59px;
    width: 11px;
    height: 13px;
    -webkit-transform: rotate(-18deg);
    -ms-transform: rotate(-18deg);
    transform: rotate(-18deg);
}

#marge .head .hair18
{
    top: 180px;
    left: 63px;
    width: 9px;
    height: 9px;
    -webkit-transform: rotate(-18deg);
    -ms-transform: rotate(-18deg);
    transform: rotate(-18deg);
}

#marge .head .hair19
{
    top: 170px;
    left: 54px;
    width: 12px;
    height: 14px;
    -webkit-transform: rotate(-18deg);
    -ms-transform: rotate(-18deg);
    transform: rotate(-18deg);
    -webkit-box-shadow: inset 4px 0px 0px 0px rgba(16,94,142,1);
    -moz-box-shadow: inset 4px 0px 0px 0px rgba(16,94,142,1);
    box-shadow: inset 4px 0px 0px 0px rgba(16,94,142,1);
}

#marge .head .hair20
{
    top: 156px;
    left: 49px;
    width: 12px;
    height: 16px;
    -webkit-transform: rotate(-11deg);
    -ms-transform: rotate(-11deg);
    transform: rotate(-11deg);
    -webkit-box-shadow: inset 4px 0px 0px 0px rgba(16,94,142,1);
    -moz-box-shadow: inset 4px 0px 0px 0px rgba(16,94,142,1);
    box-shadow: inset 4px 0px 0px 0px rgba(16,94,142,1);
}

#marge .head .hair21
{
    top: 139px;
    left: 44px;
    width: 15px;
    height: 18px;
    -webkit-transform: rotate(-11deg);
    -ms-transform: rotate(-11deg);
    transform: rotate(-11deg);
    -webkit-box-shadow: inset 4px 0px 0px 0px rgba(16,94,142,1);
    -moz-box-shadow: inset 4px 0px 0px 0px rgba(16,94,142,1);
    box-shadow: inset 4px 0px 0px 0px rgba(16,94,142,1);
}

#marge .head .hair22
{
    top: 122px;
    left: 40px;
    width: 15px;
    height: 18px;
    -webkit-transform: rotate(4deg);
    -ms-transform: rotate(4deg);
    transform: rotate(4deg);
    -webkit-box-shadow: inset 4px 0px 0px 0px rgba(16,94,142,1);
    -moz-box-shadow: inset 4px 0px 0px 0px rgba(16,94,142,1);
    box-shadow: inset 4px 0px 0px 0px rgba(16,94,142,1);
}

#marge .head .hair23
{
    top: 106px;
    left: 35px;
    width: 15px;
    height: 19px;
    -webkit-transform: rotate(4deg);
    -ms-transform: rotate(4deg);
    transform: rotate(4deg);
    -webkit-box-shadow: inset 4px 0px 0px 0px rgba(16,94,142,1);
    -moz-box-shadow: inset 4px 0px 0px 0px rgba(16,94,142,1);
    box-shadow: inset 4px 0px 0px 0px rgba(16,94,142,1);
}

#marge .head .hair24
{
    top: 90px;
    left: 30px;
    width: 15px;
    height: 19px;
    -webkit-transform: rotate(4deg);
    -ms-transform: rotate(4deg);
    transform: rotate(4deg);
    -webkit-box-shadow: inset 4px 0px 0px 0px rgba(16,94,142,1);
    -moz-box-shadow: inset 4px 0px 0px 0px rgba(16,94,142,1);
    box-shadow: inset 4px 0px 0px 0px rgba(16,94,142,1);
}

#marge .head .hair25
{
    top: 77px;
    left: 25px;
    width: 15px;
    height: 16px;
    -webkit-transform: rotate(4deg);
    -ms-transform: rotate(4deg);
    transform: rotate(4deg);
    -webkit-box-shadow: inset 4px 0px 0px 0px rgba(16,94,142,1);
    -moz-box-shadow: inset 4px 0px 0px 0px rgba(16,94,142,1);
    box-shadow: inset 4px 0px 0px 0px rgba(16,94,142,1);
}

#marge .head .hair26
{
    top: 62px;
    left: 19px;
    width: 15px;
    height: 17px;
    -webkit-transform: rotate(4deg);
    -ms-transform: rotate(4deg);
    transform: rotate(4deg);
    -webkit-box-shadow: inset 4px 0px 0px 0px rgba(16,94,142,1);
    -moz-box-shadow: inset 4px 0px 0px 0px rgba(16,94,142,1);
    box-shadow: inset 4px 0px 0px 0px rgba(16,94,142,1);
}

#marge .head .hair27
{
    top: 47px;
    left: 12px;
    width: 17px;
    height: 17px;
    -webkit-transform: rotate(4deg);
    -ms-transform: rotate(4deg);
    transform: rotate(4deg);
    -webkit-box-shadow: inset 4px 0px 0px 0px rgba(16,94,142,1);
    -moz-box-shadow: inset 4px 0px 0px 0px rgba(16,94,142,1);
    box-shadow: inset 4px 0px 0px 0px rgba(16,94,142,1);
}

#marge .head .hair28
{
    top: 33px;
    left: 8px;
    width: 17px;
    height: 17px;
    -webkit-transform: rotate(4deg);
    -ms-transform: rotate(4deg);
    transform: rotate(4deg);
    -webkit-box-shadow: inset 4px 0px 0px 0px rgba(16,94,142,1);
    -moz-box-shadow: inset 4px 0px 0px 0px rgba(16,94,142,1);
    box-shadow: inset 4px 0px 0px 0px rgba(16,94,142,1);
}

#marge .head .hair29
{
    top: 17px;
    left: 10px;
    width: 17px;
    height: 18px;
    -webkit-transform: rotate(4deg);
    -ms-transform: rotate(4deg);
    transform: rotate(4deg);
    -webkit-box-shadow: inset 10px 0px 0px 0px rgba(16,94,142,1);
    -moz-box-shadow: inset 10px 0px 0px 0px rgba(16,94,142,1);
    box-shadow: inset 10px 0px 0px 0px rgba(16,94,142,1);
}

#marge .head .hair30
{
    top: 5px;
    left: 20px;
    width: 23px;
    height: 18px;
    -webkit-transform: rotate(4deg);
    -ms-transform: rotate(4deg);
    transform: rotate(4deg);
    -webkit-box-shadow: inset 10px 0px 0px 0px rgba(16,94,142,1);
    -moz-box-shadow: inset 10px 0px 0px 0px rgba(16,94,142,1);
    box-shadow: inset 10px 0px 0px 0px rgba(16,94,142,1);
}

#marge .head .head-main
{
    top: 131px;
    left: 65px;
    width: 48px;
    height: 40px;
}

#marge .head .ear
{
    top: 167px;
    left: 61px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -webkit-box-shadow: inset 0px -5px 0px 0px rgba(221,170,42,1);
    -moz-box-shadow: inset 0px -5px 0px 0px rgba(221,170,42,1);
    box-shadow: inset 0px 0px -5px 0px rgba(221,170,42,1);
}

#marge .head .ear .inner1
{
    top: 3px;
    left: 3px;
    width: 6px;
    height: 5px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    border-top: 1px solid #110b00;
    -webkit-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
}

#marge .head .ear .inner2
{
    top: 3px;
    left: 5px;
    width: 5px;
    height: 5px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    border-top: 1px solid #110b00;
    -webkit-transform: rotate(-93deg);
    -ms-transform: rotate(-93deg);
    transform: rotate(-93deg);
}

#marge .head .ear .clip
{
    top: 1px;
    left: 9px;
    width: 3px;
    height: 8px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
}

#marge .head .eyelash
{
    width: 7px;
    height: 7px;
    background: transparent;
    border-left: 1px solid #110b00;
}

#marge .head .eyelash1
{
    top: 145px;
    left: 69px;
    -webkit-transform: rotate(-65deg);
    -ms-transform: rotate(-65deg);
    transform: rotate(-65deg);
}

#marge .head .eyelash2
{
    top: 139px;
    left: 74px;
    -webkit-transform: rotate(-40deg);
    -ms-transform: rotate(-40deg);
    transform: rotate(-40deg);
}

#marge .head .eyelash3
{
    top: 136px;
    left: 84px;
    -webkit-transform: rotate(-17deg);
    -ms-transform: rotate(-17deg);
    transform: rotate(-17deg);
}

#marge .head .eyelash4
{
    top: 139px;
    left: 93px;
    -webkit-transform: rotate(12deg);
    -ms-transform: rotate(12deg);
    transform: rotate(12deg);
}

#marge .head .eyelash5
{
    top: 136px;
    left: 103px;
    -webkit-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    transform: rotate(-20deg);
}

#marge .head .eyelash6
{
    top: 138px;
    left: 110px;
}

#marge .head .eyelash7
{
    top: 141px;
    left: 117px;
    -webkit-transform: rotate(19deg);
    -ms-transform: rotate(19deg);
    transform: rotate(19deg);
}

#marge .head .eyelash8
{
    top: 146px;
    left: 121px;
    -webkit-transform: rotate(39deg);
    -ms-transform: rotate(39deg);
    transform: rotate(39deg);
}

#marge .head .right-eye
{
    top: 142px;
    left: 96px;
    width: 24px;
    height: 24px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #ffffff;
    overflow: hidden;
}

#marge .head .right-eye .right-eye-pupil
{
    top: 11px;
    left: 13px;
    width: 4px;
    height: 4px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #110b00;
}

#marge .head .right-eye .eyelid-top
{
    top: -18px;
    left: 0px;
    width: 30px;
    height: 15px;
    border-bottom: 1px solid #110b00;
    border-radius: 50% 50% 0 0;
    
    -webkit-animation-name: margerighteyelidtop;
    -webkit-animation-duration: 10s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 1.5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-play-state: running;
    animation-name: margerighteyelidtop;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-delay: 1.5s;
    animation-iteration-count: infinite;
    animation-play-state: running;
}

#marge .head .right-eye .eyelid-bottom
{
    bottom: -11px;
    left: 0px;
    width: 30px;
    height: 7px;
    border-top: 1px solid #110b00;
    border-radius: 0 0 50% 50%;
    
    -webkit-animation-name: margerighteyelidbottom;
    -webkit-animation-duration: 10s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 1.5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-play-state: running;
    animation-name: margerighteyelidbottom;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-delay: 1.5s;
    animation-iteration-count: infinite;
    animation-play-state: running;
}

@-webkit-keyframes margerighteyelidtop
{
0% {top: -18px;}
2% {top: 0px;}
4% {top: -18px;}
100% {top: -18px;}
}

@keyframes margerighteyelidtop
{
0% {top: -18px;}
2% {top: 0px;}
4% {top: -18px;}
100% {top: -18px;}
}

@-webkit-keyframes margerighteyelidbottom
{
0% {bottom: -11px;}
2% {bottom: 0px;}
4% {bottom: -11px;}
100% {bottom: -11px;}
}

@keyframes margerighteyelidbottom
{
0% {bottom: -11px;}
2% {bottom: 0px;}
4% {bottom: -11px;}
100% {bottom: -11px;}
}

#marge .head .left-eye
{
    top: 143px;
    left: 74px;
    width: 25px;
    height: 25px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #ffffff;
    overflow: hidden;
}

#marge .head .left-eye .left-eye-pupil
{
    top: 11px;
    left: 9px;
    width: 4px;
    height: 4px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #110b00;
}

#marge .head .left-eye .eyelid-top
{
    top: -21px;
    left: 0px;
    width: 30px;
    height: 15px;
    border-bottom: 1px solid #110b00;
    border-radius: 50% 50% 0 0;
    
    -webkit-animation-name: margelefteyelidtop;
    -webkit-animation-duration: 10s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 1.5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-play-state: running;
    animation-name: margelefteyelidtop;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-delay: 1.5s;
    animation-iteration-count: infinite;
    animation-play-state: running;
}

#marge .head .left-eye .eyelid-bottom
{
    bottom: -11px;
    left: 0px;
    width: 30px;
    height: 9px;
    border-top: 1px solid #110b00;
    border-radius: 0 0 50% 50%;
    
    -webkit-animation-name: margelefteyelidbottom;
    -webkit-animation-duration: 10s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 1.5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-play-state: running;
    animation-name: margelefteyelidbottom;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-delay: 1.5s;
    animation-iteration-count: infinite;
    animation-play-state: running;
}


@-webkit-keyframes margelefteyelidtop
{
0% {top: -21px;}
2% {top: 0px;}
4% {top: -21px;}
100% {top: -21px;}
}


@keyframes margelefteyelidtop
{
0% {top: -21px;}
2% {top: 0px;}
4% {top: -21px;}
100% {top: -21px;}
}

@-webkit-keyframes margelefteyelidbottom
{
0% {bottom: -11px;}
2% {bottom: 0px;}
4% {bottom: -11px;}
100% {bottom: -11px;}
}


@keyframes margelefteyelidbottom
{
0% {bottom: -11px;}
2% {bottom: 0px;}
4% {bottom: -11px;}
100% {bottom: -11px;}
}

#marge .head .nose
{
    top: 161px;
    left: 93px;
    width: 12px;
    height: 12px;
    border-top: 1px solid #110b00;
    -webkit-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
}

#marge .head .nose-tip
{
    top: 161px;
    left: 103px;
    width: 12px;
    height: 9px;
    border-left: none;
    -moz-border-radius: 0 50% 50% 0%;
    -webkit-border-radius: 0 50% 50% 0;
    border-radius: 0 50% 50% 0;
    -webkit-transform: rotate(-2deg);
    -ms-transform: rotate(-2deg);
    transform: rotate(-2deg);
}

#marge .head .mouth
{
    top: 170px;
    left: 76px;
    width: 50px;
    height: 15px;
    border-bottom: 1px solid #110b00;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -webkit-box-shadow: inset -2px 0px 0px 0px rgba(255,243,164,1);
    -moz-box-shadow: inset -2px 0px 0px 0px rgba(255,243,164,1);
    box-shadow: inset -2px 0px 0px 0px rgba(255,243,164,1);
}

#marge .head .mouth-smile
{
    top: 178px;
    left: 75px;
    width: 7px;
    height: 5px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    border-top: 1px solid #110b00;
    -webkit-transform: rotate(-52deg);
    -ms-transform: rotate(-52deg);
    transform: rotate(-52deg);
}

#marge .head .mouth-lip
{
    top: 168px;
    left: 75px;
    width: 50px;
    height: 16px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

#marge .head .mouth-lip2
{
    top: 176px;
    left: 76px;
    width: 30px;
    height: 14px;
    -moz-border-radius: 32%;
    -webkit-border-radius: 32%;
    border-radius: 32%;
}

#marge .head .neck
{
    top: 168px;
    left: 69px;
    width: 28px;
    height: 23px;
    -webkit-transform: rotate(-4deg);
    -ms-transform: rotate(-4deg);
    transform: rotate(-4deg);
    -webkit-box-shadow: inset 5px 0px 0px 0px rgba(221,170,42,1);
    -moz-box-shadow: inset 5px 0px 0px 0px rgba(221,170,42,1);
    box-shadow: inset 5px 0px 0px 0px rgba(221,170,42,1);
}

#marge .head .neck2
{
    top: 191px;
    left: 70px;
    width: 30px;
    height: 13px;
    border-left: 1px solid #110b00;
    border-right: 1px solid #110b00;
    -webkit-transform: rotate(-1deg);
    -ms-transform: rotate(-1deg);
    transform: rotate(-1deg);
    -webkit-box-shadow: inset 5px 0px 0px 0px rgba(221,170,42,1);
    -moz-box-shadow: inset 5px 0px 0px 0px rgba(221,170,42,1);
    box-shadow: inset 5px 0px 0px 0px rgba(221,170,42,1);
}

#marge .head .neck3
{
    top: 163px;
    left: 109px;
    width: 12px;
    height: 18px;
    border-right: 1px solid #110b00;
    -webkit-transform: rotate(-39deg);
    -ms-transform: rotate(-39deg);
    transform: rotate(-39deg);
    -webkit-box-shadow: inset -2px 0px 0px 0px rgba(255,243,164,1);
    -moz-box-shadow: inset -2px 0px 0px 0px rgba(255,243,164,1);
    box-shadow: inset -2px 0px 0px 0px rgba(255,243,164,1);
}

Lisa

博学多才的女孩子，八岁。全名是 Lisa Simpson。

Lisa 人物头像 HTML 代码：

<div id="lisa">
<div class="head">

    <div class="no-border body head-main"></div>
    <div class="no-border body head-main2"></div>
    <div class="no-border body head-main3"></div>

    <div class="no-border hair9"></div>
    <div class="no-border hair10"></div>

    <div class="body hair hair1"></div>
    <div class="body hair hair2"></div>
    <div class="body hair hair3"></div>
    <div class="body hair hair4"></div>
    <div class="body hair hair5"></div>
    <div class="body hair hair6"></div>
    <div class="body hair hair7"></div>
    <div class="body hair hair8"></div>

    <div class="body mouth-lip2"></div>
    <div class="body mouth-lip"></div>
    <div class="no-border body neck"></div>
    <div class="no-border body mouth"></div>
    <div class="no-border body neck2"></div>
    <div class="no-border body neck3"></div>
    <div class="no-border mouth-smile"></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>

    <div class="no-border eyelash1 eyelash"></div>
    <div class="no-border eyelash2 eyelash"></div>
    <div class="no-border eyelash3 eyelash"></div>
    <div class="no-border eyelash4 eyelash"></div>
    <div class="no-border eyelash5 eyelash"></div>
    <div class="no-border eyelash6 eyelash"></div>
    <div class="no-border eyelash7 eyelash"></div>
    <div class="no-border eyelash8 eyelash"></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="no-border 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 class="necklace necklace1"></div>
    <div class="necklace necklace2"></div>
    <div class="necklace necklace3"></div>
    <div class="necklace necklace5"></div>
    <div class="necklace necklace4"></div>
</div>
</div>

Lisa 人物头像 CSS 代码：

#lisa *
{
    position: absolute;
    box-sizing:content-box;
    -moz-box-sizing:content-box;
}

#lisa
{
    position: relative;
    width: 111px;
    height: 120px;
    margin: 0 auto;
}

#lisa .head *
{
    border: 1px solid #110b00;
}

#lisa .head .no-border
{
    border: none;
}

#lisa .head .body
{
    background: #fbd800;
}

#lisa .head .head-main
{
    top: 27px;
    left: 21px;
    width: 69px;
    height: 68px;
    transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
    -webkit-border-bottom-right-radius: 26px;
    -moz-border-radius-bottomright: 26px;
    border-bottom-right-radius: 26px;
}

#lisa .head .head-main2
{
    top: 46px;
    left: 14px;
    width: 52px;
    height: 36px;
    transform: rotate(-1deg);
    -ms-transform: rotate(-1deg);
    -webkit-transform: rotate(-1deg);
}

#lisa .head .head-main3
{
    top: 17px;
    left: 32px;
    width: 52px;
    height: 20px;
    transform: rotate(-1deg);
    -ms-transform: rotate(-1deg);
    -webkit-transform: rotate(-1deg);
}

#lisa .head .hair
{
    border-right: none;
    border-bottom: none;
    border-top-left-radius: 2px;
    -webkit-border-top-left-radius: 2px;
    -moz-border-radius-topleft: 2px;
}

#lisa .head .hair1
{
    top: 83px;
    left: 24px;
    width: 16px;
    height: 16px;
    background: #eeb011;
    transform: rotate(-45deg) skew(0deg, 14deg);
    -ms-transform: rotate(-45deg) skew(0deg, 14deg);
    -webkit-transform: rotate(-112deg) skew(0deg, 14deg);
}

#lisa .head .hair2
{
    top: 78px;
    left: 12px;
    width: 13px;
    height: 15px;
    transform: rotate(-88deg) skew(0deg, 14deg);
    -ms-transform: rotate(-88deg) skew(0deg, 14deg);
    -webkit-transform: rotate(-88deg) skew(0deg, 14deg);
    -webkit-box-shadow: inset 9px 8px 0px 0px  rgba(238,176,17,1);
    -moz-box-shadow: inset 9px 8px 0px 0px  rgba(238,176,17,1);
    box-shadow: inset 9px 8px 0px 0px  rgba(238,176,17,1);
}

#lisa .head .hair3
{
    top: 57px;
    left: 4px;
    width: 18px;
    height: 18px;
    transform: rotate(-47deg) skew(0deg, 2deg);
    -ms-transform: rotate(-47deg) skew(0deg, 2deg);
    -webkit-transform: rotate(-47deg) skew(0deg, 2deg);
    -webkit-box-shadow: inset 9px 8px 0px 0px  rgba(238,176,17,1);
    -moz-box-shadow: inset 9px 8px 0px 0px  rgba(238,176,17,1);
    box-shadow: inset 9px 8px 0px 0px  rgba(238,176,17,1);
}

#lisa .head .hair4
{
    top: 31px;
    left: 8px;
    width: 19px;
    height: 20px;
    transform: rotate(-21deg) skew(0deg, 2deg);
    -ms-transform: rotate(-21deg) skew(0deg, 2deg);
    -webkit-transform: rotate(-21deg) skew(0deg, 2deg);
    -webkit-box-shadow: inset 9px 4px 0px 0px rgba(238,176,17,1);
    -moz-box-shadow: inset 9px 4px 0px 0px rgba(238,176,17,1);
    box-shadow: inset 9px 4px 0px 0px rgba(238,176,17,1);
}

#lisa .head .hair5
{
    top: 12px;
    left: 23px;
    width: 23px;
    height: 20px;
    transform: rotate(22deg) skew(17deg, 0deg);
    -ms-transform: rotate(22deg) skew(17deg, 0deg);
    -webkit-transform: rotate(22deg) skew(17deg, 0deg);
    border-top-left-radius: 6px;
    -webkit-border-top-left-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -webkit-box-shadow: inset 2px 0px 0px 0px rgba(238,176,17,1);
    -moz-box-shadow: inset 2px 0px 0px 0px rgba(238,176,17,1);
    box-shadow: inset 2px 0px 0px 0px rgba(238,176,17,1);
}

#lisa .head .hair6
{
    top: 6px;
    left: 48px;
    width: 23px;
    height: 20px;
    transform: rotate(48deg) skew(14deg, 0deg);
    -ms-transform: rotate(48deg) skew(14deg, 0deg);
    -webkit-transform: rotate(48deg) skew(14deg, 0deg);
    border-top-left-radius: 4px;
    -webkit-border-top-left-radius: 4px;
    -moz-border-radius-topleft: 4px;
    -webkit-box-shadow: inset 0px 3px 0px 0px rgba(255,243,164,1);
    -moz-box-shadow: inset 0px 3px 0px 0px rgba(255,243,164,1);
    box-shadow: inset 0px 3px 0px 0px rgba(255,243,164,1);
}

#lisa .head .hair7
{
    top: 14px;
    left: 72px;
    width: 21px;
    height: 21px;
    transform: rotate(94deg) skew(11deg, 0deg);
    -ms-transform: rotate(94deg) skew(11deg, 0deg);
    -webkit-transform: rotate(94deg) skew(11deg, 0deg);
    border-top-left-radius: 4px;
    -webkit-border-top-left-radius: 4px;
    -moz-border-radius-topleft: 4px;
    -webkit-box-shadow: inset 3px 4px 0px 0px rgba(255,243,164,1);
    -moz-box-shadow: inset 3px 4px 0px 0px rgba(255,243,164,1);
    box-shadow: inset 3px 4px 0px 0px rgba(255,243,164,1);
}

#lisa .head .hair8
{
    top: 36px;
    left: 82px;
    width: 23px;
    height: 20px;
    transform: rotate(139deg) skew(22deg, 0deg);
    -ms-transform: rotate(139deg) skew(22deg, 0deg);
    -webkit-transform: rotate(139deg) skew(22deg, 0deg);
    border-top-left-radius: 4px;
    -webkit-border-top-left-radius: 6px;
    -moz-border-radius-topleft: 4px;
    -webkit-box-shadow: inset 3px 0px 0px 0px rgba(255,243,164,1);
    -moz-box-shadow: inset 3px 0px 0px 0px rgba(255,243,164,1);
    box-shadow: inset 3px 0px 0px 0px rgba(255,243,164,1);
}

#lisa .head .hair9
{
    top: 73px;
    left: 14px;
    width: 8px;
    height: 13px;
    background: #eeb011;
    transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
}

#lisa .head .hair10
{
    top: 49px;
    left: 13px;
    width: 8px;
    height: 10px;
    background: #eeb011;
    transform: rotate(12deg);
    -ms-transform: rotate(12deg);
    -webkit-transform: rotate(12deg);
}

#lisa .head .ear
{
    top: 77px;
    left: 27px;
    width: 11px;
    height: 13px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -webkit-box-shadow: inset 0px -5px 0px 0px rgba(238,176,17,1);
    -moz-box-shadow: inset 0px -5px 0px 0px rgba(238,176,17,1);
    box-shadow: inset 0px 0px -5px 0px rgba(238,176,17,1);
}

#lisa .head .ear .inner1
{
    top: 3px;
    left: 3px;
    width: 6px;
    height: 5px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    border-top: 1px solid #110b00;
    -webkit-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
}

#lisa .head .ear .inner2
{
    top: 3px;
    left: 5px;
    width: 5px;
    height: 5px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    border-top: 1px solid #110b00;
    -webkit-transform: rotate(-93deg);
    -ms-transform: rotate(-93deg);
    transform: rotate(-93deg);
}

#lisa .head .ear .clip
{
    top: 1px;
    left: 9px;
    width: 3px;
    height: 8px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
}

#lisa .head .eyelash
{
    width: 1px;
    height: 7px;
    background: #110b00;
}

#lisa .head .eyelash1
{
    top: 60px;
    left: 38px;
    -webkit-transform: rotate(-85deg);
    -ms-transform: rotate(-85deg);
    transform: rotate(-85deg);
}

#lisa .head .eyelash2
{
    top: 49px;
    left: 41px;
    -webkit-transform: rotate(-46deg);
    -ms-transform: rotate(-46deg);
    transform: rotate(-46deg);
}

#lisa .head .eyelash3
{
    top: 43px;
    left: 52px;
    -webkit-transform: rotate(-17deg);
    -ms-transform: rotate(-17deg);
    transform: rotate(-17deg);
}

#lisa .head .eyelash4
{
    top: 45px;
    left: 63px;
    -webkit-transform: rotate(12deg);
    -ms-transform: rotate(12deg);
    transform: rotate(12deg);
}

#lisa .head .eyelash5
{
    top: 46px;
    left: 74px;
    -webkit-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    transform: rotate(-20deg);
}

#lisa .head .eyelash6
{
    top: 45px;
    left: 85px;
    transform: rotate(7deg);
    -ms-transform: rotate(7deg);
    -webkit-transform: rotate(7deg);
}

#lisa .head .eyelash7
{
    top: 50px;
    left: 93px;
    transform: rotate(41deg);
    -ms-transform: rotate(41deg);
    -webkit-transform: rotate(41deg);
}

#lisa .head .eyelash8
{
    top: 59px;
    left: 96px;
    transform: rotate(74deg);
    -ms-transform: rotate(74deg);
    -webkit-transform: rotate(74deg);
}

#lisa .head .right-eye
{
    top: 49px;
    left: 68px;
    width: 25px;
    height: 25px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #ffffff;
    overflow: hidden;
}

#lisa .head .right-eye .right-eye-pupil
{
    top: 11px;
    left: 13px;
    width: 4px;
    height: 4px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #110b00;
}

#lisa .head .right-eye .eyelid-top
{
    top: -18px;
    left: 0px;
    width: 30px;
    height: 15px;
    border-bottom: 1px solid #110b00;
    border-radius: 50% 50% 0 0;
    
    -webkit-animation-name: lisarighteyelidtop;
    -webkit-animation-duration: 10s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-play-state: running;
    animation-name: lisarighteyelidtop;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-play-state: running;
}

#lisa .head .right-eye .eyelid-bottom
{
    bottom: -11px;
    left: 0px;
    width: 30px;
    height: 7px;
    border-top: 1px solid #110b00;
    border-radius: 0 0 50% 50%;
    
    -webkit-animation-name: lisarighteyelidbottom;
    -webkit-animation-duration: 10s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-play-state: running;
    animation-name: lisarighteyelidbottom;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-play-state: running;
}

@-webkit-keyframes lisarighteyelidtop
{
0% {top: -18px;}
2% {top: 0px;}
4% {top: -18px;}
100% {top: -18px;}
}

@keyframes lisarighteyelidtop
{
0% {top: -18px;}
2% {top: 0px;}
4% {top: -18px;}
100% {top: -18px;}
}

@-webkit-keyframes lisarighteyelidbottom
{
0% {bottom: -11px;}
2% {bottom: 0px;}
4% {bottom: -11px;}
100% {bottom: -11px;}
}

@keyframes lisarighteyelidbottom
{
0% {bottom: -11px;}
2% {bottom: 0px;}
4% {bottom: -11px;}
100% {bottom: -11px;}
}

#lisa .head .left-eye
{
    top: 48px;
    left: 41px;
    width: 29px;
    height: 28px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #ffffff;
    overflow: hidden;
    -webkit-box-shadow: -9px 13px 0px -7px rgba(251, 216, 0, 1);
    -moz-box-shadow: -9px 13px 0px -7px rgba(251, 216, 0, 1);
    box-shadow: -9px 13px 0px -7px rgba(251, 216, 0, 1);
}

#lisa .head .left-eye .left-eye-pupil
{
    top: 11px;
    left: 9px;
    width: 4px;
    height: 4px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #110b00;
}

#lisa .head .left-eye .eyelid-top
{
    top: -21px;
    left: 0px;
    width: 30px;
    height: 15px;
    border-bottom: 1px solid #110b00;
    border-radius: 50% 50% 0 0;
    
    -webkit-animation-name: lisalefteyelidtop;
    -webkit-animation-duration: 10s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-play-state: running;
    animation-name: lisalefteyelidtop;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-play-state: running;
}

#lisa .head .left-eye .eyelid-bottom
{
    bottom: -11px;
    left: 0px;
    width: 30px;
    height: 9px;
    border-top: 1px solid #110b00;
    border-radius: 0 0 50% 50%;
    
    -webkit-animation-name: lisalefteyelidbottom;
    -webkit-animation-duration: 10s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-play-state: running;
    animation-name: lisalefteyelidbottom;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-play-state: running;
}


@-webkit-keyframes lisalefteyelidtop
{
0% {top: -21px;}
2% {top: 0px;}
4% {top: -21px;}
100% {top: -21px;}
}


@keyframes lisalefteyelidtop
{
0% {top: -21px;}
2% {top: 0px;}
4% {top: -21px;}
100% {top: -21px;}
}

@-webkit-keyframes lisalefteyelidbottom
{
0% {bottom: -11px;}
2% {bottom: 0px;}
4% {bottom: -11px;}
100% {bottom: -11px;}
}


@keyframes lisalefteyelidbottom
{
0% {bottom: -11px;}
2% {bottom: 0px;}
4% {bottom: -11px;}
100% {bottom: -11px;}
}

#lisa .head .nose
{
    top: 68px;
    left: 63px;
    width: 12px;
    height: 12px;
    border-top: 1px solid #110b00;
    -webkit-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
}

#lisa .head .nose-tip
{
    top: 68px;
    left: 73px;
    width: 12px;
    height: 9px;
    border-left: none;
    -moz-border-radius: 0 50% 50% 0%;
    -webkit-border-radius: 0 50% 50% 0;
    border-radius: 0 50% 50% 0;
    -webkit-transform: rotate(-2deg);
    -ms-transform: rotate(-2deg);
    transform: rotate(-2deg);
}

#lisa .head .mouth
{
    top: 77px;
    left: 46px;
    width: 50px;
    height: 15px;
    border-bottom: 1px solid #110b00;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -webkit-box-shadow: inset -2px 0px 0px 0px rgba(255,243,164,1);
    -moz-box-shadow: inset -2px 0px 0px 0px rgba(255,243,164,1);
    box-shadow: inset -2px 0px 0px 0px rgba(255,243,164,1);
}

#lisa .head .mouth-smile
{
    top: 85px;
    left: 45px;
    width: 7px;
    height: 5px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    border-top: 1px solid #110b00;
    -webkit-transform: rotate(-52deg);
    -ms-transform: rotate(-52deg);
    transform: rotate(-52deg);
}

#lisa .head .mouth-lip
{
    top: 75px;
    left: 45px;
    width: 50px;
    height: 16px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

#lisa .head .mouth-lip2
{
    top: 83px;
    left: 46px;
    width: 30px;
    height: 14px;
    -moz-border-radius: 32%;
    -webkit-border-radius: 32%;
    border-radius: 32%;
}

#lisa .head .neck
{
    top: 83px;
    left: 39px;
    width: 28px;
    height: 15px;
    border-left: 1px solid #110b00;
    transform: rotate(-5deg);
    -webkit-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
}

#lisa .head .neck2
{
    top: 98px;
    left: 40px;
    width: 30px;
    height: 17px;
    border-left: 1px solid #110b00;
    border-right: 1px solid #110b00;
    transform: rotate(-1deg);
    -webkit-transform: rotate(-1deg);
    -ms-transform: rotate(-1deg);
}

#lisa .head .neck3
{
    top: 70px;
    left: 79px;
    width: 12px;
    height: 18px;
    border-right: 1px solid #110b00;
    -webkit-transform: rotate(-39deg);
    -ms-transform: rotate(-39deg);
    transform: rotate(-39deg);
    -webkit-box-shadow: inset -2px 0px 0px 0px rgba(255,243,164,1);
    -moz-box-shadow: inset -2px 0px 0px 0px rgba(255,243,164,1);
    box-shadow: inset -2px 0px 0px 0px rgba(255,243,164,1);
}

#lisa .head .necklace
{
    width: 8px;
    height: 8px;
    background: #ffffff;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
}

#lisa .head .necklace1
{
    top: 107px;
    left: 35px;
}

#lisa .head .necklace2
{
    top: 110px;
    left: 44px;
}

#lisa .head .necklace3
{
    top: 110px;
    left: 53px;
}

#lisa .head .necklace4
{
    top: 109px;
    left: 63px;
}

#lisa .head .necklace5
{
    top: 108px;
    left: 69px;
}

Maggie

永远在吸奶嘴的奇迹婴儿，不能说话，聪明机智。

Maggie 人物头像 HTML 代码：

<div id="maggie" style="margin-top: 34px;">
<div class="head">

    <div class="no-border body head-main"></div>

    <div class="body hair hair2"></div>
    <div class="body hair hair1"></div>
    <div class="body hair hair3"></div>
    <div class="body hair hair4"></div>
    <div class="body hair hair5"></div>
    <div class="body hair hair6"></div>
    <div class="body hair hair7"></div>
    <div class="body hair hair8"></div>

    <div class="bow bow1"></div>
    <div class="circle bow bow2"></div>
    <div class="bow bow3"></div>

    <div class="no-border body neck"></div>

    <!-- The ear -->
    <div class="circle body ear">
    <div class="no-border circle inner1"></div>
    <div class="no-border circle inner2"></div>
    <div class="no-border body clip"></div>
    </div>

    <div class="circle body cheek"></div>

    <div class="no-border eyelash1 eyelash"></div>
    <div class="no-border eyelash2 eyelash"></div>
    <div class="no-border eyelash3 eyelash"></div>
    <div class="no-border eyelash4 eyelash"></div>
    <div class="no-border eyelash5 eyelash"></div>
    <div class="no-border eyelash6 eyelash"></div>
    <div class="no-border eyelash7 eyelash"></div>
    <div class="no-border eyelash8 eyelash"></div>

    <!-- The right eye -->
    <div class="circle eye right-eye">
    <div class="no-border circle 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-tip"></div>

    <!-- The left eye -->
    <div class="circle eye left-eye">
    <div class="no-border circle pupil"></div>
    <div class="no-border body eyelid-top"></div>
    <div class="no-border body eyelid-bottom"></div>
    </div>

    <div class="circle body mouth"></div>

    <div class="circle dummy dummy1"></div>
    <div class="dummy dummy2">
    <div class="dummy dummy3"></div>
    </div>
</div>
</div>

Maggie 人物头像 CSS 代码：　

#maggie *
{
    position: absolute;
    box-sizing:content-box;
    -moz-box-sizing:content-box;
}

#maggie
{
    position: relative;
    width: 111px;
    height: 106px;
    margin: 0 auto;
}

#maggie .head *
{
    border: 1px solid #110b00;
}

#maggie .head .no-border
{
    border: none;
}

#maggie .head .circle
{
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
}

#maggie .head .body
{
    background: #fbd800;
}

#maggie .head .head-main
{
    top: 17px;
    left: 25px;
    width: 67px;
    height: 66px;
    transform: rotate(11deg);
    -ms-transform: rotate(11deg);
    -webkit-transform: rotate(11deg);
    -webkit-border-bottom-right-radius: 26px;
    -moz-border-radius-bottomright: 26px;
    border-bottom-right-radius: 26px;
}

#maggie .head .hair
{
    border-right: none;
    border-bottom: none;
    border-top-left-radius: 2px;
    -webkit-border-top-left-radius: 2px;
    -moz-border-radius-topleft: 2px;
}

#maggie .head .hair1
{
    top: 89px;
    left: 31px;
    width: 9px;
    height: 14px;
    border-top-left-radius: 4px;
    -webkit-border-top-left-radius: 4px;
    -moz-border-radius-topleft: 4px;
    transform: rotate(-97deg) skew(0deg, 8deg);
    -ms-transform: rotate(-97deg) skew(0deg, 8deg);
    -webkit-transform: rotate(-97deg) skew(0deg, 8deg);
}

#maggie .head .hair2
{
    top: 73px;
    left: 17px;
    width: 18px;
    height: 20px;
    border-top-left-radius: 4px;
    -webkit-border-top-left-radius: 4px;
    -moz-border-radius-topleft: 4px;
    transform: rotate(-88deg) skew(0deg, 14deg);
    -ms-transform: rotate(-88deg) skew(0deg, 14deg);
    -webkit-transform: rotate(-88deg) skew(0deg, 14deg);
}

#maggie .head .hair3
{
    top: 51px;
    left: 6px;
    width: 22px;
    height: 21px;
    border-top-left-radius: 6px;
    -webkit-border-top-left-radius: 6px;
    -moz-border-radius-topleft: 6px;
    transform: rotate(-62deg) skew(3deg, 18deg);
    -ms-transform: rotate(-62deg) skew(3deg, 18deg);
    -webkit-transform: rotate(-62deg) skew(3deg, 18deg);
    box-shadow: 5px 1px 0px 0px rgba(251, 216, 0, 1);
    -webkit-box-shadow: 5px 1px 0px 0px rgba(251, 216, 0, 1);
    -moz-box-shadow: 5px 1px 0px 0px rgba(251, 216, 0, 1);
}

#maggie .head .hair4
{
    top: 25px;
    left: 10px;
    width: 23px;
    height: 24px;
    border-top-left-radius: 7px;
    -webkit-border-top-left-radius: 7px;
    -moz-border-radius-topleft: 7px;
    transform: rotate(-21deg) skew(10deg, 15deg);
    -ms-transform:rotate(-21deg) skew(10deg, 15deg);
    -webkit-transform: rotate(-21deg) skew(10deg, 15deg);
}

#maggie .head .hair5
{
    top: 9px;
    left: 29px;
    width: 23px;
    height: 21px;
    transform: rotate(28deg) skew(17deg, 0deg);
    -ms-transform: rotate(28deg) skew(17deg, 0deg);
    -webkit-transform: rotate(28deg) skew(17deg, 0deg);
    border-top-left-radius: 6px;
    -webkit-border-top-left-radius: 6px;
    -moz-border-radius-topleft: 6px;
}

#maggie .head .hair6
{
    top: 8px;
    left: 53px;
    width: 26px;
    height: 20px;
    transform: rotate(65deg) skew(21deg, 0deg);
    -ms-transform: rotate(65deg) skew(21deg, 0deg);
    -webkit-transform: rotate(65deg) skew(21deg, 0deg);
    border-top-left-radius: 6px;
    -webkit-border-top-left-radius: 6px;
    -moz-border-radius-topleft: 6px;
}

#maggie .head .hair7
{
    top: 20px;
    left: 77px;
    width: 21px;
    height: 18px;
    transform: rotate(94deg) skew(20deg, 0deg);
    -ms-transform: rotate(94deg) skew(20deg, 0deg);
    -webkit-transform: rotate(94deg) skew(20deg, 0deg);
    border-top-left-radius: 4px;
    -webkit-border-top-left-radius: 4px;
    -moz-border-radius-topleft: 4px;
}

#maggie .head .hair8
{
    top: 41px;
    left: 81px;
    width: 28px;
    height: 15px;
    transform: rotate(139deg) skew(37deg, 0deg);
    -ms-transform: rotate(139deg) skew(37deg, 0deg);
    -webkit-transform: rotate(139deg) skew(37deg, 0deg);
    border-top-left-radius: 12px;
    -webkit-border-top-left-radius: 12px;
    -moz-border-radius-topleft: 12px;
}

#maggie .head .bow
{
    background: #67ccf4;
}

#maggie .head .bow1
{
    top: 22px;
    left: 61px;
    width: 8px;
    height: 10px;
    border-radius: 19% 47% 50% 35% / 33% 50% 50% 49%;
    -webkit-border-radius: 19% 47% 50% 35% / 33% 50% 50% 49%;
    -moz-border-radius: 19% 47% 50% 35% / 33% 50% 50% 49%;
    transform: perspective(10px) rotateX(-10deg) rotateY(24deg) rotate(-85deg);
    -ms-transform: perspective(10px) rotateX(-10deg) rotateY(24deg) rotate(-85deg);
    -webkit-transform: perspective(10px) rotateX(-10deg) rotateY(24deg) rotate(-85deg);
    transform-origin: left center;
    -ms-transform-origin: left center;
    -webkit-transform-origin: left center;
}

#maggie .head .bow2
{
    top: 20px;
    left: 65px;
    width: 4px;
    height: 6px;
    transform: rotate(7deg);
    -ms-transform: rotate(7deg);
    -webkit-transform: rotate(7deg);
}

#maggie .head .bow3
{
    top: 23px;
    left: 73px;
    width: 8px;
    height: 10px;
    border-radius: 19% 59% 68% 24% / 33% 56% 50% 26%;
    -webkit-border-radius: 19% 59% 68% 24% / 33% 56% 50% 26%;
    -moz-border-radius: 19% 59% 68% 24% / 33% 56% 50% 26%;
    transform: perspective(10px) rotateX(-2deg) rotateY(-28deg) rotate(-72deg);
    -ms-transform: perspective(10px) rotateX(-2deg) rotateY(-28deg) rotate(-72deg);
    -webkit-transform: perspective(10px) rotateX(-2deg) rotateY(-28deg) rotate(-72deg);
    transform-origin: left center;
    -ms-transform-origin: left center;
    -webkit-transform-origin: left center;
}

#maggie .head .ear
{
    top: 80px;
    left: 30px;
    width: 11px;
    height: 11px;
    box-shadow: inset 0px 0px -5px 0px rgba(238,176,17,1), 0px -4px 0px 0px rgba(251, 216, 0, 1);
    -webkit-box-shadow: inset 0px -5px 0px 0px rgba(238,176,17,1), 0px -4px 0px 0px rgba(251, 216, 0, 1);
    -moz-box-shadow: inset 0px -5px 0px 0px rgba(238,176,17,1), 0px -4px 0px 0px rgba(251, 216, 0, 1);
}

#maggie .head .ear .inner1
{
    top: 3px;
    left: 3px;
    width: 6px;
    height: 5px;
    border-top: 1px solid #110b00;
    transform: rotate(3deg);
    -webkit-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
}

#maggie .head .ear .inner2
{
    top: 3px;
    left: 5px;
    width: 5px;
    height: 5px;
    border-top: 1px solid #110b00;
    transform: rotate(-93deg);
    -webkit-transform: rotate(-93deg);
    -ms-transform: rotate(-93deg);
}

#maggie .head .ear .clip
{
    top: 1px;
    left: 9px;
    width: 3px;
    height: 8px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
}

#maggie .head .eyelash
{
    width: 1px;
    height: 7px;
    background: #110b00;
}

#maggie .head .eyelash1
{
    top: 60px;
    left: 38px;
    transform: rotate(-85deg);
    -webkit-transform: rotate(-85deg);
    -ms-transform: rotate(-85deg);
}

#maggie .head .eyelash2
{
    top: 49px;
    left: 41px;
    transform: rotate(-46deg);
    -webkit-transform: rotate(-46deg);
    -ms-transform: rotate(-46deg);
}

#maggie .head .eyelash3
{
    top: 43px;
    left: 52px;
    transform: rotate(-17deg);
    -webkit-transform: rotate(-17deg);
    -ms-transform: rotate(-17deg);
}

#maggie .head .eyelash4
{
    top: 45px;
    left: 63px;
    transform: rotate(12deg);
    -webkit-transform: rotate(12deg);
    -ms-transform: rotate(12deg);
}

#maggie .head .eyelash5
{
    top: 46px;
    left: 74px;
    transform: rotate(-20deg);
    -webkit-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
}

#maggie .head .eyelash6
{
    top: 45px;
    left: 85px;
    transform: rotate(7deg);
    -ms-transform: rotate(7deg);
    -webkit-transform: rotate(7deg);
}

#maggie .head .eyelash7
{
    top: 50px;
    left: 93px;
    transform: rotate(41deg);
    -ms-transform: rotate(41deg);
    -webkit-transform: rotate(41deg);
}

#maggie .head .eyelash8
{
    top: 59px;
    left: 96px;
    transform: rotate(74deg);
    -ms-transform: rotate(74deg);
    -webkit-transform: rotate(74deg);
}

#maggie .head .eye
{
    background: #ffffff;
    overflow: hidden;
}

#maggie .head .eye .pupil
{
    background: #110b00;
}

#maggie .head .right-eye
{
    top: 46px;
    left: 66px;
    width: 26px;
    height: 25px;
}

#maggie .head .right-eye .pupil
{
    top: 11px;
    left: 13px;
    width: 4px;
    height: 4px;
}

#maggie .head .right-eye .eyelid-top
{
    top: -16px;
    left: 0px;
    width: 26px;
    height: 15px;
    border-bottom: 1px solid #110b00;
    border-radius: 50% 50% 0 0;
    
    -webkit-animation-name: maggierighteyelidtop;
    -webkit-animation-duration: 10s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 0.9s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-play-state: running;
    animation-name: maggierighteyelidtop;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-delay: 0.9s;
    animation-iteration-count: infinite;
    animation-play-state: running;
}

#maggie .head .right-eye .eyelid-bottom
{
    bottom: -9px;
    left: 0px;
    width: 26px;
    height: 8px;
    border-top: 1px solid #110b00;
    border-radius: 0 0 50% 50%;
    
    -webkit-animation-name: maggierighteyelidbottom;
    -webkit-animation-duration: 10s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 0.9s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-play-state: running;
    animation-name: maggierighteyelidbottom;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-delay: 0.9s;
    animation-iteration-count: infinite;
    animation-play-state: running;
}

@-webkit-keyframes maggierighteyelidtop
{
0% {top: -16px;}
2% {top: 0px;}
4% {top: -16px;}
100% {top: -16px;}
}

@keyframes maggierighteyelidtop
{
0% {top: -16px;}
2% {top: 0px;}
4% {top: -16px;}
100% {top: -16px;}
}

@-webkit-keyframes maggierighteyelidbottom
{
0% {bottom: -9px;}
2% {bottom: 0px;}
4% {bottom: -9px;}
100% {bottom: -9px;}
}

@keyframes maggierighteyelidbottom
{
0% {bottom: -9px;}
2% {bottom: 0px;}
4% {bottom: -9px;}
100% {bottom: -9px;}
}

#maggie .head .left-eye
{
    top: 47px;
    left: 40px;
    width: 28px;
    height: 27px;
    -webkit-box-shadow: -9px 13px 0px -7px rgba(251, 216, 0, 1);
    -moz-box-shadow: -9px 13px 0px -7px rgba(251, 216, 0, 1);
    box-shadow: -9px 13px 0px -7px rgba(251, 216, 0, 1);
}

#maggie .head .left-eye .pupil
{
    top: 11px;
    left: 9px;
    width: 4px;
    height: 4px;
}

#maggie .head .left-eye .eyelid-top
{
    top: -18px;
    left: 0px;
    width: 28px;
    height: 17px;
    border-bottom: 1px solid #110b00;
    border-radius: 50% 50% 0 0;
    
    -webkit-animation-name: maggielefteyelidtop;
    -webkit-animation-duration: 10s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 0.9s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-play-state: running;
    animation-name: maggielefteyelidtop;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-delay: 0.9s;
    animation-iteration-count: infinite;
    animation-play-state: running;
}

#maggie .head .left-eye .eyelid-bottom
{
    bottom: -9px;
    left: 0px;
    width: 28px;
    height: 8px;
    border-top: 1px solid #110b00;
    border-radius: 0 0 50% 50%;
    
    -webkit-animation-name: maggielefteyelidbottom;
    -webkit-animation-duration: 10s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 0.9s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-play-state: running;
    animation-name: maggielefteyelidbottom;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-delay: 0.9s;
    animation-iteration-count: infinite;
    animation-play-state: running;
}


@-webkit-keyframes maggielefteyelidtop
{
0% {top: -18px;}
2% {top: 0px;}
4% {top: -18px;}
100% {top: -18px;}
}


@keyframes maggielefteyelidtop
{
0% {top: -18px;}
2% {top: 0px;}
4% {top: -18px;}
100% {top: -18px;}
}

@-webkit-keyframes maggielefteyelidbottom
{
0% {bottom: -9px;}
2% {bottom: 0px;}
4% {bottom: -9px;}
100% {bottom: -9px;}
}


@keyframes maggielefteyelidbottom
{
0% {bottom: -9px;}
2% {bottom: 0px;}
4% {bottom: -9px;}
100% {bottom: -9px;}
}

#maggie .head .nose-tip
{
    top: 67px;
    left: 69px;
    width: 12px;
    height: 9px;
    border-left: none;
    -moz-border-radius: 0 50% 50% 0%;
    -webkit-border-radius: 0 50% 50% 0;
    border-radius: 0 50% 50% 0;
    -webkit-transform: rotate(-2deg);
    -ms-transform: rotate(-2deg);
    transform: rotate(-2deg);
    -webkit-box-shadow: 5px 8px 0px 0px rgba(251, 216, 0, 1);
    -moz-box-shadow: 5px 8px 0px 0px rgba(251, 216, 0, 1);
    box-shadow: 5px 8px 0px 0px rgba(251, 216, 0, 1);
}

#maggie .head .cheek
{
    top: 68px;
    left: 77px;
    width: 12px;
    height: 16px;
    transform: rotate(9deg);
    -ms-transform: rotate(9deg);
    -webkit-transform: rotate(9deg);
}

#maggie .head .mouth
{
    top: 88px;
    left: 62px;
    width: 12px;
    height: 16px;
    transform: rotate(9deg);
    -ms-transform: rotate(9deg);
    -webkit-transform: rotate(9deg);
}


#maggie .head .dummy
{
    background: #ee5c2d;
}

#maggie .head .dummy1
{
    top: 84px;
    left: 67px;
    width: 25px;
    height: 15px;
    transform: rotate(-39deg);
    -ms-transform: rotate(-39deg);
    -webkit-transform: rotate(-39deg);
    -webkit-box-shadow: -7px -10px 0px -1px rgba(251, 216, 0, 1);
    -moz-box-shadow: -7px -10px 0px -1px rgba(251, 216, 0, 1);
    box-shadow: -7px -10px 0px -1px rgba(251, 216, 0, 1);
}

#maggie .head .dummy2
{
    top: 90px;
    left: 78px;
    width: 14px;
    height: 13px;
    border-radius: 0 50% 50% 0;
    -webkit-border-radius: 0 50% 50% 0;
    -moz-border-radius: 0 50% 50% 0;
    transform: rotate(49deg);
    -ms-transform: rotate(49deg);
    -webkit-transform: rotate(49deg);
}

#maggie .head .dummy3
{
    top: 4px;
    left: -1px;
    width: 6px;
    height: 3px;
    border-left: none;
    border-radius: 0 50% 50% 0;
    -webkit-border-radius: 0 50% 50% 0;
    -moz-border-radius: 0 50% 50% 0;
}

#maggie .head .neck
{
    top: 81px;
    left: 42px;
    width: 20px;
    height: 20px;
    border-left: 1px solid #110b00;
    transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    -webkit-transform: rotate(-5deg);
}

Mr Burns

104岁，Homer的老板，有一个长相极其滑稽的兄弟。

Mr Burns 人物头像 HTML 代码：

<div id="mr-burns" style="margin-top: 50px;">
<div class="head">
    <div class="hair"></div>
    <div class="no-border hair-line hair-line1"></div>
    <div class="no-border hair-line hair-line2"></div>
    <div class="no-border hair-line hair-line3"></div>
    <div class="no-border hair-line hair-line4"></div>

    <div class="ear">
    <div class="no-border inner1"></div>
    <div class="no-border inner2"></div>
    </div>

    <div class="head-main"></div>
    <div class="no-border head-main2"></div>
    <div class="no-border head-main3"></div>
    <div class="no-border head-main4"></div>

    <div class="sideburn"></div>
    <div class="liverspot1 liverspot"></div>
    <div class="liverspot2 liverspot"></div>
    <div class="liverspot3 liverspot"></div>    

    <div class="eye-bulge"></div>
    <div class="eye left-eye">
    <div class="no-border pupil"></div>
    <div class="no-border body eyelid-top"></div>
    <div class="no-border body eyelid-bottom"></div>
    </div>
    <div class="eye right-eye">
    <div class="no-border pupil"></div>
    <div class="no-border body eyelid-top"></div>
    <div class="no-border body eyelid-bottom"></div>
    </div>

    <div class="no-border nose-bottom"></div>
    <div class="no-border nose-top1"></div>
    <div class="no-border nose-top2"></div>
    <div class="nose-tip"></div>
    <div class="no-border nose-inner"></div>

    <div class="no-border eyebrow eyebrow1"></div>
    <div class="no-border eyebrow eyebrow2"></div>
    <div class="no-border eyebrow eyebrow3"></div>

    <div class="no-border neck2"></div>
    <div class="no-border neck1"></div>
    <div class="no-border neck3"></div>
    <div class="no-border neck4"></div>
    <div class="no-border bottom-lip"></div>

    <div class="tooth tooth1"></div>
    <div class="tooth tooth2"></div>
    <div class="tooth tooth3"></div>
    <div class="tooth tooth4"></div>
    <div class="tooth tooth5"></div>
    <div class="tooth tooth6"></div>
    <div class="no-border tooth tooth7"></div>
    <div class="no-border teeth"></div>

    <div class="no-border top-lip"></div>
    <div class="no-border top-lip2"></div>
    <div class="no-border cheek"></div>
    <div class="nose-curl"></div>
</div>
</div>

Mr Burns 人物头像 CSS 代码：

#mr-burns *
{
    position: absolute;
    box-sizing:content-box;
    -moz-box-sizing:content-box;
}

#mr-burns
{
    position: relative;
    width: 90px;
    height: 90px; 
    margin: 0 auto;
}

#mr-burns .head *
{
    border: 1px solid #110b00;
}

#mr-burns .head .no-border
{
    border: none;
}

#mr-burns .head .body
{
    background: #fbd800;
}

#mr-burns .head .hair
{
    top: 3px;
    left: 34px;
    width: 45px;
    height: 42px;
    background: #b0b5b8;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    overflow: hidden;
}

#mr-burns .head .hair-line
{
    border-bottom: none;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
}

#mr-burns .head .hair-line1
{
    top: 3px;
    left: 13px;
    width: 15px;
    height: 5px;
    transform: rotate(-53deg);
    -webkit-transform: rotate(-53deg);
    -ms-transform: rotate(-53deg);
}

#mr-burns .head .hair-line2
{
    top: 5px;
    left: 23px;
    width: 21px;
    height: 8px;
    transform: rotate(-26deg);
    -webkit-transform: rotate(-26deg);
    -ms-transform: rotate(-26deg);
}

#mr-burns .head .hair-line3
{
    top: 18px;
    left: 19px;
    width: 28px;
    height: 11px;
    transform: rotate(32deg);
    -webkit-transform: rotate(32deg);
    -ms-transform: rotate(32deg);
}

#mr-burns .head .hair-line4
{
    top: 25px;
    left: 14px;
    width: 22px;
    height: 9px;
    transform: rotate(40deg);
    -webkit-transform: rotate(40deg);
    -ms-transform: rotate(40deg);
}

#mr-burns .head .sideburn
{
    top: 33px;
    left: 56px;
    width: 6px;
    height: 15px;
    background: #b0b5b8;
    border-top: none;
    -webkit-border-radius: 0px 2px 3px 2px;
    -moz-border-radius: 0px 2px 3px 2px;
    border-radius: 0px 2px 3px 2px;
    -webkit-transform: rotate(-24deg);
    -ms-transform: rotate(-24deg);
    transform: rotate(-24deg);
    box-shadow: -10px 16px 0px 5px rgba(248,220,0,1);
    -webkit-box-shadow: -10px 16px 0px 5px rgba(248,220,0,1);
    -moz-box-shadow: -10px 16px 0px 5px rgba(248,220,0,1);
}

#mr-burns .head .eyebrow
{
    display: none;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

#mr-burns .head .eyebrow1
{
    top: 30px;
    left: 9px;
    width: 38px;
    height: 16px;
    border-top: none;
    -webkit-transform: rotate(-8deg);
    -ms-transform: rotate(-8deg);
    transform: rotate(-8deg);
    -webkit-box-shadow: inset 18px 18px 0px 0px rgba(248,220,0,1);
    -moz-box-shadow: inset 18px 18px 0px 0px rgba(248,220,0,1);
    box-shadow: inset 18px 18px 0px 0px rgba(248,220,0,1);
}

#mr-burns .head .eyebrow2
{
    top: 36px;
    left: 4px;
    width: 14px;
    height: 6px;
    border-bottom: none;
    -webkit-transform: rotate(-127deg);
    -ms-transform: rotate(-127deg);
    transform: rotate(-127deg);
    -webkit-box-shadow: inset 18px 18px 0px 0px rgba(248,220,0,1);
    -moz-box-shadow: inset 18px 18px 0px 0px rgba(248,220,0,1);
    box-shadow: inset 18px 18px 0px 0px rgba(248,220,0,1);
}

#mr-burns .head .eyebrow3
{
    top: 27px;
    left: 0px;
    width: 15px;
    height: 4px;
    border-bottom: none;
    transform: rotate(-88deg);
    -webkit-transform: rotate(-88deg);
    -ms-transform: rotate(-88deg);
    box-shadow: inset 18px 18px 0px 0px rgba(248,220,0,1);
    -webkit-box-shadow: inset 18px 18px 0px 0px rgba(248,220,0,1);
    -moz-box-shadow: inset 18px 18px 0px 0px rgba(248,220,0,1);
}

#mr-burns .head .head-main
{
    top: -4px;
    left: 15px;
    display: block;
    width: 37px;
    height: 57px;
    background: #f8dc00;
    border-radius: 50% 50% 40% 50% / 50% 50% 27% 50%;
    -webkit-border-radius: 50% 50% 40% 50% / 50% 50% 27% 50%;
    -moz-border-radius: 50% 50% 40% 50% / 50% 50% 27% 50%;
    transform: rotate(79deg);
    -webkit-transform: rotate(79deg);
    -ms-transform: rotate(79deg);
}

#mr-burns .head .head-main2
{
    top: 31px;
    left: 15px;
    display: block;
    width: 42px;
    height: 34px;
    background: #f8dc00;
    -webkit-transform: rotate(-24deg);
    -ms-transform: rotate(-24deg);
    transform: rotate(-24deg);
}

#mr-burns .head .head-main3
{
    top: 36px;
    left: 44px;
    display: block;
    width: 11px;
    height: 9px;
    background: #f8dc00;
    -webkit-transform: rotate(-24deg);
    -ms-transform: rotate(-24deg);
    transform: rotate(-24deg);
}

#mr-burns .head .liverspot
{
    width: 2px;
    height: 2px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
}

#mr-burns .head .liverspot1
{
    top: 15px;
    left: 45px;
    width: 3px;
    height: 3px;
}

#mr-burns .head .liverspot2
{
    top: 21px;
    left: 51px;
}

#mr-burns .head .liverspot3
{
    top: 27px;
    left: 42px;
}

#mr-burns .head .eye-bulge
{
    top: 49px;
    left: 12px;
    width: 5px;
    height: 6px;
    background: #f8dc00;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
}

#mr-burns .head .eye
{
    background: #ffffff;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    overflow: hidden;
}

#mr-burns .head .left-eye
{
    top: 39px;
    left: 10px;
    width: 12px;
    height: 12px;
}

#mr-burns .head .pupil
{
    background: #110b00;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
}

#mr-burns .head .left-eye .pupil
{
    top: 5px;
    left: 4px;
    width: 3px;
    height: 3px;
}

#mr-burns .head .right-eye
{
    top: 37px;
    left: 25px;
    width: 18px;
    height: 15px;
}

#mr-burns .head .right-eye .pupil
{
    top: 6px;
    left: 11px;
    width: 3px;
    height: 3px;
}

#mr-burns .head .right-eye .eyelid-top
{
    top: -11px;
    left: 0px;
    width: 18px;
    height: 10px;
    border-bottom: 1px solid #110b00;
    border-radius: 50% 50% 0 0;
    
    -webkit-animation-name: mrburnsrighteyelidtop;
    -webkit-animation-duration: 10s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-play-state: running;
    animation-name: mrburnsrighteyelidtop;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-play-state: running;
}

#mr-burns .head .right-eye .eyelid-bottom
{
    bottom: -4px;
    left: 0px;
    width: 18px;
    height: 3px;
    border-top: 1px solid #110b00;
    border-radius: 0 0 50% 50%;
    
    -webkit-animation-name: mrburnsrighteyelidbottom;
    -webkit-animation-duration: 10s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-play-state: running;
    animation-name: mrburnsrighteyelidbottom;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-play-state: running;
}

@-webkit-keyframes mrburnsrighteyelidtop
{
0% {top: -18px;}
4% {top: 0px;}
8% {top: -18px;}
100% {top: -18px;}
}

@keyframes mrburnsrighteyelidtop
{
0% {top: -18px;}
4% {top: 0px;}
8% {top: -18px;}
100% {top: -18px;}
}

@-webkit-keyframes mrburnsrighteyelidbottom
{
0% {bottom: -11px;}
4% {bottom: 0px;}
8% {bottom: -11px;}
100% {bottom: -11px;}
}

@keyframes mrburnsrighteyelidbottom
{
0% {bottom: -11px;}
4% {bottom: 0px;}
8% {bottom: -11px;}
100% {bottom: -11px;}
}

#mr-burns .head .ear
{
    top: 31px;
    left: 61px;
    width: 11px;
    height: 12px;
    background: #f8dc00;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
}

#mr-burns .head .ear .inner1
{
    top: 3px;
    left: 2px;
    width: 6px;
    height: 2px;
    border-bottom: none;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-transform: rotate(-21deg);
    -ms-transform: rotate(-21deg);
    transform: rotate(-21deg);
}

#mr-burns .head .ear .inner2
{
    top: 3px;
    left: 4px;
    width: 2px;
    height: 5px;
    border-left: none;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-transform: rotate(-11deg);
    -ms-transform: rotate(-11deg);
    transform: rotate(-11deg);
}

#mr-burns .head .nose-curl
{
    top: 61px;
    left: 16px;
    width: 6px;
    height: 5px;
    background: #f8dc00;
    border-left: none;
    border-radius: 0 5px 5px 0px;
    -webkit-border-radius: 0 5px 5px 0px;
    -moz-border-radius: 0 5px 5px 0px;
    -webkit-transform: rotate(-33deg);
    -ms-transform: rotate(-33deg);
    transform: rotate(-33deg);
}

#mr-burns .head .nose-bottom
{
    top: 72px;
    left: 5px;
    width: 15px;
    height: 1px;
    border-top: none;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-transform: rotate(140deg);
    -ms-transform: rotate(140deg);
    transform: rotate(140deg);
}

#mr-burns .head .nose-top1
{
    top: 52px;
    left: 5px;
    width: 18px;
    height: 3px;
    border-top: none;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-transform: rotate(-55deg);
    -ms-transform: rotate(-55deg);
    transform: rotate(-55deg);
    -webkit-box-shadow: 3px 3px 0px 0px rgba(248,220,0,1);
    -moz-box-shadow: 3px 3px 0px 0px rgba(248,220,0,1);
    box-shadow: 3px 3px 0px 0px rgba(248,220,0,1);
}

#mr-burns .head .nose-top2
{
    top: 64px;
    left: 2px;
    width: 13px;
    height: 3px;
    border-top: none;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    transform: rotate(120deg);
    -webkit-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    box-shadow: inset 5px 2px 0px 0px rgba(248,220,0,1);
    -webkit-box-shadow: inset 5px 2px 0px 0px rgba(248,220,0,1);
    -moz-box-shadow: inset 5px 2px 0px 0px rgba(248,220,0,1);
}

#mr-burns .head .nose-tip
{
    top: 69px;
    left: 4px;
    width: 6px;
    height: 6px;
    background: #f8dc00;
    border-right: none;
    -webkit-border-radius: 14px 0 0 2px;
    -moz-border-radius: 14px 0 0 2px;
    border-radius: 14px 0 0 2px;
    -webkit-transform: rotate(-42deg);
    -ms-transform: rotate(-42deg);
    transform: rotate(-42deg);
}

#mr-burns .head .nose-inner
{
    top: 59px;
    left: 3px;
    width: 30px;
    height: 8px;
    background: #f8dc00;
    -webkit-border-radius: 23px 0 0 2px;
    -moz-border-radius: 23px 0 0 2px;
    border-radius: 23px 0 0 2px;
    -webkit-transform: rotate(-40deg);
    -ms-transform: rotate(-40deg);
    transform: rotate(-40deg);
}

#mr-burns .head .top-lip
{
    top: 60px;
    left: 20px;
    width: 38px;
    height: 11px;
    border-top: none;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    transform: rotate(-24deg);
    -webkit-transform: rotate(-24deg);
    -ms-transform: rotate(-24deg);
    box-shadow: inset 2px -12px 0px 0px rgba(248,220,0,1);
    -webkit-box-shadow: inset 2px -12px 0px 0px rgba(248,220,0,1);
    -moz-box-shadow: inset 2px -12px 0px 0px rgba(248,220,0,1);
}

#mr-burns .head .top-lip2
{
    top: 67px;
    left: 18px;
    width: 9px;
    height: 8px;
    border-left: 1px solid #110b00;
    border-bottom: 1px solid #110b00;
    border-radius: 0px 2px 0px 2px;
    -webkit-border-radius: 0px 2px 0px 2px;
    -moz-border-radius: 0px 2px 0px 2px;
    transform: rotate(1deg);
    -webkit-transform: rotate(1deg);
    -ms-transform: rotate(1deg);
    box-shadow: inset 9px -8px 0px 0px rgba(248,220,0,1);
    -webkit-box-shadow: inset 9px -8px 0px 0px rgba(248,220,0,1);
    -moz-box-shadow: inset 9px -8px 0px 0px rgba(248,220,0,1);
}

#mr-burns .head .cheek
{
    top: 60px;
    left: 56px;
    width: 2px;
    height: 5px;
    border-left: none;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    transform: rotate(-68deg);
    -webkit-transform: rotate(-68deg);
    -ms-transform: rotate(-68deg);
}

#mr-burns .head .bottom-lip
{
    top: 72px;
    left: 43px;
    width: 5px;
    height: 3px;
    border-left: 1px solid #110b00;
    border-bottom: 1px solid #110b00;
    border-radius: 0px 2px 0px 2px;
    -webkit-border-radius: 0px 2px 0px 2px;
    -moz-border-radius: 0px 2px 0px 2px;
    transform: rotate(-9deg);
    -webkit-transform: rotate(-9deg);
    -ms-transform: rotate(-9deg);
    box-shadow: inset 5px -3px 0px 0px rgba(248,220,0,1);
    -webkit-box-shadow: inset 5px -3px 0px 0px rgba(248,220,0,1);
    -moz-box-shadow: inset 5px -3px 0px 0px rgba(248,220,0,1);
}

#mr-burns .head .tooth
{
    background: #ffffff;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
}

#mr-burns .head .tooth1
{
    top: 73px;
    left: 28px;
    width: 4px;
    height: 3px;
}

#mr-burns .head .tooth2
{
    top: 72px;
    left: 33px;
    width: 4px;
    height: 3px;
}

#mr-burns .head .tooth3
{
    top: 70px;
    left: 38px;
    width: 4px;
    height: 3px;
}

#mr-burns .head .tooth4
{
    top: 68px;
    left: 43px;
    width: 4px;
    height: 3px;
}

#mr-burns .head .tooth5
{
    top: 66px;
    left: 47px;
    width: 4px;
    height: 3px;
}

#mr-burns .head .tooth6
{
    top: 64px;
    left: 50px;
    width: 4px;
    height: 3px;
}

#mr-burns .head .tooth7
{
    top: 64px;
    left: 55px;
    width: 5px;
    height: 2px;
    background: transparent;
    border-bottom: 1px solid #110b00;
    -webkit-transform: rotate(140deg);
    -ms-transform: rotate(140deg);
    transform: rotate(140deg);
}

#mr-burns .head .teeth
{
    top: 60px;
    left: 23px;
    width: 33px;
    height: 11px;
    border-left: 2px solid #ffffff;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    transform: rotate(-24deg);
    -webkit-transform: rotate(-24deg);
    -ms-transform: rotate(-24deg);
}

#mr-burns .head .neck1
{
    top: 71px;
    left: 46px;
    width: 27px;
    height: 12px;
    border-top: none;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    transform: rotate(32deg);
    -webkit-transform: rotate(32deg);
    -ms-transform: rotate(32deg);
    box-shadow: inset 2px -12px 0px 0px rgba(248,220,0,1);
    -webkit-box-shadow: inset 2px -12px 0px 0px rgba(248,220,0,1);
    -moz-box-shadow: inset 2px -12px 0px 0px rgba(248,220,0,1);
}

#mr-burns .head .neck2
{
    top: 73px;
    left: 61px;
    width: 16px;
    height: 9px;
    border-top: none;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    transform: rotate(-73deg);
    -webkit-transform: rotate(-73deg);
    -ms-transform: rotate(-73deg);
    box-shadow: inset 2px -12px 0px 0px rgba(248,220,0,1);
    -webkit-box-shadow: inset 2px -12px 0px 0px rgba(248,220,0,1);
    -moz-box-shadow: inset 2px -12px 0px 0px rgba(248,220,0,1);
}

#mr-burns .head .neck3
{
    top: 57px;
    left: 61px;
    width: 21px;
    height: 9px;
    border-top: none;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    transform: rotate(59deg);
    -webkit-transform: rotate(59deg);
    -ms-transform: rotate(59deg);
    box-shadow: 1px 8px 0px 0px rgba(248,220,0,1);
    -webkit-box-shadow: 1px 8px 0px 0px rgba(248,220,0,1);
    -moz-box-shadow: 1px 8px 0px 0px rgba(248,220,0,1);
}

#mr-burns .head .neck4
{
    top: 50px;
    left: 60px;
    width: 13px;
    height: 2px;
    border-top: none;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    transform: rotate(105deg);
    -webkit-transform: rotate(105deg);
    -ms-transform: rotate(105deg);
    box-shadow: 3px 2px 0px 0px rgba(248,220,0,1);
    -webkit-box-shadow: 3px 2px 0px 0px rgba(248,220,0,1);
    -moz-box-shadow: 3px 2px 0px 0px rgba(248,220,0,1);
}

Ned Flanders

辛普森一家的邻居，狂热虔诚的基督教徒，保守主义，经营着一家左撇子用品专卖店。

Ned Flanders 人物头像 HTML 代码：

<div id="ned-flanders" style="margin-top: 9px;">
<div class="head">
    <div class="hair-top hair"></div>
    <div class="hair-side hair"></div>
    <div class="no-border neck-bottom"></div>
    <div class="no-border neck-left"></div>
    <div class="body lip"></div>
    <div class="no-border body head-main"></div>
    <div class="no-border hair-line1 hair-line"></div>
    <div class="no-border hair-line2 hair-line"></div>
    <div class="no-border hair-line3 hair-line"></div>
    <div class="no-border hair-line4 hair-line"></div>
    <div class="no-border hair-line5 hair-line"></div>
    <div class="body head-top"></div>
    <div class="no-border body eye-bulge"></div>
    <div class="no-border body head-top-inner"></div>
    <div class="no-border neck-right"></div>
    <div class="body ear">
    <div class="no-border inner"></div>
    </div>
    <div class="no-border sideburn hair"></div>
    <div class="no-border body head-side"></div>

    <div class="left-eye eye">
    <div class="no-border pupil"></div>
    <div class="no-border body eyelid-top"></div>
    <div class="no-border body eyelid-bottom"></div>
    </div>

    <div class="right-eye eye">
    <div class="no-border pupil"></div>
    <div class="no-border body eyelid-top"></div>
    <div class="no-border body eyelid-bottom"></div>
    </div>

    <div class="no-border glasses"></div>

    <div class="no-border mouth-top"></div>
    <div class="no-border mouth-left"></div>
    <div class="no-border mouth-right"></div>
    <div class="no-border mouth-bottom"></div>
    <div class="no-border mouth-inner"></div>
    <div class="no-border tongue"></div>

    <div class="moustache">
    <div class="no-border moustache-hair1 hair left"></div>
    <div class="no-border moustache-hair2 hair left"></div>
    <div class="no-border moustache-hair3 hair left"></div>
    <div class="no-border moustache-hair4 hair right"></div>
    <div class="no-border moustache-hair5 hair right"></div>
    <div class="no-border moustache-hair6 hair right"></div>
    </div>

    <div class="body nose"></div>
</div>
</div>

Ned Flanders 人物头像 CSS 代码：

#ned-flanders *
{
    position: absolute;
    box-sizing:content-box;
    -moz-box-sizing:content-box;
}

#ned-flanders
{
    position: relative;
    width: 120px;
    height: 131px; 
    margin: 0 auto;
}

#ned-flanders .head *
{
    border: 1px solid #110b00;
}

#ned-flanders .head .no-border
{
    border: none;
}

#ned-flanders .head .body
{
    background: #fbd800;
}

#ned-flanders .head .head-main
{
    top: 58px;
    left: 43px;
    width: 41px;
    height: 68px;
}

#ned-flanders .head .hair
{
    background: #986a38;
}

#ned-flanders .head .hair-top
{
    top: 11px;
    left: 23px;
    width: 71px;
    height: 34px;
    border-radius: 35% 50% 47% 50%/52% 51% 19% 43%;
    -webkit-border-radius: 35% 50% 47% 50%/52% 51% 19% 43%;
    -moz-border-radius: 35% 50% 47% 50%/52% 51% 19% 43%;
}

#ned-flanders .head .hair-side
{
    top: 18px;
    left: 68px;
    width: 35px;
    height: 91px;
    border-left: none;
    -webkit-border-radius: 35% 50% 33% 50%/52% 51% 19% 43%;
    -moz-border-radius: 35% 50% 33% 50%/52% 51% 19% 43%;
    border-radius: 35% 50% 33% 50%/52% 51% 19% 43%;
}

#ned-flanders .head .hair-line
{
    border-left: 1px solid #110b00;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

#ned-flanders .head .hair-line1
{
    top: 20px;
    left: 26px;
    width: 9px;
    height: 16px;
    -webkit-transform: rotate(-53deg);
    -ms-transform: rotate(-53deg);
    transform: rotate(-53deg);
}

#ned-flanders .head .hair-line2
{
    top: 14px;
    left: 34px;
    width: 9px;
    height: 17px;
    -webkit-transform: rotate(-26deg);
    -ms-transform: rotate(-26deg);
    transform: rotate(-26deg);
}

#ned-flanders .head .hair-line3
{
    top: 12px;
    left: 45px;
    width: 9px;
    height: 15px;
    -webkit-transform: rotate(9deg);
    -ms-transform: rotate(9deg);
    transform: rotate(9deg);
}

#ned-flanders .head .hair-line4
{
    top: 12px;
    left: 59px;
    width: 9px;
    height: 17px;
    -webkit-transform: rotate(31deg);
    -ms-transform: rotate(31deg);
    transform: rotate(31deg);
}

#ned-flanders .head .hair-line5
{
    top: 23px;
    left: 78px;
    width: 16px;
    height: 17px;
    border-top: 1px solid #110b00;
    -webkit-border-radius: 10px 0 0 0;
    -moz-border-radius: 10px 0 0 0;
    border-radius: 10px 0 0 0;
}

#ned-flanders .head .head-top
{    
    top: 26px;
    left: 29px;
    width: 52px;
    height: 34px;
    border-bottom: none;
    -webkit-border-radius: 34% 50% 47% 50%/50% 51% 19% 43%;
    -moz-border-radius: 34% 50% 47% 50%/50% 51% 19% 43%;
    border-radius: 34% 50% 47% 50%/50% 51% 19% 43%;
}

#ned-flanders .head .head-top-inner
{    
    top: 27px;
    left: 30px;
    width: 50px;
    height: 32px;
    -webkit-border-radius: 34% 50% 47% 50%/50% 51% 19% 43%;
    -moz-border-radius: 34% 50% 47% 50%/50% 51% 19% 43%;
    border-radius: 34% 50% 47% 50%/50% 51% 19% 43%;
}

#ned-flanders .head .head-side
{    
    top: 35px;
    left: 68px;
    width: 15px;
    height: 52px;
    border-right: 1px solid #110b00;
    -webkit-border-radius: 0% 41% 0% 0;
    -moz-border-radius: 0% 41% 0% 0;
    border-radius: 0% 41% 0% 0;
}

#ned-flanders .head .sideburn
{
    top: 67px;
    left: 82px;
    width: 10px;
    height: 20px;
    border-right: 1px solid #110b00;
    border-bottom: 1px solid #110b00;
    -webkit-border-radius: 0 0 5px 3px;
    -moz-border-radius: 0 0 5px 3px;
    border-radius: 0 0 5px 3px;
}

#ned-flanders .head .ear
{
    top: 70px;
    left: 86px;
    width: 16px;
    height: 20px;
    -webkit-border-radius:63px 63px 63px 63px/108px 108px 72px 72px;
    -moz-border-radius:63px 63px 63px 63px/108px 108px 72px 72px;
    border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
}

#ned-flanders .head .ear .inner
{
    top: 6px;
    left: 5px;
    width: 7px;
    height: 7px;
    border-top: 1px solid #110b00;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

#ned-flanders .head .eye-bulge
{
    top: 44px;
    left: 25px;
    width: 10px;
    height: 10px;
    border-top: 1px solid #110b00;
    border-left: 1px solid #110b00;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

#ned-flanders .head .eye
{
    width: 25px;
    height: 25px;
    background: #ffffff;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    overflow: hidden;
}

#ned-flanders .head .eye .pupil
{
    width: 3px;
    height: 3px;
    background: #110b00;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

#ned-flanders .head .left-eye
{
    top: 52px;
    left: 19px;
}

#ned-flanders .head .left-eye .pupil
{
    top: 12px;
    left: 10px;
}

#ned-flanders .head .left-eye .eyelid-top
{
    top: -15px;
    left: 0px;
    width: 25px;
    height: 14px;
    border-bottom: 1px solid #110b00;
    border-radius: 50% 50% 0 0;
    
    -webkit-animation-name: nedlefteyelidtop;
    -webkit-animation-duration: 10s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 1.3s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-play-state: running;
    animation-name: nedlefteyelidtop;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-delay: 1.3s;
    animation-iteration-count: infinite;
    animation-play-state: running;
}

#ned-flanders .head .left-eye .eyelid-bottom
{
    bottom: -10px;
    left: 0px;
    width: 25px;
    height: 9px;
    border-top: 1px solid #110b00;
    border-radius: 0 0 50% 50%;
    
    -webkit-animation-name: nedlefteyelidbottom;
    -webkit-animation-duration: 10s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 1.3s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-play-state: running;
    animation-name: nedlefteyelidbottom;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-delay: 1.3s;
    animation-iteration-count: infinite;
    animation-play-state: running;
}

@-webkit-keyframes nedlefteyelidtop
{
0% {top: -15px;}
2% {top: 0px;}
4% {top: -15px;}
100% {top: -15px;}
}

@keyframes nedlefteyelidtop
{
0% {top: -15px;}
2% {top: 0px;}
4% {top: -15px;}
100% {top: -15px;}
}

@-webkit-keyframes nedlefteyelidbottom
{
0% {bottom: -10px;}
2% {bottom: 0px;}
4% {bottom: -10px;}
100% {bottom: -10px;}
}

@keyframes nedlefteyelidbottom
{
0% {bottom: -10px;}
2% {bottom: 0px;}
4% {bottom: -10px;}
100% {bottom: -10px;}
}

#ned-flanders .head .right-eye
{
    top: 52px;
    left: 46px;
    width: 26px;
}

#ned-flanders .head .right-eye .pupil
{
    top: 14px;
    left: 16px;
}

#ned-flanders .head .right-eye .eyelid-top
{
    top: -15px;
    left: 0px;
    width: 26px;
    height: 14px;
    border-bottom: 1px solid #110b00;
    border-radius: 50% 50% 0 0;
    
    -webkit-animation-name: nedrighteyelidtop;
    -webkit-animation-duration: 10s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 1.3s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-play-state: running;
    animation-name: nedrighteyelidtop;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-delay: 1.3s;
    animation-iteration-count: infinite;
    animation-play-state: running;
}

#ned-flanders .head .right-eye .eyelid-bottom
{
    bottom: -10px;
    left: 0px;
    width: 26px;
    height: 9px;
    border-top: 1px solid #110b00;
    border-radius: 0 0 50% 50%;
    
    -webkit-animation-name: nedrighteyelidbottom;
    -webkit-animation-duration: 10s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 1.3s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-play-state: running;
    animation-name: nedrighteyelidbottom;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-delay: 1.3s;
    animation-iteration-count: infinite;
    animation-play-state: running;
}

@-webkit-keyframes nedrighteyelidtop
{
0% {top: -15px;}
2% {top: 0px;}
4% {top: -15px;}
100% {top: -15px;}
}

@keyframes nedrighteyelidtop
{
0% {top: -15px;}
2% {top: 0px;}
4% {top: -15px;}
100% {top: -15px;}
}

@-webkit-keyframes nedrighteyelidbottom
{
0% {bottom: -10px;}
2% {bottom: 0px;}
4% {bottom: -10px;}
100% {bottom: -10px;}
}

@keyframes nedrighteyelidbottom
{
0% {bottom: -10px;}
2% {bottom: 0px;}
4% {bottom: -10px;}
100% {bottom: -10px;}
}

#ned-flanders .head .glasses
{
    top: 68px;
    left: 73px;
    width: 24px;
    height: 1px;
    background: #110b00;
    -webkit-transform: rotate(8deg);
    -ms-transform: rotate(8deg);
    transform: rotate(8deg);
}

#ned-flanders .head .nose
{
    top: 70px;
    left: 28px;
    width: 16px;
    height: 12px;
    border-right: none;
    -webkit-border-radius: 10px 0 3px 10px;
    -moz-border-radius: 10px 0 3px 10px;
    border-radius: 10px 0 3px 10px;
}

#ned-flanders .head .moustache
{
    top: 81px;
    left: 13px;
    width: 50px;
    height: 18px;
    background: #986a38;
    -webkit-border-radius: 50% 50% 25% 25%/79% 90% 9% 10%;
    -moz-border-radius: 50% 50% 25% 25%/79% 90% 9% 10%;
    border-radius: 50% 50% 25% 25%/79% 90% 9% 10%;
}

#ned-flanders .head .moustache .hair
{
    background: none;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

#ned-flanders .head .moustache .hair.left
{
    border-left: 1px solid #110b00;
}

#ned-flanders .head .moustache .hair.right
{
    border-right: 1px solid #110b00;
}

#ned-flanders .head .moustache .moustache-hair1
{
    top: 3px;
    left: 11px;
    width: 2px;
    height: 12px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

#ned-flanders .head .moustache .moustache-hair2
{
    top: 4px;
    left: 16px;
    width: 2px;
    height: 12px;
    -webkit-transform: rotate(35deg);
    -ms-transform: rotate(35deg);
    transform: rotate(35deg);
}

#ned-flanders .head .moustache .moustache-hair3
{
    top: 5px;
    left: 22px;
    width: 2px;
    height: 11px;
    -webkit-transform: rotate(19deg);
    -ms-transform: rotate(19deg);
    transform: rotate(19deg);
}

#ned-flanders .head .moustache .moustache-hair4
{
    top: 5px;
    left: 27px;
    width: 2px;
    height: 11px;
    -webkit-transform: rotate(-19deg);
    -ms-transform: rotate(-19deg);
    transform: rotate(-19deg);
}

#ned-flanders .head .moustache .moustache-hair5
{
    top: 4px;
    left: 32px;
    width: 2px;
    height: 12px;
    -webkit-transform: rotate(-35deg);
    -ms-transform: rotate(-35deg);
    transform: rotate(-35deg);
}

#ned-flanders .head .moustache .moustache-hair6
{
    top: 3px;
    left: 37px;
    width: 2px;
    height: 12px;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

#ned-flanders .head .neck-right
{
    top: 83px;
    left: 87px;
    width: 8px;
    height: 40px;
    border-left: 1px solid #110b00;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    transform: rotate(5deg);
    -webkit-box-shadow: -5px 0px 0px 0px rgba(251,216,0,1);
    -moz-box-shadow: -5px 0px 0px 0px rgba(251,216,0,1);
    box-shadow: -5px 0px 0px 0px rgba(251,216,0,1);
}

#ned-flanders .head .neck-bottom
{
    top: 110px;
    left: 41px;
    width: 47px;
    height: 20px;
    border-bottom: 1px solid #110b00;
    -webkit-border-radius: 50% 50% 41% 40%/40% 40% 67% 33%;
    -moz-border-radius: 50% 50% 41% 40%/40% 40% 67% 33%;
    border-radius: 50% 50% 41% 40%/40% 40% 67% 33%;
    -webkit-box-shadow: inset  0px -6px 0px 0px rgba(251,216,0,1);
    -moz-box-shadow: inset  0px -6px 0px 0px rgba(251,216,0,1);
    box-shadow: inset 0px -6px 0px 0px rgba(251,216,0,1);
}

#ned-flanders .head .mouth-top
{
    top: 89px;
    left: 48px;
    width: 27px;
    height: 5px;
    border-bottom: 1px solid #110b00;
    -webkit-border-radius: 50% 50% 32% 50%;
    -moz-border-radius: 50% 50% 32% 50%;
    border-radius: 50% 50% 32% 50%;
    -webkit-transform: rotate(-3deg);
    -webkit-box-shadow: 0px 3px 0px 0px rgba(0,0,0,1);
    -moz-box-shadow: 0px 3px 0px 0px rgba(0,0,0,1);
    box-shadow: 0px 3px 0px 0px rgba(0,0,0,1);
}

#ned-flanders .head .mouth-left
{
    top: 101px;
    left: 40px;
    width: 10px;
    height: 10px;
    border-right: 1px solid #110b00;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-box-shadow: 4px 0px 0px 0px rgba(0,0,0,1);
    -moz-box-shadow: 4px 0px 0px 0px rgba(0,0,0,1);
    box-shadow: 4px 0px 0px 0px rgba(0,0,0,1);
}

#ned-flanders .head .mouth-right
{
    top: 92px;
    left: 61px;
    width: 15px;
    height: 17px;
    border-right: 1px solid #110b00;
    -webkit-border-radius: 50% 33% 50% 50%;
    -moz-border-radius: 50% 33% 50% 50%;
    border-radius: 50% 33% 50% 50%;
    -webkit-transform: rotate(10deg);
    -webkit-box-shadow: inset -3px -3px 0px 0px rgba(0,0,0,1);
    -moz-box-shadow: inset -3px -3px 0px 0px rgba(0,0,0,1);
    box-shadow: inset -3px -3px 0px 0px rgba(0,0,0,1);
}

#ned-flanders .head .mouth-bottom
{
    top: 94px;
    left: 44px;
    width: 31px;
    height: 17px;
    border-bottom: 1px solid #110b00;
    -webkit-border-radius: 50% 50% 50% 14%;
    -moz-border-radius: 50% 50% 50% 14%;
    border-radius: 50% 50% 50% 14%;
    -webkit-box-shadow: inset -4px -1px 0px 0px rgba(0,0,0,1);
    -moz-box-shadow: inset -4px -1px 0px 0px rgba(0,0,0,1);
    box-shadow: inset -4px -1px 0px 0px rgba(0,0,0,1);
}

#ned-flanders .head .mouth-inner
{
    top: 96px;
    left: 51px;
    width: 23px;
    height: 14px;
    background: #000000;
    -webkit-border-radius: 0 0 20px 0;
    -moz-border-radius: 0 0 20px 0;
    border-radius: 0 0 20px 0;
}

#ned-flanders .head .lip
{
    top: 106px;
    left: 36px;
    width: 14px;
    height: 11px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

#ned-flanders .head .tongue
{
    top: 104px;
    left: 54px;
    width: 20px;
    height: 7px;
    background: #da6339;
    -webkit-border-radius: 100% 0 100% 0;
    -moz-border-radius: 100% 0 100% 0;
    border-radius: 100% 0 100% 0;
}

#ned-flanders .head .neck-left
{
    top: 100px;
    left: 41px;
    width: 5px;
    height: 27px;
    border-left: 1px solid #110b00;
    -webkit-border-radius: 0 0 0 2px;
    -moz-border-radius: 0 0 0 2px;
    border-radius: 0 0 0 2px;
    -webkit-box-shadow: inset 1px 1px 0px 0px rgba(251,216,0,1);
    -moz-box-shadow: inset 1px 1px 0px 0px rgba(251,216,0,1);
    box-shadow: inset 1px 1px 0px 0px rgba(251,216,0,1);
}

Krusty

小丑 Krusty，小朋友的最爱，Bart 的偶像，出场率较高，是个势利的灵感枯竭的演员。

Krusty 人物头像 HTML 代码：

<div id="krusty">
<div class="head">
    <div class="body ear left-ear"></div>
    <div class="body head-top"></div>
    <div class="hair hair1"></div>
    <div class="hair hair2"></div>
    <div class="hair hair3"></div>
    <div class="hair hair4"></div>
    <div class="hair hair5"></div>
    <div class="hair hair6"></div>
    <div class="hair hair7"></div>
    <div class="hair hair8"></div>
    <div class="hair hair9"></div>
    <div class="hair hair10"></div>
    <div class="hair hair11"></div>
    <div class="hair hair12"></div>
    <div class="hair hair13"></div>
    <div class="hair hair41"></div>
    <div class="hair hair42"></div>
    <div class="hair hair43"></div>
    <div class="hair hair44"></div>

    <div class="hair hair14"></div>
    <div class="hair hair15"></div>
    <div class="hair hair16"></div>
    <div class="hair hair17"></div>
    <div class="hair hair18"></div>
    <div class="hair hair19"></div>
    <div class="hair hair20"></div>
    <div class="hair hair21"></div>
    <div class="hair hair22"></div>
    <div class="hair hair23"></div>
    <div class="hair hair24"></div>
    <div class="hair hair25"></div>
    <div class="hair hair36"></div>
    <div class="hair hair37"></div>
    <div class="hair hair38"></div>
    <div class="hair hair39"></div>
    <div class="hair hair40"></div>

    <div class="body ear right-ear">
    <div class="inner"></div>
    </div>

    <div class="hair hair26"></div>
    <div class="hair hair27"></div>
    <div class="hair hair28"></div>
    <div class="hair hair29"></div>
    <div class="hair hair30"></div>
    <div class="hair hair31"></div>
    <div class="hair hair32"></div>
    <div class="hair hair33"></div>
    <div class="hair hair34"></div>
    <div class="hair hair35"></div>
    <div class="mouth mouth-bottom"></div>
    <div class="no-border mouth mouth-left"></div>
    <div class="no-border mouth mouth-right"></div>
    <div class="no-border mouth mouth-right2"></div>
    <div class="no-border mouth-inner mouth-inner-bottom"></div>
    <div class="no-border mouth-inner mouth-inner-top"></div>
    <div class="no-border tongue tongue1"></div>
    <div class="no-border tongue tongue2"></div>
    <div class="no-border tongue tongue3"></div>
    <div class="cheek cheek-left"></div>
    <div class="cheek cheek-right"></div>
    <div class="tooth tooth1"></div>
    <div class="tooth tooth2"></div>
    <div class="tooth tooth3"></div>
    <div class="tooth tooth4"></div>
    <div class="tooth tooth5"></div>
    <div class="mouth mouth-top2"></div>
    <div class="no-border cheek cheek-right-inner"></div>
    <div class="cheek cheek-line"></div>
    <div class="no-border cheek cheek-left-inner"></div>
    <div class="left-eye eye">
    <div class="no-border pupil"></div>
    </div>

    <div class="mouth mouth-top1"></div>
    <div class="body eye-bag"></div>

    <div class="right-eye eye">
    <div class="no-border pupil"></div>
    </div>

    <div class="eyebrow"></div>


    <div class="nose"></div>
</div>
</div>

Krusty 人物头像 CSS 代码：

#krusty *
{
    position: absolute;
    box-sizing:content-box;
    -moz-box-sizing:content-box;
}


#krusty
{
    position: relative;
    width: 212px;
    height: 140px; 
    margin: 0 auto;
}

#krusty .head *
{
    border: 1px solid #110b00;
}

#krusty .head .no-border
{
    border: none;
}

#krusty .head .body
{
    background: #fdfcc4;
}

#krusty .head .mouth
{
    background: #fee298;
}

#krusty .head .hair
{
    background: #00957c;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

#krusty .head .hair1
{
    top: 91px;
    left: 47px;
    width: 21px;
    height: 18px;
}

#krusty .head .hair2
{
    top: 76px;
    left: 34px;
    width: 21px;
    height: 20px;
}

#krusty .head .hair3
{
    top: 62px;
    left: 28px;
    width: 21px;
    height: 20px;
}

#krusty .head .hair4
{
    top: 51px;
    left: 25px;
    width: 18px;
    height: 17px;
}

#krusty .head .hair5
{
    top: 36px;
    left: 22px;
    width: 18px;
    height: 18px;
}

#krusty .head .hair6
{
    top: 25px;
    left: 15px;
    width: 15px;
    height: 15px;
}

#krusty .head .hair7
{
    top: 21px;
    left: 0px;
    width: 14px;
    height: 5px;
    -webkit-border-radius: 10px 10px 0 0;
    -moz-border-radius: 10px 10px 0 0;
    border-radius: 10px 10px 0 0;
}

#krusty .head .hair8
{
    top: 18px;
    left: 8px;
    width: 12px;
    height: 14px;
}

#krusty .head .hair9
{
    top: 19px;
    left: 18px;
    width: 12px;
    height: 14px;
}

#krusty .head .hair10
{
    top: 23px;
    left: 28px;
    width: 13px;
    height: 14px;
}

#krusty .head .hair11
{
    top: 31px;
    left: 37px;
    width: 15px;
    height: 18px;
}

#krusty .head .hair12
{
    top: 43px;
    left: 46px;
    width: 15px;
    height: 12px;
}

#krusty .head .hair13
{
    top: 48px;
    left: 59px;
    width: 7px;
    height: 7px;
}

#krusty .head .hair41
{
    top: 45px;
    left: 31px;
    width: 31px;
    height: 42px;
    border: none;
    -webkit-border-radius: 50% 0 0% 50%;
    -moz-border-radius: 50% 0 0% 50%;
    border-radius: 50% 0 0% 50%;
    -webkit-transform: rotate(19deg);
    -ms-transform: rotate(19deg);
    transform: rotate(19deg);
}

#krusty .head .hair42
{
    top: 27px;
    left: 26px;
    width: 27px;
    height: 42px;
    border: none;
    -webkit-transform: rotate(-32deg);
    -ms-transform: rotate(-32deg);
    transform: rotate(-32deg);
}

#krusty .head .hair43
{
    top: 21px;
    left: 15px;
    width: 17px;
    height: 17px;
    border: none;
}

#krusty .head .hair44
{
    top: 22px;
    left: 5px;
    width: 7px;
    height: 5px;
    border: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

#krusty .head .hair14
{
    top: 60px;
    left: 127px;
    width: 16px;
    height: 16px;
}

#krusty .head .hair15
{
    top: 57px;
    left: 143px;
    width: 18px;
    height: 12px;
    -webkit-transform: rotate(-26deg);
    -ms-transform: rotate(-26deg);
    transform: rotate(-26deg);
}

#krusty .head .hair16
{
    top: 48px;
    left: 157px;
    width: 13px;
    height: 12px;
    -webkit-transform: rotate(-26deg);
    -ms-transform: rotate(-26deg);
    transform: rotate(-26deg);
}

#krusty .head .hair17
{
    top: 39px;
    left: 167px;
    width: 16px;
    height: 15px;
}

#krusty .head .hair18
{
    top: 37px;
    left: 181px;
    width: 19px;
    height: 20px;
}

#krusty .head .hair19
{
    top: 43px;
    left: 193px;
    width: 16px;
    height: 7px;
    -webkit-border-radius: 10px 10px 0 0;
    -moz-border-radius: 10px 10px 0 0;
    border-radius: 10px 10px 0 0;
}

#krusty .head .hair20
{
    top: 50px;
    left: 170px;
    width: 19px;
    height: 20px;
}

#krusty .head .hair21
{
    top: 65px;
    left: 161px;
    width: 19px;
    height: 20px;
    -webkit-border-radius: 50% 50% 37% 50%;
    -moz-border-radius: 50% 50% 37% 50%;
    border-radius: 50% 50% 37% 50%;
}

#krusty .head .hair22
{
    top: 80px;
    left: 152px;
    width: 19px;
    height: 20px;
    -webkit-border-radius: 50% 50% 37% 50%;
    -moz-border-radius: 50% 50% 37% 50%;
    border-radius: 50% 50% 37% 50%;
}

#krusty .head .hair23
{
    top: 92px;
    left: 141px;
    width: 19px;
    height: 20px;
    -webkit-border-radius: 50% 50% 43% 50%;
    -moz-border-radius: 50% 50% 43% 50%;
    border-radius: 50% 50% 43% 50%;
}

#krusty .head .hair24
{
    top: 99px;
    left: 126px;
    width: 21px;
    height: 20px;
}

#krusty .head .hair25
{
    top: 102px;
    left: 113px;
    width: 17px;
    height: 17px;
    -webkit-border-radius: 50% 50% 43% 50%;
    -moz-border-radius: 50% 50% 43% 50%;
    border-radius: 50% 50% 43% 50%;
}

#krusty .head .hair36
{
    top: 70px;
    left: 124px;
    width: 17px;
    height: 17px;
}

#krusty .head .hair37
{
    top: 65px;
    left: 127px;
    width: 42px;
    height: 42px;
    border: none;
}

#krusty .head .hair38
{
    top: 84px;
    left: 122px;
    width: 30px;
    height: 35px;
    border: none;
}

#krusty .head .hair39
{
    top: 47px;
    left: 154px;
    width: 38px;
    height: 27px;
    border: none;
    -webkit-transform: rotate(-33deg);
    -ms-transform: rotate(-33deg);
    transform: rotate(-33deg);
}

#krusty .head .hair40
{
    top: 43px;
    left: 173px;
    width: 27px;
    height: 9px;
    border: none;
    border-radius: 0;
}

#krusty .head .hair26
{
    top: 13px;
    left: 96px;
    width: 11px;
    height: 7px;
}

#krusty .head .hair27
{
    top: 9px;
    left: 102px;
    width: 7px;
    height: 7px;
}

#krusty .head .hair28
{
    top: 5px;
    left: 107px;
    width: 7px;
    height: 7px;
}

#krusty .head .hair29
{
    top: -1px;
    left: 116px;
    width: 4px;
    height: 9px;
    -webkit-border-radius: 10px 0 0 0;
    -moz-border-radius: 10px 0 0 0;
    border-radius: 10px 0 0 0;
    -webkit-transform: rotate(47deg);
    -ms-transform: rotate(47deg);
    transform: rotate(47deg);
}

#krusty .head .hair30
{
    top: 6px;
    left: 113px;
    width: 9px;
    height: 9px;
}

#krusty .head .hair31
{
    top: 14px;
    left: 119px;
    width: 7px;
    height: 7px;
}

#krusty .head .hair32
{
    top: 21px;
    left: 119px;
    width: 7px;
    height: 7px;
}

#krusty .head .hair33
{
    top: 17px;
    left: 106px;
    width: 13px;
    height: 8px;
    -webkit-transform: rotate(19deg);
    -ms-transform: rotate(19deg);
    transform: rotate(19deg);
}

#krusty .head .hair34
{
    top: 5px;
    left: 110px;
    width: 12px;
    height: 13px;
    border: none;
}

#krusty .head .hair35
{
    top: 11px;
    left: 102px;
    width: 25px;
    height: 13px;
    border: none;
    -webkit-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    transform: rotate(20deg);
}

#krusty .head .head-top
{
    top: 15px;
    top: 20px;
    left: 68px;
    width: 64px;
    height: 74px;
    border-top: 1px solid #110b00;
    border-right: 1px solid #110b00;
    border-left: 1px solid #110b00;
    -webkit-transform: rotate(19deg);
    -ms-transform: rotate(19deg);
    transform: rotate(19deg);
    -moz-border-radius: 32% 33% 0 0;
    -webkit-border-radius: 32% 33% 0 0;
    border-radius: 32% 33% 0 0;
    -webkit-box-shadow: inset 8px 12px 0px -12px rgba(254,254,242,1), inset 13px 3px 0px -11px rgba(254,254,242,1), inset -2px 0px 0px 0px rgba(254,226,117,1);
    -moz-box-shadow: inset 8px 12px 0px -12px rgba(254,254,242,1), inset 13px 3px 0px -11px rgba(254,254,242,1), inset -2px 0px 0px 0px rgba(254,226,117,1);
    box-shadow: inset 8px 12px 0px -12px rgba(254,254,242,1), inset 13px 3px 0px -11px rgba(254,254,242,1), inset -2px 0px 0px 0px rgba(254,226,117,1);
}

#krusty .head .left-ear
{
    top: 68px;
    left: 57px;
    width: 6px;
    height: 8px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

#krusty .head .right-ear
{
    top: 80px;
    left: 123px;
    width: 9px;
    height: 15px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-transform: rotate(28deg);
    -ms-transform: rotate(28deg);
    transform: rotate(28deg);
}

#krusty .head .right-ear .inner
{
    top: 4px;
    left: 3px;
    height: 10px;
    width: 4px;
    border-right: none;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

#krusty .head .eye
{
    width: 29px;
    height: 29px;
    background: #ffffff;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

#krusty .head .eye .pupil
{
    width: 3px;
    height: 3px;
    background: #110b00;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

#krusty .head .left-eye
{
    top: 50px;
    left: 64px;
    height: 25px;
}

#krusty .head .left-eye .pupil
{
    top: 13px;
    left: 7px;
}

#krusty .head .right-eye
{
    top: 53px;
    left: 91px;
}

#krusty .head .right-eye .pupil
{
    top: 15px;
    left: 18px;
}

#krusty .head .eye-bag
{
    top: 75px;
    left: 93px;
    width: 26px;
    height: 11px;
    border-top: none;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    transform: rotate(10deg);
}


#krusty .head .eyebrow
{
    top: 48px;
    left: 106px;
    width: 18px;
    height: 8px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    border-bottom: none;
    -webkit-transform: rotate(25deg);
    -ms-transform: rotate(25deg);
    transform: rotate(25deg);
}

#krusty .head .mouth-top1
{
    top: 79px;
    left: 59px;
    width: 53px;
    height: 20px;
    border-bottom: none;
    -webkit-border-radius: 41% 50% 50% 50%;
    -moz-border-radius: 41% 50% 50% 50%;
    border-radius: 41% 50% 50% 50%;
    -webkit-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    transform: rotate(10deg);
}

#krusty .head .mouth-top2
{
    top: 78px;
    left: 52px;
    width: 69px;
    height: 25px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-transform: rotate(6deg);
    -ms-transform: rotate(6deg);
    transform: rotate(6deg);
}

#krusty .head .mouth-bottom
{
    top: 114px;
    left: 65px;
    width: 35px;
    height: 25px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-transform: rotate(6deg);
    -ms-transform: rotate(6deg);
    transform: rotate(6deg);
}

#krusty .head .mouth-left
{
    top: 99px;
    left: 63px;
    width: 8px;
    height: 29px;
    border-left: 1px solid #110b00;
    -webkit-transform: rotate(-8deg);
    -ms-transform: rotate(-8deg);
    transform: rotate(-8deg);
}

#krusty .head .mouth-right
{
    top: 110px;
    left: 99px;
    width: 8px;
    height: 23px;
    border-right: 1px solid #110b00;
    -webkit-transform: rotate(35deg);
    -ms-transform: rotate(35deg);
    transform: rotate(35deg);
}

#krusty .head .mouth-right2
{
    top: 98px;
    left: 110px;
    width: 8px;
    height: 17px;
    border-right: 1px solid #110b00;
    -webkit-transform: rotate(38deg);
    -ms-transform: rotate(38deg);
    transform: rotate(38deg);
}

#krusty .head .mouth-inner
{
    background: #000000;
}

#krusty .head .mouth-inner-bottom
{
    top: 110px;
    left: 71px;
    width: 25px;
    height: 25px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-transform: rotate(6deg);
    -ms-transform: rotate(6deg);
    transform: rotate(6deg);
}

#krusty .head .mouth-inner-top
{
    top: 102px;
    left: 64px;
    height: 0;
    width: 23px;
    background: none;
    border-top: 26px solid #000000;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    -webkit-transform: rotate(16deg);
    -ms-transform: rotate(16deg);
    transform: rotate(16deg);
}

#krusty .head .tongue
{
    background: #ef5e2f;
}

#krusty .head .tongue1
{
    top: 124px;
    left: 81px;
    width: 13px;
    height: 9px;
    -webkit-border-radius: 50% 50% 50% 35%;
    -moz-border-radius: 50% 50% 50% 35%;
    border-radius: 50% 50% 50% 35%;
    -webkit-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    transform: rotate(-10deg);
}

#krusty .head .tongue2
{
    top: 122px;
    left: 73px;
    width: 10px;
    height: 10px;
    -webkit-border-radius: 50% 50% 0% 50%;
    -moz-border-radius: 50% 50% 0% 50%;
    border-radius: 50% 50% 0% 50%;
    -webkit-transform: rotate(8deg);
    -ms-transform: rotate(8deg);
    transform: rotate(8deg);
}

#krusty .head .tongue3
{
    top: 126px;
    left: 75px;
    width: 17px;
    height: 9px;
    border-radius: 50%;
}

#krusty .head .nose
{
    top: 71px;
    left: 74px;
    width: 21px;
    height: 13px;
    background: #ef5e2f;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

#krusty .head .cheek-right
{
    top: 90px;
    left: 109px;
    width: 20px;
    height: 17px;
    background: #fee298;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

#krusty .head .cheek-right-inner
{
    top: 90px;
    left: 112px;
    width: 14px;
    height: 9px;
    background: #fee298;
    -webkit-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg);
}

#krusty .head .cheek-left
{
    top: 76px;
    left: 53px;
    width: 11px;
    height: 11px;
    background: #fee298;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

#krusty .head .cheek-left-inner
{
    top: 77px;
    left: 54px;
    width: 8px;
    height: 11px;
    background: #fee298;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

#krusty .head .cheek-line
{
    top: 95px;
    left: 114px;
    width: 4px;
    height: 9px;
    border-left: none;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

#krusty .head .tooth
{
    background: #ffffff;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

#krusty .head .tooth1
{
    top: 90px;
    left: 55px;
    width: 10px;
    height: 10px;
}

#krusty .head .tooth2
{
    top: 93px;
    left: 61px;
    width: 14px;
    height: 11px;
    -webkit-transform: rotate(28deg);
    -ms-transform: rotate(28deg);
    transform: rotate(28deg);
}

#krusty .head .tooth3
{
    top: 96px;
    left: 73px;
    width: 16px;
    height: 11px;
    -webkit-transform: rotate(28deg);
    -ms-transform: rotate(28deg);
    transform: rotate(28deg);
}

#krusty .head .tooth4
{
    top: 98px;
    left: 89px;
    width: 14px;
    height: 11px;
}

#krusty .head .tooth5
{
    top: 96px;
    left: 100px;
    width: 13px;
    height: 11px;
}

您可能感兴趣的相关文章

本文链接：CSS绘制《辛普森一家》人物头像 via Chris Pattle

编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

本文来自【梦想天空（http://www.cnblogs.com/lhb25/）】

作者：山边小溪
主站：yyyweb.com 记住啦：）
欢迎任何形式的转载，但请务必注明出处。

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

Homer

Bart

Marge

Lisa

Maggie

Mr Burns

Ned Flanders

Krusty

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

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

Homer

Bart

Marge

Lisa

Maggie

Mr Burns

Ned Flanders

Krusty

热门文章

最新文章

相关课程

相关电子书

相关实验场景

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