javascript 复活节彩蛋企鹅

Posted 2021-05-03

:root {
    --penguin-size: 300px;
    --penguin-skin: gray;
    --penguin-belly: white;
    --penguin-beak: orange;
}

.penguin {
    position: absolute;
    z-index: 2;
    margin: auto;
    display: none;
    margin-top: 5%;
    height: 10px;
    width: var(--penguin-size, 300px);
    height: var(--penguin-size, 300px);
    cursor: pointer;

    * {
        position: absolute;
    }

    .penguin-bottom {
        top: 40%;
        left: 23.5%;
        background: var(--penguin-skin);
        width: 53%;
        height: 45%;
        border-radius: 70% 70% 100% 100%;
    }

    .right-hand {
        top: 5%;
        left: 25%;
        background: var(--penguin-skin);
        width: 30%;
        height: 60%;
        border-radius: 30% 30% 120% 30%;
        transform: rotate(130deg);
        z-index: -1;
        animation-duration: 3s;
        animation-name: wave;
        animation-iteration-count: infinite;
        transform-origin:0% 0%;
        animation-timing-function: linear;
    }

    @keyframes wave {
        10% {
            transform: rotate(110deg);
        }
        20% {
            transform: rotate(130deg);
        }
        30% {
            transform: rotate(110deg);
        } 
        40% {
            transform: rotate(130deg);
        }  
    }

    .left-hand {
        top: 0%;
        left: 75%;
        background: var(--exfo-skin);
        width: 30%;
        height: 60%;
        border-radius: 30% 30% 30% 120%;
        transform: rotate(-45deg);
        z-index: -1;
    }

    .right-feet {
        top: 85%;
        left: 60%;
        background: var(--exfo-beak);
        width: 15%;
        height: 30%;
        border-radius: 50% 50% 50% 50%;
        transform: rotate(-80deg);
        z-index: -2222;
    }

    .left-feet {
        top: 85%;
        left: 25%;
        background: var(--exfo-beak);
        width: 15%;
        height: 30%;
        border-radius: 50% 50% 50% 50%;
        transform: rotate(80deg);
        z-index: -2222;
    }

    .penguin-top {
        top: 10%;
        left: 25%;
        background: var(--penguin-skin);
        width: 50%;
        height: 45%;
        border-radius: 70% 70% 60% 60%;

        .right-cheek {
            top: 15%;
            left: 35%;
            background: var(--penguin-belly);
            width: 60%;
            height: 70%;
            border-radius: 70% 70% 60% 60%;
        }

        .left-cheek {
            top: 15%;
            left: 5%;
            background: var(--exfo-belly);
            width: 60%;
            height: 70%;
            border-radius: 70% 70% 60% 60%;
        }

        .belly {
            top: 60%;
            left: 2.5%;
            background: var(--penguin-belly);
            width: 95%;
            height: 100%;
            border-radius: 120% 120% 100% 100%;
        }

        %sparkle {
            top: 25%;
            left:-23%;
            background: white;
            width: 150%;
            height: 100%;
            border-radius: 50%;
        }

        .right-eye {
            top: 45%;
            left: 60%;
            background: black;
            width: 15%;
            height: 17%;
            border-radius: 50%;

            .sparkle{
                @extend %sparkle;
            }
        }

            .left-eye {
            top: 45%;
            left: 25%;
            background: black;
            width: 15%;
            height: 17%;
            border-radius: 50%;

            .sparkle{
                @extend %sparkle;
            }
        }

        .blush-right {
            top: 65%;
            left: 15%;
            background: pink;
            width: 15%;
            height: 10%;
            border-radius: 50%;
        }

        .blush-left {
            top: 65%;
            left: 70%;
            background: pink;
            width: 15%;
            height: 10%;
            border-radius: 50%;
        }

        .beak-top {
            top: 60%;
            left: 40%;
            background: var(--penguin-beak);
            width: 20%;
            height: 10%;
            border-radius: 50%;
        }

        .beak-bottom {
            top: 65%;
            left: 42%;
            background: var(--penguin-beak);
            width: 16%;
            height: 10%;
            border-radius: 50%;
        }
    }
}

        <div class="penguin" alt="Hey !!!">
            <div class="penguin-bottom">
                <div class="right-hand"></div>
                <div class="left-hand"></div>
                <div class="right-feet"></div>
                <div class="left-feet"></div>
            </div>
            <div class="penguin-top">
                <div class="right-cheek"></div>
                <div class="left-cheek"></div>
                <div class="belly"></div>
                <div class="right-eye">
                    <div class="sparkle"></div>
                </div>
                <div class="left-eye">
                    <div class="sparkle"></div>
                </div>
                <div class="blush-right"></div>
                <div class="blush-left"></div>
                <div class="beak-top"></div>
                <div class="beak-bottom"></div>
            </div>
        </div>

        let sequence = [38, 38, 40, 40, 37, 39, 37, 39, 66, 65];
        let position = 0;

        document.addEventListener(
            'keyup',
            event =>
            {
                if (position < sequence.length && event.which === sequence[position])
                {
                    position++
                }
                else
                {
                    position = 0
                }
                if (position === sequence.length)
                {
                    position = 0
                    $('.penguin').css('display', 'block')
                    setTimeout(
                        () =>
                        {
                            $('.penguin').css('display', 'none')
                        },
                        1000
                    )
                }
            }
        )