The Simple Web (Copy 13729)

✨ 151 TREEYA UACHAROENSRI

<html>
  <head>
    <title>minions
    </title>
    <style>
      @keyframes jj {
        0% {
				transform: translatex(0px);
        }
        100% {
				transform: translatex(70px);
        }
      }
      @keyframes minn {
        0% {
				transform: translatex(0px);
        }
        100% {
				transform: translatey(10px);
        }

}
      body {
        background-color: 	hsl(60, 100%, 94%);
        background-image: url('https://cdn.discordapp.com/attachments/860515428253564978/944606078744809562/greens-meadow-trees-clouds-wallpaper-preview-removebg-preview.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
      }

.min1 {
        top: 10px;
        left: 450px;
        position: absolute;
        animation: jj 1s alternate linear infinite;
      }
      .min2 {
        top: 400px;
        left: 450px;
        position: absolute;
        animation: minn 0.1s alternate linear infinite;
      }

.button {
            position: absolute;
            bottom: 10px;
            right: 100px;
            background: lightblue;
            padding: 7px 10px 7px 10px;
            border-radius: 6px;
            cursor: pointer;
            box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
        }

</style>
  </head>
  <body>

<span class="button" onclick="button"> click  </span>
    <script> 
        var a = document.querySelector("body");
        var b = document.querySelector(".button");
        var color = 0;
        b.addEventListener("click", function () {
            color += 20;
            a.style.backgroundColor = "hsl(" + color + ", 100%, 89%)";
        });
    </script>

</body>
</html>