LabEx
EntrarÚnete

Animación de caja con sombra al pasar el cursor

Beginner

This tutorial is from open-source community. Access the source code

Introducción

En este laboratorio, exploraremos varios conceptos y técnicas de CSS para mejorar la apariencia visual de las páginas web. A través de ejercicios prácticos, aprenderemos cómo crear y modificar reglas de CSS, aplicar estilos a elementos HTML y usar selectores de CSS para dirigirse a elementos específicos. Al final del laboratorio, tendrás una comprensión sólida de cómo usar CSS para crear páginas web visualmente atractivas y responsivas.

Este es un Guided Lab, que proporciona instrucciones paso a paso para ayudarte a aprender y practicar. Sigue las instrucciones cuidadosamente para completar cada paso y obtener experiencia práctica. Los datos históricos muestran que este es un laboratorio de nivel principiante con una tasa de finalización del 92%. Ha recibido una tasa de reseñas positivas del 100% por parte de los estudiantes.

Animación de caja con sombra al pasar el cursor

index.html y style.css ya se han proporcionado en la máquina virtual.

Para crear una caja con sombra alrededor del texto cuando se pasa el cursor sobre él, siga estos pasos:

  1. Establezca transform: perspective(1px) para dar al elemento un espacio tridimensional afectando la distancia entre el plano Z y el usuario, y translateZ(0) para reposicionar el elemento p a lo largo del eje z en el espacio tridimensional.
  2. Utilice box-shadow para hacer que la caja sea transparente.
  3. Habilite transiciones para tanto box-shadow como transform utilizando la propiedad transition-property.
  4. Aplique una nueva box-shadow y transform: scale(1.2) para cambiar la escala del texto utilizando los selectores pseudo-clases :hover, :active y :focus.
  5. Agregue la clase hover-shadow-box-animation al elemento p.

Aquí está el código HTML:

<p class="hover-shadow-box-animation">Box it!</p>

Y aquí está el código CSS:

.hover-shadow-box-animation {
  display: inline-block;
  vertical-align: middle;
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  margin: 10px;
  transition:
    box-shadow 0.3s,
    transform 0.3s;
}

.hover-shadow-box-animation:hover,
.hover-shadow-box-animation:focus,
.hover-shadow-box-animation:active {
  box-shadow: 1px 10px 10px -10px rgba(0, 0, 24, 0.5);
  transform: scale(1.2);
}

Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Resumen

¡Felicidades! Has completado el laboratorio de Animación de caja con sombra al pasar el cursor. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.