Que interesante es aprender cosas nuevas y conseguir nuevos efectos para nuestras páginas webs. Hoy podrás encontrar en este artículo distintas animaciones con css3 simples y avanzadas.

 

Transformicons

Son animaciones de iconos, símbolos y botones usando SVG y CSS. Después solo tienes que pulsar el botón de construir, y se te genera el texto en html, css y javascript.

animaciones-css3

 

 

CSS Shake

Básicamente consigues el efecto de temblar. Hay distintas variedades: suave, más agresivo, con una pequeña rotación,… La forma de integrarlo en una web es superfácil. En el head incluir:

<link type="text/css" href="csshake.css">

En el código html, en la versión básica habría que incluir:

<div class="shake"></div

Animaciones con CSS3

 

 

Magic Animations CSS3

Aquí dispones de una gran cantidad de animaciones distintas con css3. Desde las típicas hasta unas un poco diferentes. Además puedes personalizar el tiempo o incluso que sea infinita.

css3-animaciones2

 

 

Barras de progreso con CSS3

Son 8 barras de progreso con distintos efectos. Para ver el código solo tienes que pulsar en el ‘View Source’ del elemento escogido.

css3-animaciones4

 

 

Distintos efectos CSS3

Colección de animaciones en CSS3, podrás ver todas las disponibles pulsando las flechas en los laterales. Hay también alguna barra de progreso.

css3-animaciones5

 

Como puedes ver animaciones en css3 hay muchas, solo tienes que seleccionar las adecuadas para tu página web.

 

 

¿Más recursos con CSS3?

Puedes aprender a crear botones CSS3 para web o añadir iconos de redes sociales en CSS3.

Guardar

Guardar