<!DOCTYPE html>
<html>
<head>
<style>
#square {
width: 200px;
height: 200px;
background-color: lightblue;
position: relative;
}
.circle {
width: 20px;
height: 20px;
background-color: white;
border-radius: 50%;
position: absolute;
animation: move 2s ease-in-out infinite;
}
@keyframes move {
0% {
transform: rotate(0deg) translate(0, 0);
}
100% {
transform: rotate(360deg) translate(100px, 0);
}
}
</style>
</head>
<body>
<div id="square" ontouchstart="createCircle(event)">
</div>
<script>
function createCircle(event) {
var x = event.touches[0].clientX;
var y = event.touches[0].clientY;
var circle = document.createElement("div");
circle.classList.add("circle");
circle.style.left = x + "px";
circle.style.top = y + "px";
document.getElementById("square").appendChild(circle);
}
</script>
</body>
</html>
TOCA CON EL DEDO REP
PETIDAMENTE LA PANTALLA DEL TELEFONO....EN EL CUADRADO AZUL
No hay comentarios:
Publicar un comentario