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
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>
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);}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>
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%;}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>
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);}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>
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
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
