viernes, 12 de enero de 2024

Ejercicios html 2

Toca con dedo cuadrado y se movera Mover Cuadrado

















TOCA EL CUADRADO Y SE MOVERA

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Mover Cuadrado</title>
    <style>
      .square {
        width: 100px;
        height: 100px;
        background-color: red;
        position: absolute;
        left: 0;
        transition: all 0.4s;
      }

      .square.move {
        left: calc(100% - 100px);
      }
    </style>
  </head>

  <body>
    <div class="square" ontouchstart="moveSquare()"></div>

    <script>
      function moveSquare() {
        var square = document.querySelector(".square");
        square.classList.add("move");

        setTimeout(function () {
          square.classList.remove("move");
        }, 400);
      }
    </script>
  </body>
</html>








No hay comentarios:

Publicar un comentario