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 AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

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)

Use Python to convert photos into anime-style avatars. Use Python to convert photos into anime-style avatars. Apr 22, 2023 pm 10:22 PM

Recently, I encountered a problem. I needed to transform my avatar into an anime style. My first thought was to find ready-made wheels. ▲Convert pictures to pixel style to convert avatars into anime style, hoping to convert real photos into anime/cartoon style non-realistic images while maintaining the original image information and texture details. At present, in addition to Baidu API, there are many open source libraries on Github that we can use directly. Among them, AnimeGAN is a study from Wuhan University and Hubei University of Technology. It uses a combination of neural style transfer + generative adversarial network (GAN), and the effect is very consistent with our needs. AnimeGAN first used the Tensorflow framework, but after querying the information, it was found that the project already supports PyTorch.

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

If we change our system account avatar but don’t want it anymore, we can’t find how to change the default avatar in win11. In fact, we only need to find the folder of the default avatar to restore it. Restore the default avatar in win11 1. First click on the "Windows Logo" on the bottom taskbar 2. Then find and open "Settings" 3. Then enter "Account" on the left column 4. Then click on "Account Information" on the right 5. After opening, click "Browse Files" in the selected photo. 6. Finally, enter the "C:\ProgramData\Microsoft\UserAccountPictures" path to find the system default avatar picture.

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

ppt is widely used in many fields and work, especially in education, architecture, etc. When it comes to architectural ppt, we must first think of the presentation of some architectural drawings. If we do not use professional drawing software, can we directly draw a simple architectural plan? In fact, we can complete the operation here. Below, we will draw a relatively simple floor plan to give you an idea. I hope you can complete better floor plan drawings based on this idea. 1. First, we double-click to open the ppt software on the desktop and click to create a new presentation blank document. 2. We find Insert→Shape→Rectangle in the menu bar. 3. After drawing the rectangle, double-click the graphic and modify the fill color type. Here we can modify

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

After registering a win10 account, many friends feel that their default avatars are not very good-looking. For this reason, they want to change their avatars. Here is a tutorial on how to change their avatars. If you want to know, you can come and take a look. . How to change the win10 account name and avatar: 1. First click on the lower left corner to start. 2. Then click the avatar above in the pop-up menu. 3. After entering, click "Change Account Settings". 4. Then click "Browse" under the avatar. 5. Find the photo you want to use as your avatar and select it. 6. Finally, the modification is completed successfully.

How to draw geometric shapes on a picture using Python How to draw geometric shapes on a picture using Python Aug 18, 2023 pm 01:02 PM

How to use Python to draw geometric shapes on pictures Introduction: Python, as a powerful programming language, can not only perform advanced technologies such as data processing and machine learning, but also perform image processing and graphics drawing. In image processing, it is often necessary to draw various geometric shapes on pictures. This article will introduce how to use Python to draw geometric shapes on pictures. 1. Environment preparation and library installation. Before starting, we first need to install several necessary libraries for Python, mainly including OpenCV.

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

The org.opencv.imgproc package of the JavaOpenCV library contains a class called Imgproc that provides various methods to process input images. It provides a set of methods for drawing geometric shapes on images. To draw an arrowed line, you need to call the arrowedLine() method of this class. The method accepts the following parameters: a Mat object representing the image on which the line is to be drawn. A Point object representing two points between lines. drawn. A Scalar object representing the line color. (BGR) An integer representing the thickness of the line (default: 1). Example importorg.opencv.core.Core;importo

How to change boss direct recruitment avatar back to default How to change boss direct recruitment avatar back to default Feb 23, 2024 pm 04:07 PM

How to change the boss direct recruitment avatar back to the default? The boss direct recruitment avatar can be adjusted at will, but most friends don’t know how to change the boss direct recruitment avatar back to the default. Next is the boss direct recruitment avatar brought to players by the editor. Change back to the default method tutorial, interested players come and take a look! How to change the Boss Direct Recruitment avatar back to the default 1. First open the Boss Direct Recruitment APP, click on the avatar above in the [My] area in the lower right corner of the main page; 2. Then enter the personal information interface and continue to click on the avatar; 3. Then select [ Take photo] and [Select from album] to change back to the default.

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: 1. Log in to the Discuz backend, find the "admin.php" or "admin" directory in the root directory of the website and log in; 2. Enter user management, find and click on the navigation menu on the left or top Enter; 3. Search for users and use the search function to find specific users; 4. Modify the avatar, on the editing page, you can find the avatar option and upload a new avatar; 5. Save the modification; 6. Refresh the page.

See all articles