Mejora tus páginas web con impresionantes animaciones de CSS

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.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css(("CSS")) -.-> css/DynamicStylingGroup(["Dynamic Styling"]) css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicStylingGroup -.-> css/colors("Colors") css/CoreLayoutGroup -.-> css/box_model("Box Model") css/CoreLayoutGroup -.-> css/margin_and_padding("Margin and Padding") css/CoreLayoutGroup -.-> css/display_property("Display Property") css/IntermediateStylingGroup -.-> css/pseudo_classes("Pseudo-classes") css/DynamicStylingGroup -.-> css/animations("Animations") css/DynamicStylingGroup -.-> css/transitions("Transitions") css/DynamicStylingGroup -.-> css/transformations("Transformations") subgraph Lab Skills css/selectors -.-> lab-35214{{"Animación de caja con sombra al pasar el cursor"}} css/colors -.-> lab-35214{{"Animación de caja con sombra al pasar el cursor"}} css/box_model -.-> lab-35214{{"Animación de caja con sombra al pasar el cursor"}} css/margin_and_padding -.-> lab-35214{{"Animación de caja con sombra al pasar el cursor"}} css/display_property -.-> lab-35214{{"Animación de caja con sombra al pasar el cursor"}} css/pseudo_classes -.-> lab-35214{{"Animación de caja con sombra al pasar el cursor"}} css/animations -.-> lab-35214{{"Animación de caja con sombra al pasar el cursor"}} css/transitions -.-> lab-35214{{"Animación de caja con sombra al pasar el cursor"}} css/transformations -.-> lab-35214{{"Animación de caja con sombra al pasar el cursor"}} end

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:

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.
Utilice box-shadow para hacer que la caja sea transparente.
Habilite transiciones para tanto box-shadow como transform utilizando la propiedad transition-property.
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.
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.