<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejercicio4 </title>
<style>
#cajapelota {
position:fixed;
transition: all 0.8s ease-out;
}
</style>
<script>
function fdesplazar(){
const pelota=document.getElementById("cajapelota");
pelota.style.top=document.getElementById("cajatop").value+"px";
pelota.style.left=document.getElementById("cajaleft").value+"px";
}
</script>
</head>
<body>
<h2>Desplazar pelota de tenis</h2>
<label for="cajatop">TOP en px:</label><input type="text" id="cajatop"><br>
<label for="cajaleft">LEFT en px:</label><input type="text" id="cajaleft"><br>
<input type="button" value="MOVER" onClick="fdesplazar()">
<div id="cajapelota"><img src="imagenes/pelota.png"></div>
</body>
</html>