En este tutorial aprenderá cómo crear hermosos efectos de texto con CSS, y muchas otras cosas que no cree que pueda hacer con CSS. Sin embargo, esta compilación se centra en las animaciones que se pueden hacer con CSS.
Desde el efecto de la barra de carga animada hasta el cambio, y desde las ventanas modales hasta los elementos temblorosos, esta pila de 30 usos inusuales y creativos de la animación CSS puede abrir tu mente a otras formas en las que puedes jugar con animaciones CSS en las que probablemente nunca habías pensado antes.
Siete puntos animados se mueven a la izquierda y a la derecha para que parezca una acción de carga.
Lindos efectos animados cuando se añaden a la cesta de la compra. Desplácese hacia abajo.
Construido con CSS puro, sin JS ni nada.
Al menos con esta página de error, un desarrollador está trabajando en ella. Incluso si es 404.
Aterrizaje en Marte con CSS por mgitch
¡Aterrizamos en Marte! Fabricado con CSS.
¿Puedes oír la ira de Hulk moverse por la pantalla? Genial, ¿verdad?
Día / Noche Por jsndks
Ahora puede cambiar entre el día y la noche con CSS. ¡Una idea genial!
Google Now 3ª aplicación por codecalm
Google Ahora aplicaciones de terceros, animadas.
Clo clo clo clo Par judag
¿Es un gallo moviéndose así? Gran práctica de CSS3.
Una idea sencilla para ponerlo en acción; observe cómo se materializa el botón del menú a medida que se desplaza hacia abajo.
Otro CSS de carga por Maseone
Una impresionante animación CSS de carga rítmica. Hipnótico, ¿no?
Enviar por botón auginator
Haga clic aquí para enviar y el botón animará el proceso de carga hasta que se complete el envío.
Diseño elástico SVG Material per suez
Deslice la barra blanca hacia la derecha para ver el efecto de la barra lateral elástica.
Botón de partículas de igcorreia
Haz lo que dice el botón: rondar por el genio.
Haga clic para ver el efecto pegajoso. Una vez que lo veas, haz clic en él unas cuantas veces más.
Botón Flipside Por hakimel
Haga clic en un lado del botón Eliminar y el botón cambiará a la ubicación en la que hizo clic.
Menú de hamburguesas de verdad! Por CharlesSmart
Un menú de hamburguesas realmente delicioso. Haga clic en la hamburguesa para ver los efectos
Cruisin de yyyy
Vea la bicicleta en el camino.
¡Santo Cubo 3D!
Firma animada por drygiel
Aquí hay una firma que no es realmente una animación GIF, sino una secuencia PNG animada con CSS3.
Animación de degradado de fondo Por quasimondo
Este truco cambia el fondo de un color a otro, una forma continua y suave.
Star wars ícono de conmutación Por rss
Un menú de hamburguesas se convierte en sables de luz en la batalla (una cruz.
Animación estilo GIF por jascha
Mirar un cuadro se materializa.
Concentrado – animación de flujo
Un pequeño bolígrafo animado.
Una ilusión óptica impresionante, sí, hecha con CSS3.
He aquí un recordatorio para que tome su dosis diaria de café. Como lo necesites.
¿No puede acceder a la página que desea debido a la pérdida de una conexión? Este es el dinosaurio que siempre ves cuando sucede, pero esta vez está huyendo de un meteorito!
Pase el ratón por encima de cada efecto para ver cómo se mueve el pequeño.
Si conoces la física, ciertamente conoces la cuna de Newton, pero probablemente no así.
Lanzamiento del Koolhaus Modal
Haga clic para ver la hermosa ventana modal y animada.
Robot que funciona por P233
Este robot sigue caminando y camina alrededor del eje Y.
Paginación por contrato por Hakim
Desde la primera hasta la última página, esta animación de paginación muestra claramente cómo se mueve.