SOURCE

console 命令行工具 X clear

                    
>
console
// picture by Lauren Stanley https://dribbble.com/shots/8562786-Love-me-you-must
<div class="wrap">
            <div class="capsule">
                <div class="capsule__bottom">
                    <div class="panel"></div>
                    <div class="light"></div>
                    <div class="light2"></div>
                </div>
                <div class="capsule__top">
                    <div class="panel"></div>
                </div>
                <div class="capsule__shadow"></div>
                <div class="left-circle"></div>
                <div class="right-circle"></div>
            </div>
            <div class="yoda-wrap">
                <div class="hair"></div>
                <div class="yoda">
                    <div class="brow"></div>
                    <div class="eye-left"></div>
                    <div class="eye-right"></div>
                </div>
                <div class="ear-left">
                    <div class="line"></div>
                </div>
                <div class="ear-right">
                    <div class="line"></div>
                </div>
                <div class="pled1"></div>
                <div class="pled2"></div>
            </div>
            <div class="shadow"></div>
            <div class="blick1"></div>
            <div class="blick2"></div>
            <div class="blick3"></div>
            <div class="blick4"></div>
        </div>
:root {
    --bg: #E2FFED;
    --yoda: #39E69E;
    --yoda-light: #35DD5F;
    --yoda-shadow: #25CE87;
    --caps-light: #D5E2DE;
    --light: #E9EDEC;
    --caps-dark: #7F8382;
    --caps-shadow: #6A6A6A;
    --caps-gray: #A6AFAC;
    --pled: #A4A9A8;
    --blick: #3DE7A4;
    --shadow: #45576B;
    --border: #1B385E;
    --eye: #1E385D;
}

body {
    margin: 0;
    background: var(--bg);
}

.wrap {
    width: 600px;
    height: 500px;
    margin: 50px auto;
    position: relative;

    .shadow {
        width: 16rem;
        height: 2rem;
        border-radius: 100%;
        background: var(--shadow);
        position: absolute;
        top: 25rem;
        left: 11rem;
        z-index: 1;
    }

    .blick1 {
        width: 20px;
        height: 30px;
        position: absolute;
        top: 9rem;
        left: 7rem;
        filter: drop-shadow(22rem -15px 0 var(--blick)) drop-shadow(21rem 13rem 0 var(--blick));

        &::before {
            content: '';
            width: 4px;
            height: 29px;
            border-radius: 5px;
            background: var(--blick);
            position: absolute;
            top: 0px;
            left: 8px;
        }

        &::after {
            content: '';
            width: 20px;
            height: 4px;
            border-radius: 5px;
            background: var(--blick);
            position: absolute;
            top: 12px;
            left: 0px;
        }
    }

    .blick2 {
        width: 15px;
        height: 20px;
        position: absolute;
        top: 8rem;
        left: 8rem;
        filter: drop-shadow(22rem -15px 0 var(--blick)) drop-shadow(1rem 15rem 0 var(--blick));

        &::before {
            content: '';
            width: 2px;
            height: 15px;
            border-radius: 5px;
            background: var(--blick);
            position: absolute;
            top: 5px;
            left: 6px;
        }

        &::after {
            content: '';
            width: 10px;
            height: 2px;
            border-radius: 5px;
            background: var(--blick);
            position: absolute;
            top: 12px;
            left: 2px;
        }
    }

    .blick3 {
        width: 10px;
        height: 10px;
        background: transparent;
        border: 2px solid var(--blick);
        border-radius: 50%;
        position: absolute;
        top: 7rem;
        left: 28.5rem;
        filter: drop-shadow(-22.5rem 6rem 0 var(--blick)) drop-shadow(2rem 12.5rem 0 var(--blick));
    }

    .blick4 {
        width: 7px;
        height: 7px;
        background: var(--blick);
        border-radius: 50%;
        box-shadow: -5rem -2rem 0 -1px var(--blick), -27rem 4rem 0 -1px var(--blick), -2rem 14rem 0 0 var(--blick), -24rem 11rem 0 0 var(--blick), -21rem 17rem 0 -1px var(--blick);
        position: absolute;
        top: 7rem;
        left: 31.5rem;
    }
}

.capsule {
    &__bottom {
        width: 20rem;
        height: 20.5rem;
        background: linear-gradient(to bottom, var(--caps-dark) 0%,var(--caps-dark) 50%,var(--caps-gray) 51%,var(--caps-gray) 100%);
        border-radius: 100%;
        border: 5px solid var(--border);
        box-shadow: 0 -10px 0 0px var(--caps-light), 0 -12px 0 2px var(--border);
        position: absolute;
        top: 5rem;
        left: 8.7rem;
        z-index: 2;

        .panel {
            width: 19.5rem;
            height: 3rem;
            background: var(--caps-light);
            border: 5px solid var(--border);
            border-radius: 0 0 40% 40%;
            box-shadow: inset 0 5px 0 0 var(--caps-dark), inset 0 9px 0 0 var(--border), -2px 9px 0 -3px var(--caps-gray);
            position: absolute;
            top: 9.4rem;
            left: 0;
            z-index: 1;

            &::before {
                content: '';
                width: 5rem;
                height: 1.3rem;
                background: var(--caps-light);
                border: 4px solid var(--border);
                border-radius: 4px;
                position: absolute;
                top: 11px;
                left: 6.8rem;
            }

            &::after {
                content: '';
                width: 12px;
                height: 12px;
                background: var(--blick);
                border: 3px solid var(--border);
                box-shadow: 25px 0 0 -3px var(--blick), 25px 0 0 0 var(--border), 50px 0 0 -3px var(--blick), 50px 0 0 0 var(--border);
                border-radius: 4px;
                position: absolute;
                top: 16px;
                left: 7.5rem;
            }
        }

        .light {
            background: var(--light);
            height: 5rem;
            width: 11rem;
            position: absolute;
            top: 207px;
            left: 160px;
            border-radius: 100% 100% 0 0;
            transform: rotate(131deg);

            &::before {
                content: '';
                height: 5rem;
                width: 4rem;
                border-radius: 0 0 100% 100%;
                background: var(--light);
                position: absolute;
                top: 55px;
                left: 112px;
            }

            &::after {
                content: '';
                height: 5rem;
                width: 3rem;
                background: var(--light);
                transform: rotate(135deg);
                position: absolute;
                top: 42px;
                left: 90px;
            }
        }

        .light2 {
            background: var(--light);
            height: 4.5rem;
            width: 4.5rem;
            position: absolute;
            top: 218px;
            left: 112px;
            border-radius: 100%;

            &::before {
                content: '';
                background: var(--light);
                height: 3rem;
                transform: rotate(27deg);
                width: 7rem;
                position: absolute;
                top: 42px;
                left: -1px;
                border-radius: 100%;
            }

            &::after {
                content: '';
                background: transparent;
                height: 5rem;
                width: 11rem;
                border-radius: 0 0 50% 50%;
                box-shadow: 0px 12px 0 -8px white;
                transform: rotate(-31deg);
                position: absolute;
                top: 3px;
                left: 13px;
            }
        }
    }

    &__top {
        width: 16rem;
        height: 5.5rem;
        background: var(--shadow);
        border: 5px solid var(--border);
        border-radius: 50% 50% 0 0 / 100% 100% 0 0;
        box-shadow: 0 -9px 0 0 var(--caps-dark), 0 -9px 0 4px var(--border);
        position: absolute;
        top: 8.9rem;
        left: 10.7rem;
        z-index: 3;

        &::before {
            content: '';
            width: 2.5rem;
            height: 8px;
            background: var(--caps-light);
            border: 3px solid var(--border);
            border-top: 0;
            border-radius: 4px;
            transform: rotate(-30deg);
            position: absolute;
            top: -2.95rem;
            left: 1.7rem;
        }

        &::after {
            content: '';
            width: 2.5rem;
            height: 8px;
            background: var(--caps-light);
            border: 3px solid var(--border);
            border-top: 0;
            border-radius: 4px;
            transform: rotate(28deg);
            position: absolute;
            top: -3.1rem;
            left: 11.2rem;
        }
    }

    &__shadow {
        &::before {
            content: '';
            width: 2.6rem;
            height: 3.7rem;
            background: var(--caps-shadow);
            transform: rotate(-30deg);
            position: absolute;
            top: 6.5rem;
            left: 13.9rem;
            z-index: 2;
        }

        &::after {
            content: '';
            width: 2.6rem;
            height: 3.7rem;
            background: var(--caps-shadow);
            transform: rotate(28deg);
            position: absolute;
            top: 6.5rem;
            left: 21.3rem;
            z-index: 2;
        }
    }

    .left-circle {
        width: 18px;
        height: 25px;
        background: var(--blick);
        border: 8px solid var(--border);
        box-shadow: 0 0 0 12px var(--caps-light), 0 0 0 20px var(--border), 12px 0 0 17px var(--caps-dark), 21px 0 0 20px var(--border);
        border-radius: 50%;
        transform: rotateY(70deg);
        position: absolute;
        top: 13.5rem;
        left: 7.6rem;
        z-index: 4;

        &::before {
            content: '';
            width: 0;
            height: 0;
            border-left: 30px solid transparent;
            border-right: 0;
            border-bottom: 12px solid var(--caps-dark);
            filter: drop-shadow(-5px -1px 0 var(--border));
            transform: rotate(13deg);
            position: absolute;
            top: -34px;
            left: 11px;
        }
    }

    .right-circle {
        width: 18px;
        height: 25px;
        background: var(--blick);
        border: 8px solid var(--border);
        box-shadow: 0 0 0 12px var(--caps-light), 0 0 0 20px var(--border), -12px 0 0 17px var(--caps-dark), -21px 0 0 20px var(--border);
        border-radius: 50%;
        transform: rotateY(70deg);
        position: absolute;
        top: 13.5rem;
        left: 28.3rem;
        z-index: 4;

        &::before {
            content: '';
            width: 0;
            height: 0;
            border-left: 21px solid transparent;
            border-right: 0;
            border-bottom: 15px solid var(--caps-dark);
            filter: drop-shadow(-5px -1px 0 var(--border));
            transform: rotate(59deg);
            position: absolute;
            top: -37px;
            left: -26px;
        }
    }
}

.yoda-wrap {
    width: 16rem;
    height: 6rem;
    position: absolute;
    top: 9rem;
    left: 11rem;
    z-index: 4;

    .hair {
        width: 25px;
        height: 20px;
        position: absolute;
        top: 0.5rem;
        left: 8rem;

        &::before,
        &::after {
            content: '';
            width: 4px;
            height: 15px;
            background: var(--border);
            transform: rotate(-15deg);
            border-radius: 5px;
            position: absolute;
            top: 5px;
            left: 4px;
        }

        &::after {
            transform: rotate(15deg);
            left: 9px;
            top: 4px;
        }
    }

    .yoda {
        width: 6.5rem;
        height: 3rem;
        border-radius: 20px 20px 0 0;
        background: var(--yoda);
        box-shadow: inset -4px 4px 0 0 var(--yoda-light);
        filter: drop-shadow(0px -4px 0 var(--border)) drop-shadow(4px 1px 0 var(--border)) drop-shadow(-4px 1px 0 var(--border));
        position: absolute;
        top: 29px;
        left: 75px;

        &::before {
            content: '';
            width: 4rem;
            height: 2rem;
            border-radius: 50%;
            background: var(--yoda);
            box-shadow: inset 0 7px 0 -4px var(--yoda-light);
            position: absolute;
            top: -6px;
            left: 19px;
        }

        &::after {
            content: '';
            width: 2rem;
            height: 2rem;
            border-radius: 50%;
            background: var(--yoda);
            box-shadow: 80px 0 0 0 var(--yoda), inset 6px -6px 0 0 var(--yoda-light);
            position: absolute;
            top: 18px;
            left: -4px;
        }

        .brow {
            filter: drop-shadow(0 -4px 0 var(--yoda-shadow));

            &::before,
            &::after {
                content: '';
                width: 25px;
                height: 10px;
                background: var(--yoda);
                transform: rotate(15deg);
                border-radius: 50%;
                position: absolute;
                top: 8px;
                left: 30px;
            }

            &::after {
                transform: rotate(-15deg);
                left: 50px;
            }
        }

        .eye-left,
        .eye-right {
            width: 27px;
            height: 20px;
            background: var(--eye);
            border-radius: 100% 100% 60% 60%;
            box-shadow: 0px -3px 0 4px var(--yoda-shadow);
            position: absolute;
            top: 19px;
            left: 11px;
            z-index: 1;

            &::before {
                content: '';
                width: 4.5px;
                height: 4.5px;
                border-radius: 50%;
                background: white;
                box-shadow: -5px 3px 0 -1.5px white;
                position: absolute;
                top: 5px;
                left: 6px;
            }
        }

        .eye-right {
            left: 65px;

            &::after {
                content: '';
                width: 15px;
                height: 4px;
                border-radius: 10px;
                background: var(--border);
                position: absolute;
                top: 16px;
                left: -21px;
            }
        }

        .eye-left::after {
            content: '';
            width: 5px;
            height: 14px;
            border-radius: 10px;
            background: var(--yoda-light);
            position: absolute;
            top: -3px;
            left: 37px;
        }
    }

    .ear-left {
        width: 0;
        height: 0;
        border-top: 6px solid transparent;
        border-right: 100px solid var(--border);
        border-bottom: 25px solid transparent;
        transform: rotate(-9deg);
        position: absolute;
        top: 50px;
        left: -15px;
        z-index: -1;

        &::before {
            content: '';
            width: 0;
            height: 0;
            border-top: 0 solid transparent;
            border-right: 80px solid var(--yoda);
            border-bottom: 15px solid transparent;
            transform: rotate(-3deg);
            position: absolute;
            top: 1px;
            left: 21px;
        }

        &::after {
            content: '';
            width: 90px;
            height: 12px;
            background: var(--border);
            border-radius: 35%;
            transform: rotate(20deg);
            position: absolute;
            top: 8px;
            left: 0;
        }

        .line {
            width: 60px;
            height: 20px;
            background: var(--border);
            border-radius: 50%;
            transform: rotate(-2deg);
            position: absolute;
            top: 7px;
            left: 50px;

            &::before {
                content: '';
                width: 10px;
                height: 8px;
                background: var(--yoda-shadow);
                border-top-left-radius: 5px;
                transform: rotate(-2deg);
                position: absolute;
                top: -8px;
                left: 29px;
            }
        }
    }

    .ear-right {
        width: 0;
        height: 0;
        border-top: 6px solid transparent;
        border-right: 100px solid var(--border);
        border-bottom: 25px solid transparent;
        transform: rotate(10deg) rotateY(180deg);
        position: absolute;
        top: 50px;
        left: 165px;
        z-index: -1;

        &::before {
            content: '';
            width: 0;
            height: 0;
            border-top: 0 solid transparent;
            border-right: 80px solid var(--yoda);
            border-bottom: 15px solid transparent;
            transform: rotate(-3deg);
            position: absolute;
            top: 1px;
            left: 21px;
        }

        &::after {
            content: '';
            width: 90px;
            height: 12px;
            background: var(--border);
            border-radius: 35%;
            transform: rotate(20deg);
            position: absolute;
            top: 8px;
            left: 0;
        }

        .line {
            width: 60px;
            height: 20px;
            background: var(--border);
            border-radius: 50%;
            transform: rotate(-2deg);
            position: absolute;
            top: 7px;
            left: 50px;

            &::before {
                content: '';
                width: 10px;
                height: 8px;
                background: var(--yoda-shadow);
                border-top-left-radius: 5px;
                transform: rotate(-2deg);
                position: absolute;
                top: -8px;
                left: 29px;
            }
        }
    }

    .pled1 {
        width: 8rem;
        height: 15px;
        background: var(--caps-dark);
        transform: skewX(-60deg);
        border-radius: 35% 40% 0 0;
        box-shadow: inset 0 4px 0 0 var( --pled), inset 15px 0 0 0 var(--caps-shadow), -7px -2px 0 2px var(--border), 2px -1px 0 2px var(--caps-shadow);
        position: absolute;
        top: 76px;
        left: 25px;
        z-index: 4;
    }

    .pled2 {
        width: 6rem;
        height: 22px;
        background: var(--caps-dark);
        border-radius: 100% 20% 0 0 / 100% 100% 0 0;
        box-shadow: inset -4px 3px 0 0 var(--pled), inset -12px 5px 0 0 var(--caps-shadow), 4px -2px 0 2px var(--border);
        position: absolute;
        top: 69px;
        left: 130px;
        z-index: 3;
    }
}