Animazione di scuotimento di un campo di input quando il valore inserito non è quello previsto.
Il tutto utilizzando solo HTML e CSS, nessun codice JavaScript!
Qui il video in MENO DI 1 MINUTO! --> https://www.youtube.com/shorts/f62q_jq8deE
HTML:
<input
type="text"
pattern="[a-zA-Z ]*"
placeholder="Inserisci il tuo nome"
/>
CSS:
input:invalid {
animation: shake .3s
}
@keyframes shake {
25% { transform: translateX(4px) }
50% { transform: translateX(-4px) }
75% { transform: translateX(4px) }
}
Nessuno ha ancora commentato questo articolo, fallo tu per primo!
Scrivi un Commento