欢迎！我白天是个邮递员，晚上就是个有抱负的演员。这是我的网站。我住在天朝的帝都，有条叫做Jack的狗。

<div class="santa"><div class="santa-body"><div class="santa-head"><div class="santa-ear"></div><div class="santa-ear"></div><div class="santa-hat"></div><div class="santa-eye"></div><div class="santa-eye"></div><div class="santa-nose"></div><div class="santa-mouth"></div></div></div></div>CSS3代码

.santa-body {    font-size: 80px;     /* 试试改变这里的字体大小，有惊喜！ */    color: #f91047;    display: -webkit-box;    display: -webkit-flex;    display: -ms-flexbox;    display: flex;    -webkit-box-pack: center;    -webkit-justify-content: center;    -ms-flex-pack: center;    justify-content: center;    -webkit-box-align: center;    -webkit-align-items: center;    -ms-flex-align: center;    align-items: center;    width: 1em;    height: 1em;    background-color: currentColor;    -webkit-box-shadow: inset 0 -0.25em rgba(0,0,0,0.1);    box-shadow: inset 0 -0.25em rgba(0,0,0,0.1);    border-radius: 50%;    -webkit-transform-origin: center bottom;        -ms-transform-origin: center bottom;            transform-origin: center bottom;    -webkit-animation: balance alternate infinite 2s ease-in-out;            animation: balance alternate infinite 2s ease-in-out;} .santa-head {    font-size: .4em;    width: 1em;    height: 1.9em;    background-color: white;    border-radius: .5em;    -webkit-transform: translateY(-1em);        -ms-transform: translateY(-1em);            transform: translateY(-1em);    position: relative;} .santa-head::before {    content: '';    width: 1em;    height: .375em;    display: block;    background-color: #ff9876;    position: absolute;    left: 0;    top: .65em;} .santa-ear {    background-color: #fc8363;    width: .1em;    height: .3em;    position: absolute;    top: .75em;} .santa-ear:nth-of-type(1) {    border-radius: .05em 0 0 .05em;    left: -0.1em;} .santa-ear:nth-of-type(2) {    border-radius: 0 .05em .05em 0;    right: -0.1em;} .santa-hat {    content: '';    width: 1em;    height: .15em;    position: absolute;    -webkit-transform: scale(1.1);        -ms-transform: scale(1.1);            transform: scale(1.1);    top: .5em;    left: 0;    background-color: white;} .santa-hat::before {    content: '';    display: block;    width: 1em;    height: .5em;    background: #f91047;    border-radius: .5em .5em 0 0;    z-index: 2;    position: absolute;    top: -0.5em;} .santa-hat::after {    content: '';    width: .25em;    height: .25em;    display: block;    background-color: white;    border-radius: 50%;    position: absolute;    z-index: 0;    top: -0.72em;    right: 0;    -webkit-box-shadow: -0.2em .2em 0 .12em rgba(0,0,0,0.2),-0.2em .2em 0 .12em #f91047;            box-shadow: -0.2em .2em 0 .12em rgba(0,0,0,0.2),-0.2em .2em 0 .12em #f91047;} .santa-eye {    width: .12em;    height: .12em;    background-color: black;    border-radius: 50%;    position: absolute;    top: .76em;    left: .2em;} .santa-eye+.santa-eye {    left: auto;    right: .2em;} .santa-nose {    width: .12em;    height: .22em;    background-color: #f24c4c;    border-radius: 0 0 .12em .12em;    position: absolute;    top: .84em;    left: 50%;    -webkit-transform: translateX(-50%);        -ms-transform: translateX(-50%);            transform: translateX(-50%);} .santa-mouth {    width: .18em;    height: .1em;    border-bottom-right-radius: 5vw;    border-bottom-left-radius: 5vw;    margin-top: .3em;    background-color: black;    position: absolute;    left: 50%;    top: 50%;    -webkit-transform: translate(-50%, -50%);        -ms-transform: translate(-50%, -50%);            transform: translate(-50%, -50%);    -webkit-animation: hohoho 4s linear forwards infinite;            animation: hohoho 4s linear forwards infinite;} @-webkit-keyframes hohoho {    0%,10%,20%,40%,100% {        width: .18em;        height: .1em;        border-bottom-right-radius: 1vw;        border-bottom-left-radius: 1vw;    }     5%,15%,25%,35% {        width: .15em;        height: .2em;        border-radius: 50%;    }} @keyframes hohoho {    0%,10%,20%,40%,100% {        width: .18em;        height: .1em;        border-bottom-right-radius: 1vw;        border-bottom-left-radius: 1vw;    }     5%,15%,25%,35% {        width: .15em;        height: .2em;        border-radius: 50%;    }} @-webkit-keyframes balance {    from {        -webkit-transform: rotate(-4deg);                transform: rotate(-4deg);    }     to {        -webkit-transform: rotate(4deg);                transform: rotate(4deg);    }} @keyframes balance {    from {        -webkit-transform: rotate(-4deg);                transform: rotate(-4deg);    }     to {        -webkit-transform: rotate(4deg);                transform: rotate(4deg);    }}