Cómo rotar un elemento al pasar el mouse en una página web

Establecer el color del elemento al pasar el mouse ayuda a centrar la atención de los visitantes en un elemento y da una impresión y un concepto de la idea deseada sobre su significado. Puede cambiar el color del elemento al pasar el mouse. Para eso, seleccione un elemento y, en el Panel de propiedades, vaya a la sección Animación activada, haga clic en el enlace Hover y luego en la casilla de verificación Hover. Modifique el color que se aplicará al pasar el mouse.

Los efectos de animación de desplazamiento que se utilizan en los sitios web modernos se han vuelto más sofisticados. Uno de los ejemplos de efectos es el elemento Move on Hover. Puede agregar el movimiento de un elemento al pasar el mouse. Agregue o seleccione un elemento y vaya al Panel de propiedades. Haga clic en el enlace Hover y luego marque la casilla de verificación Hover. Establezca los valores para la propiedad Move X, Y.

El borde del elemento también es importante para mejorar la interacción de los elementos y llamar la atención de los visitantes. Puede cambiar el borde de desplazamiento para elementos tales como icono, imagen, forma, grupo, cuadrícula, etc. En la sección de desplazamiento del panel de propiedades, marque la casilla de verificación de desplazamiento. Modifique el borde que se mostrará al pasar el mouse sobre un elemento.

También puede cambiar el relleno a imágenes e incluso cambiar una imagen de fondo a otra mientras se desplaza, lo que puede entretener mucho a sus visitantes. Seleccione una forma y agregue una imagen para el fondo. Vaya a la sección Animación activada del Panel de propiedades y haga clic en Hover. Habilite el efecto Hover y seleccione la imagen como el tipo de fondo. Elija la imagen flotante. Prueba.

Puede modificar la propiedad Sombra en Hover para textos y otros elementos. Para configurar la sombra al pasar el mouse, agregue o seleccione un elemento. A continuación, haga clic en el enlace Hover del Panel de propiedades, marque la casilla de verificación Hover, modifique la Sombra que se aplicará al Hover. Puede comenzar con uno de los ajustes preestablecidos de sombra y personalizarlo si es necesario.

Puede modificar la transparencia del elemento al pasar el mouse para agregar interacción y atractivo al diseño del sitio web. En el Panel de propiedades, haga clic en el enlace Hover y marque la casilla de verificación Hover. Establezca la transparencia que se aplicará al pasar el mouse. Haga clic en algún lugar del bloque para anular la selección del elemento. Coloca el cursor sobre el elemento para probar el cambio de transparencia.

Al agregar la animación de desplazamiento a una forma con un fondo, es posible que desee cambiar el relleno sólido a algo atractivo, como un degradado. Para eso, seleccione una forma y vaya al enlace de desplazamiento del panel de propiedades. Haga clic en el enlace Animation On -> Hover y marque la casilla de verificación Hover. Seleccione el tipo de degradado para el fondo y establezca el degradado.

Para imágenes y formas, grupos y celdas de cuadrícula, puede cambiar el radio al pasar el mouse. Los elementos se vuelven atractivos con esta propiedad, lo que impulsa la acción (botones Comprar ahora, Leer más, etc.) y hacer que su diseño sea único. En la sección de desplazamiento del panel de propiedades, habilite el modo de desplazamiento. Arrastre el control deslizante Radio para establecer su valor al pasar el mouse.

Puede administrar la animación de desplazamiento estableciendo su Duración. Establecer la duración de la animación al pasar el mouse, agregue o seleccione un elemento y vaya al Panel de propiedades. Seleccione el enlace Hover de la sección Animation On y elija la casilla de verificación Hover. Los valores admitidos para el control deslizante son de 10 a 200, y puede ingresar un número mayor en este campo si es necesario.

La escala puede parecer la reacción más natural en su cursor. Por tanto, puede ser muy popular. Puede agregar fácilmente Scale On Hover a su sitio web. Para eso, agregue o seleccione un elemento y luego vaya al Panel de propiedades. Haga clic en el enlace Hover de la sección Animation On y marque la casilla de verificación Hover. Desplácese hacia abajo hasta las propiedades Escalar, Girar y Mover. El tamaño real es igual a 100.