Key Up (Copy 4708)

✨ JEERAPHAT SAKULSUBWATTANA

<html>
    <head>
        <title>test</title>
        <style>
        * {
        margin: 0;
        }
        body {
        height: 100%;
        width: 100%;
        background-color: black;
        }
        .a {
        width: 100px;
        height: 100px;
        background-color: red;
        border-radius: 10px;
        box-shadow: 0 0 20px red;
        }
        .p1 {
        position: absolute;
        left: calc((100% - 100px) / 2);
        margin-top: 1em;
        }

.b {
        width: 100px;
        height: 100px;
        background-color: purple;
        border-radius: 10px;
        transform: rotate(45deg);
        box-shadow: 0 0 20px purple;
        }

.p2 {
        top: calc((100% - 100px) / 2);
        position: absolute;
        margin-left: 1em;
        }

.c {
        width: 100px;
        height: 60px;
        background-color: green;
        border-radius: 5px;
        /*   margin-right: 3em; */
        box-shadow: 0 0 20px green;
        transform: skew(-45deg) rotate(45deg);
        }

.p3 {
        position: absolute;
        right: 0;
        top: calc((100% - 100px) / 2);
        }

.d {
        width: 100px;
        height: 100px;
        background-color: skyblue;
        border-radius: 100%;
        box-shadow: 0 0 20px skyblue;
        }

.p4 {
        position: absolute;
        bottom: 0;
        left: calc((100% - 100px) / 2);
        margin-bottom: 1em;
        }

.e {
        position: absolute;
        top: calc((100% - 100px) / 2);
        left: calc((100% - 100px) / 2);
        }

@keyframes aa {
        to {
            transform: rotatey(360deg);
        }
        }

@keyframes bb {
        to {
            transform: rotatex(360deg);
        }
        }

@keyframes cc {
        to {
            transform: rotatez(360deg);
        }
        }

@keyframes dd {
        to {
            transform: rotatey(360deg);
        }
        }
        @keyframes wave {
        20% {transform: translateZ(60px);}
        60% {transform: translateY(60px);}
        80% {transform: translateX(60px);}
        }
        @keyframes spin{
        from{transform:rotate(0deg)}
        to{transform:rotate(360deg)}
        }
        @keyframes wow{
        20% {transform: rotateZ(90deg);}
        40% {transform: rotateY(270deg);}
        60% {transform: rotateX(90deg);}
        }
        @keyframes boom {
        20% {transform: scaleX(.7);}
        50% {transform: scaleY(.7);}
        80% {transform: scaleZ(.7);}
        </style>
        <script>
            const block = document.querySelector(".e");
            document.body.onkeyup = function (e) {
            console.log(e);
            if (e.key == "ArrowUp") {
                block.innerHTML = "<div class='a'></div>";
                block.style.animation = "aa 1s linear";
            } else if (e.key == "ArrowDown") {
                block.innerHTML = "<div class='d'></div>";
                block.style.animation = "bb 1s linear";
            } else if (e.key == "ArrowLeft") {
                block.innerHTML = "<div class='b'></div>";
                block.style.animation = "cc 1s linear";
            } else if (e.key == "ArrowRight") {
                block.innerHTML = "<div class='c'></div>";
                block.style.animation = "dd 1s linear";
            }
            };
        </script>
    </head>
    <body>
        <div class="a p1"></div>
        <div class="b p2"></div>
        <div class="c p3"></div>
        <div class="d p4"></div>
        <div class="e"></div>
    </body>
</html>