Sacudida en entrada no válida: Animaciones CSS cautivadoras para la validación web

Introducción

En este laboratorio, exploraremos las animaciones CSS y las pseudo-clases para crear un efecto de validación de entrada. Específicamente, crearemos una animación de sacudida en una entrada no válida utilizando keyframes y la pseudo-clase :invalid. Este laboratorio te ayudará a mejorar tus habilidades en CSS y a aprender cómo agregar efectos dinámicos y atractivos a tus páginas web.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/DynamicStylingGroup(["Dynamic Styling"]) css(("CSS")) -.-> css/CSSPreprocessorsGroup(["CSS Preprocessors"]) css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) 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/DynamicStylingGroup -.-> css/animations("Animations") css/CSSPreprocessorsGroup -.-> css/mixins("Mixins") subgraph Lab Skills css/selectors -.-> lab-35237{{"Sacudida en entrada no válida"}} css/colors -.-> lab-35237{{"Sacudida en entrada no válida"}} css/box_model -.-> lab-35237{{"Sacudida en entrada no válida"}} css/margin_and_padding -.-> lab-35237{{"Sacudida en entrada no válida"}} css/animations -.-> lab-35237{{"Sacudida en entrada no válida"}} css/mixins -.-> lab-35237{{"Sacudida en entrada no válida"}} end

Sacudida en entrada no válida

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

Para crear una animación de sacudida cuando hay una entrada no válida, siga estos pasos:

Utilice el atributo pattern para definir una expresión regular que especifique la entrada permitida. Por ejemplo, use [A-Za-z]* para permitir solo letras.
Defina una animación de sacudida usando @keyframes. Establezca la propiedad margin-left para mover la entrada hacia la izquierda y hacia la derecha.
Utilice la pseudo-clase :invalid para aplicar la animación de sacudida a la entrada.
Opcionalmente, agregue una sombra de caja roja a la entrada para indicar el error.

A continuación, se muestra un fragmento de código de ejemplo:

<input type="text" placeholder="Letras solo" pattern="[A-Za-z]*" />

@keyframes shake {
  0% {
    margin-left: 0rem;
  }
  25% {
    margin-left: 0.5rem;
  }
  75% {
    margin-left: -0.5rem;
  }
  100% {
    margin-left: 0rem;
  }
}

input:invalid {
  animation: shake 0.2s ease-in-out 0s 2;
  box-shadow: 0 0 0.6rem #ff0000;
}

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 Sacudida en entrada no válida. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.