Table of Contents
Homer
Bart
Marge
Lisa
Home Web Front-end HTML Tutorial Holy crap! Pure CSS drawing of 'The Simpsons' character avatar_html/css_WEB-ITnose

Holy crap! Pure CSS drawing of 'The Simpsons' character avatar_html/css_WEB-ITnose

Jun 24, 2016 pm 12:01 PM
figure avatar draw

This article shares with you a set of "The Simpsons" character avatars drawn purely with CSS. The Simpsons is an American animated sitcom created by Matt Groening for the Fox Broadcasting Company. By depicting the lives of a family of five, Homer, Marge, Bart, Lisa, and Maggie, the play uses a funny way to self-parody American culture, society, television, and many aspects of the human condition.

Warm reminder: To ensure the best results, please browse in modern browsers such as Chrome, Firefox and Safari.

Source code download Online demo

Homer

The Simpsons His father raised the whole family by himself. His full name is Homer Jay Simpson.

Homer character avatar HTML Code:

<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>
Copy after login

Homer character avatar CSS The code is as follows:

#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);}
Copy after login

Bart

A naughty and cute boy, 10 years old. Full name Bartholomew J. Simpson.

Bart character avatarHTML Code:

<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> 
Copy after login

Bart character avatarCSS Code:

.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%;}
Copy after login

Marge

A tolerant mother and wife, housewife, and former policewoman. (Formerly known as Marge Bouvier)

Marge character avatar HTML Code:

<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>
Copy after login

Marge character avatarCSS Code:

#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);}
Copy after login

Lisa

A knowledgeable girl, eight years old. Her full name is Lisa Simpson.

Lisa character avatar HTML Code:

<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>
Copy after login

Lisa character avatar CSS Code:

#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;    lef
Copy after login
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot Article Tags

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Tutorial to restore win11 default avatar Tutorial to restore win11 default avatar Jan 02, 2024 pm 12:43 PM

Tutorial to restore win11 default avatar

Can the floor plan be drawn directly in architectural ppt? Can the floor plan be drawn directly in architectural ppt? Mar 20, 2024 am 08:43 AM

Can the floor plan be drawn directly in architectural ppt?

How to change account name and avatar in Win10 - Detailed step-by-step guide How to change account name and avatar in Win10 - Detailed step-by-step guide Jan 14, 2024 pm 01:45 PM

How to change account name and avatar in Win10 - Detailed step-by-step guide

How to draw a 3D geographic chart with Python How to draw a 3D geographic chart with Python Sep 28, 2023 am 10:19 AM

How to draw a 3D geographic chart with Python

How to implement avatar upload function in Vue How to implement avatar upload function in Vue Nov 07, 2023 am 08:01 AM

How to implement avatar upload function in Vue

How to modify the avatar in discuz How to modify the avatar in discuz Aug 08, 2023 pm 03:53 PM

How to modify the avatar in discuz

How to draw lines with arrows in OpenCV using Java? How to draw lines with arrows in OpenCV using Java? Aug 20, 2023 pm 02:41 PM

How to draw lines with arrows in OpenCV using Java?

Learn to draw dendrograms and radar charts in Python in five minutes Learn to draw dendrograms and radar charts in Python in five minutes Sep 27, 2023 pm 12:48 PM

Learn to draw dendrograms and radar charts in Python in five minutes

See all articles