Quieres crear listas CSS con animación en JavaScript como un programador web experto? Pues apúntate con nosotros. - Instituto FOC | Informática ONLINE | FP Informática ONLINE

Especialistas en Informática

Quieres crear listas CSS con animación en JavaScript como un programador web experto? Pues apúntate con nosotros.

A continuación vamos a explicar cómo crear listas CSS y cómo aplicarles animación con tan solo unas pocas líneas de código JavaScript.

En el siguiente código puedes ver cómo con unas pocas líneas en HTML y un código JavaScript muy sencillo, podemos crear una lista con tres elementos, los cuales gracias al código JavaScript, cambian de tamaño y color cuando pasamos el ratón por encima de cualquiera de ellos.

ListasCSS-Codigo

Pero esto es muy básico para un programador web experto, por lo que le aplicamos una serie de reglas CSS para conseguir un fondo oscuro, cambiar el padding por defecto de la ul para desplazarlo hacia la derecha y aplicar bordes a cada li para crear un pequeño efecto de profundidad. También eliminaremos el borde superior del primer elemento de la lista y el borde inferior del último elemento de esta lista.

listaCSS-Estilos

El resultado será el siguiente, al pasar el ratón por encima del elemento 3 de la lista:

listasCSS_Resultado

Todo este desarrollo web en lenguaje HTML, JavaScript y reglas CSS lo puedes aprender si cursas con nosotros cualquiera de estos certificados de profesionalidad:

Recuerda que un Certificado de Profesionalidad es un título oficial válido en todo el territorio nacional, que lo da el Servicio Público de Empleo Estatal (SEPE) o las Comunidades Autónomas y que te acredita oficialmente para desarrollar un trabajo. Además de estar reconocido en toda la Unión Europea.

El código usado para este ejemplo, puedes descargo aquí para probarlo e incluso mejorarlo. 😉

Certificaciones Profesionales

Accessibility Toolbar