SOURCE

console 命令行工具 X clear

                    
>
console
    <div class="face face-1"></div>
    <div class="face face-2"></div>
    <div class="face face-3"></div>
    <div class="face face-4"></div>
    <div class="hair hair-1"></div>
    <div class="hair hair-2"></div>
    <div class="hair hair-3"></div>
    <div class="mouth-left-1"></div>
    <div class="mouth-right-1"></div>
    <div class="ear ear-left-1"></div>
    <div class="ear ear-right-1"></div>
    <div class="eye-left-1"></div>
    <div class="eye-right-1"></div>
    <div class="face-6"></div>
    <div class="face-7"></div>
        :root {
            --bg1: #F5C023;
            --bg2: #A66528;
        }

        body {
            background-color: var(--bg1);
            margin: auto;
        }

        body * {
            position: absolute;
            /* transition: all 0.3s; */
        }

        .face-1 {
            z-index: 2;
            width: 48vmin;
            height: 42vmin;
            top: 50vmin;
            left: 50vmin;
            transform: translate(-50%, -50%);
            background-color: var(--bg2);
            border-top-left-radius: 89% 100%;
            border-top-right-radius: 90% 100%;
            border-bottom-right-radius: 90% 77%;
            border-bottom-left-radius: 90% 77%;
        }

        .face-2,
        .face-3,
        .face-4 {
            z-index: 2;
            background-color: var(--bg1);
        }

        .face-2,
        .face-3 {
            top: 35vmin;
            left: 35vmin;
            width: 19vmin;
            height: 25vmin;
            border-top-left-radius: 100% 106%;
            border-top-right-radius: 100% 106%;
            border-bottom-right-radius: 90% 77%;
            border-bottom-left-radius: 90% 77%;
            transform: rotate(13deg);
        }

        .face-3 {
            left: 47vmin;
            transform: scaleX(-1) rotate(13deg);
        }

        .face-4 {
            top: 43vmin;
            left: 32vmin;
            width: 37vmin;
            height: 24vmin;
            border-top-left-radius: 100% 106%;
            border-top-right-radius: 100% 106%;
            border-bottom-right-radius: 90% 88%;
            border-bottom-left-radius: 90% 89%;
        }

        .hair-1,
        .hair-2,
        .hair-3,
        .hair-1::after,
        .hair-2::after,
        .hair-3::after {
            z-index: 1;
            background-color: var(--bg2);
            top: 26vmin;
            left: 41vmin;
            width: 3vmin;
            height: 11vmin;
            border-top-left-radius: 100% 106%;
            border-top-right-radius: 100% 106%;
            border-bottom-right-radius: 90% 88%;
            border-bottom-left-radius: 90% 89%;
            transform: rotate(2deg);
            overflow: inherit;
        }

        .hair-1::after,
        .hair-2::after,
        .hair-3::after {
            content: "";
            display: block;
            margin-left: 2vmin;
            transform: rotate(-4deg) translateY(0.5vmin);

        }

        .hair-2 {
            top: 25vmin;
            left: 45vmin;
            transform: rotate(-6deg);
        }

        .hair-2::after::after {
            transform: rotate(-4deg) translateY(0.5vmin);
        }

        .hair-3 {
            top: 24vmin;
            left: 48vmin;
            width: 4vmin;
            height: 11vmin;
            transform: rotate(-6deg);
        }

        .hair-3::after {
            margin-left: 3vmin;
            transform: rotate(-6deg) translateY(0.5vmin);
        }

        /* 嘴 */
        .mouth-left-1,
        .mouth-right-1 {
            --mouth-rotate: -6deg;
            z-index: 2;
            top: 56vmin;
            left: 44.6vmin;
            width: 5vmin;
            height: 2vmin;
            background-color: var(--bg1);
            border: 0.5vmin solid var(--bg2);
            border-top-left-radius: 100% 106%;
            border-top-right-radius: 100% 106%;
            border-bottom-right-radius: 90% 88%;
            border-bottom-left-radius: 90% 89%;
            transform: rotate(var(--mouth-rotate));
            overflow: inherit;
        }

        .mouth-left-1::after,
        .mouth-right-1::after {
            content: "";
            display: block;
            width: 107%;
            height: 100%;
            background-color: var(--bg1);
            margin-top: -0.8vmin;
            margin-left: 0.1vmin;
        }

        .mouth-right-1 {
            left: 50.2vmin;
            transform: scaleX(-1) rotate(var(--mouth-rotate));
        }

        /* 嘴 */

        /* 耳朵 */
        .ear-left-1,
        .ear-right-1 {
            z-index: 1;
            top: 45vmin;
            left: 19vmin;
            width: 10vmin;
            height: 10vmin;
            background-color: var(--bg1);
            border: 1vmin solid var(--bg2);
            border-top-left-radius: 100% 106%;
            border-top-right-radius: 100% 106%;
            border-bottom-right-radius: 90% 88%;
            border-bottom-left-radius: 90% 89%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .ear-right-1 {
            left: 69vmin;
            transform: scaleX(-1);
        }

        .ear-left-1::after,
        .ear-right-1::after {
            content: "";
            display: block;
            width: 60%;
            height: 58%;
            top: 50%;
            left: 50%;
            background-color: var(--bg2);
            border-top-left-radius: 100% 106%;
            border-top-right-radius: 100% 106%;
            border-bottom-right-radius: 90% 88%;
            border-bottom-left-radius: 90% 89%;
        }

        /* 耳朵 */


        /* 眼睛 */
        .eye-left-1,
        .eye-right-1 {
            z-index: 2;
            top: 48vmin;
            left: 34vmin;
            width: 10vmin;
            height: 2vmin;
            background-color: var(--bg2);
            border-radius: 3vmin;
            overflow: inherit;

            transition: transform 0.5s;
        }

        .eye-right-1 {
            left: 57vmin;
        }

        .eye-left-1::before,
        .eye-right-1::before {
            content: "";
            display: block;
            width: 42%;
            height: 92%;
            background-color: var(--bg1);
            border: 0.5vmin solid var(--bg2);
            border-bottom: none;
            margin-top: -10vmin;
            margin-left: 5vmin;
            border-radius: 75% 69% 0 0/150% 142% 0 0;
            transform: rotate(-4deg);
        }

        .eye-right-1::before {
            transform: rotate(4deg);
            margin-left: 0vmin;
        }

        div:hover~.eye-right-1,
        div:hover~.eye-left-1 {
            transform: translateY(-1vmin);
        }

        .eye-right-1::after,
        .eye-left-1::after {
            content: "";
            display: block;
            width: 2vmin;
            height: 2vmin;
            margin-top: 9vmin;
            margin-left: 6vmin;
            border-radius: 50%;
            background-color: var(--bg2);
            transition: opacity 0.5s;
            opacity: 0;
        }

        div:hover~.eye-right-1::after,
        div:hover~.eye-left-1::after {
            opacity: 1;
        }

        /* 眼睛 */

        /* 腮红 */
        .face-6,
        .face-6::before,
        .face-6::after,
        .face-7,
        .face-7::before,
        .face-7::after {
            z-index: 2;
            background-color: var(--bg2);
            top: 50vmin;
            left: 32vmin;
            width: 2.5vmin;
            height: 5vmin;
            border-top-left-radius: 100% 106%;
            border-top-right-radius: 100% 106%;
            border-bottom-right-radius: 100% 95%;
            border-bottom-left-radius: 100% 95%;
            transform: rotate(37deg);
            overflow: inherit;
        }

        .face-6::before,
        .face-6::after,
        .face-7::before,
        .face-7::after {
            content: "";
            display: block;
            width: 100%;
            height: 100%;
            background-color: var(--bg2);
        }

        .face-6::before,
        .face-7::before {
            margin-left: 2vmin;
            margin-top: -1.5vmin;
            transform: rotate(20deg);
        }

        .face-6::after,
        .face-7::after {
            margin-left: 4vmin;
            margin-top: -6.5vmin;
            transform: rotate(18deg);
        }

        .face-7 {
            left: 60vmin;
        }

        /* 腮红 */

        /* 动画 */
        .ear {
            animation: ear-animation 3s linear;
            animation-iteration-count: infinite;
            animation-direction: alternate;
            animation-delay: 0.1s;
        }

        @keyframes ear-animation {
            80% {
                margin-top: 0vmin;
            }

            90% {
                margin-top: 0.5vmin;
            }

            100% {
                margin-top: -0.1vmin;
            }
        }

        .hair {
            animation:hair-animation 3s linear;
            animation-iteration-count: infinite;
            animation-direction: alternate;
            animation-delay: 1s;
        }

        @keyframes hair-animation {
            80% {
                transform: rotate(2deg);
            }
            100% {
                transform: rotate(-5deg);
            }
        }