Creando un átomo animado solo con CSS

En esta ocasión veremos como hacer un átomo solo con técnicas de CSS3, no explicare en detalle como se se hace cada cosa, solo diré que técnicas se utilizaron para obtener el resultado que vemos, quedara para su curiosidad si quieres saber en detalle el funcionamiento puesto que al final dejare el código fuente para que lo utilicen donde quieran.

Inicialmente veremos que es lo que queremos lograr y desde ahí partiremos, así que veamos que queremos hacer: 

Primero que todo debemos tener clara la estructura del átomo y un funcionamiento básico, en este caso es un átomo de Litio con 3 electrones de valencia, es decir que debe tener 3 protones y 3 neutrones, ademas sabemos que las rutas que siguen los electrones alrededor del núcleo son llamadas orbitales. Ya con esto ahora si empecemos.

Paso 1:  Estructura HTML

Inicialmente crearemos un contenedor para el átomo, dentro de el crearemos tres elementos DIV uno para cada ruta de los electrones (orbitales), para cada ruta crearemos otro DIV dentro con la clase electrón,  ya con esto tenemos la parte bonita del átomo. Ahora al finalizar los orbitales debemos crear los elementos div necesarios para los neutrones y protones, en este caso deben ser 3 de cada uno, pero para casos prácticos solo crearemos dos de cada tipo.

Paso 2: Creando Orbitales

Hora crearemos los orbitales o rutas que seguirá cada electrón, para esto haremos uso del la propiedad de CSS3 transform y la función rotate(angulo) la cual nos da una rotación 2D al elemento según el angulo indicado. Ademas de esto debemos poner un border -radius para hacer el orbital redondeado junto con un border para identificar las fronteras del mismo.

Paso 3: Animando electrones

Inicialmente damos atributos a nuestros electrones y a las rutas que llevara cada uno, una cosa debe quedar clara, los orbitales son los elipses creadas anteriormente, pero las rutas son las elementos que animaremos y serán estos los que le den la direccion al átomo. Para animar atributos es necesario utilizar la regla CSS @keyframes, la cual nos permite animar el elemento gradualmente en un tiempo desde un estilo a un estilo nuevo. 

Si queremos entender mejor el funcionamiento de esta regla podemos visitar los siguientes enlaces:

• Animaciones CSS
• CSS3 @keyframes Rule
• @keyframe animation syntax
• @keyframes

Para hacer nuestra rotación debemos utilizar @keyframes para animar los atributos  transform: rotate(0deg) hasta  transform: rotate(360deg), esto hará un movimiento rotatorio de nuestros electrones. Una vez hecho esto ya podremos ver la animación funcionando.




Ahora ya tenemos la estructura principal lo único que resta es la creación de los demás elementos (protones y neutrones) en lo cual no entrare en detalle. A continuación podemos ver el resultado de todo el trabajo con algunos extras como siempre.

Para terminar pueden encontrar el ejemplo en jsfiffle

• Demostración y código fuente

Espero esto haya sido de su utilidad y les sirva de ayuda en sus proyectos web, no obstante si tienen dudas y/o sugerencias no olviden comentar.

Hasta la próxima.