0

Escriba una página web que contenga un div con un color de fondo azul situado en la esquina superior izquierda de la página. Cuando el ratón esté sobre él, el div debe girar y moverse a la izquierda hasta que llegue a la esquina superior derecha de la página. El div no debe saltar directamente a la esquina superior derecha.

div.color{
    width: 150px;
    height: 150px;
    background-color: blue ;
    float: left;
   
    }
div.color:hover{
    width: 150px;
    height: 150px;
    background-color: blue;
    float: right;
    }
 <div class="color">
        </div>

1 respuesta 1

1

Debes usar algo que se llama "transform" y "transition". Ambos son incluídos en el elemento y en el estado "activador" de dicho elemento, que en tu caso es: hover.

Transition tiene algunas propiedades que son importantes e incluyen el comportamiento de la animación en general.

  1. Nombre de una propiedad CSS para que tu animación pueda ejecutarse propiamente
  2. Duración de la animación
  3. Ajustes de sincronización
  4. Retrasos, si es que tu animación debierá tardarse unos segundos antes de correrse

Esta es la ruta sugerida: transform: propiedad-css, duración, sincronización y retraso

Ejemplo: transform: 300ms ease-in-out 1s;

Desglose de ejemplo: Esta animación toma la propiedad css "transform", tendrá una duración de 300ms, se sincroniza con la propiedad "ease-in-out", que en otras palabras hace que tenga una suavidad al entrar y salir y tiene un retraso de 1 segundo.

Transform es capaz de modificar tu elemento, esto varía mucho en lo que se desee hacer. Puedes modificar aquí las coordenadas que parece es lo que deseas lograr. Esto lo inidcas en tu propiedad de hover pues es como tu animación cobrará vida.

Algunos de las opciones incluidas son: rotar, escalar, trasladar y torcer. Para tu situación sugeriría un "translate" (traslado) para que se pueda mover de un lado a otro.

Ejemplo: transform: translate(200px, 150px) rotate(20deg);

Desglose de ejemplo: En esta propiedad vemos que el traslado es de 200 pixeles (de izquierda a derecha) y 150 pixeles (de arriba hacia abajo) y una rotación de 20 grados.

Ya que es muy probable que tu situación sea única, te dejo un ejemplo muy simple que pude recuperar de la web para que puedas tener un ejemplo funcional a la mano. Saludos!

body {
  padding: 50px;
}

.trigger {
  width: 200px;
  height: 200px;
  border: 20px solid #999;
  background: #999;
}

.box {
  display: inline-block;
  background-color: pink;
  width: 200px;
  height: 200px;
  transition: transform 300ms ease-in-out;
  pointer-events: none;
}

.trigger:hover .box {
  trasnform: traslate(200px, 150px) rotate(20deg);
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.