Water moving with music Add animations Make the water bigger Make the animation beautiful You can tap on the square to stop the music and stop the Square from Animating's game

Click here for free DL of the app version that can save data.

No:34371

170

←

Prev Next

→

Water moving with music Add animations Make the wa..ALL
Developer Game Studio｜Date and time 24/1/10 6:16:49
Build time 7.178 sec｜Game capacity 1.376KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
<style>
  #container {
    position: relative;
    width: 300px;
    height: 300px;
    border: 1px solid black;
    animation: animateWater 1s linear infinite;
  }

#square {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    background-color: #0099ff;
    animation: animateSquare 1s linear infinite;
    cursor: pointer;
  }

@keyframes animateWater {
    0% {
      background-color: #00ccff;
    }
    50% {
      background-color: #0099ff;
    }
    100% {
      background-color: #00ccff;
    }
  }

@keyframes animateSquare {
    0% {
      transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
      transform: translate(-50%, -50%) rotate(360deg);
    }
  }
</style>
</head>
<body>
<div id="container">
  <div id="square"></div>
</div>