Esferas de luz animadas con CSS

Probando animaciones para crear una esfera, conseguí algunas cosas chulas. Cambiando solo algunos valores de la animación principal, y en algunos casos añadiendo algunas opciones más, acabe con más de 20 esferas de luz animadas y todas con diferentes animaciones. Todas las esferas incluyen una animación de vaivén para apreciar mejor las animaciones de iluminado, el vaivén se detendrá al pasar el cursor por encima de las esferas. Todas están incluidas en la Colección CSS Light Spheres en Codepen.

Demo #1 Demo #2 Demo #3 Demo #4 Demo #5 Demo #6 Demo #7 Demo #8 Demo #9 Demo #10 Demo #11 Demo #12 Demo #13 Demo #14 Demo #15 Demo #16 Demo #17 Demo #18 Demo #19 Demo #20 Demo #21

CSS Light Spheres

Esta colección creada en Codepen contiene más de 20 esferas en 3D creadas en CSS con diferentes animaciones y colores. Se muestran a continuación, una por una, con una pequeña descripción de su funcionamiento.

#1

La primera esfera y con lo que empezó todo, con una animación muy simple de abajo arriba:

See the Pen CSS Light Sphere #1 by Josetxu (@josetxu) on CodePen.

#2

Esfera número dos, con la misma animación, pero un efecto de duplicado en los aros que la forman:

See the Pen CSS Light Sphere #2 by Josetxu (@josetxu) on CodePen.

#3

Tercera esfera, esta con doble animación de arriba abajo y de abajo arriba, y también doble color:

See the Pen CSS Light Sphere #3 by Josetxu (@josetxu) on CodePen.

#4

Esfera número cuatro, con prácticamente la misma animación que la primera (solo se añaden unos pequeños cambios), pero modificando el tiempo de retardo y acelerando la animación, se consigue otro efecto chulo:

See the Pen CSS Light Sphere #4 by Josetxu (@josetxu) on CodePen.

#5

Quinta esfera con una animación donde solo se iluminan cinco secciones de las veintiuna que conforman la esfera:

See the Pen CSS Light Sphere #5 by Josetxu (@josetxu) on CodePen.

#6

En la esfera número seis transportamos la última sección superior hasta la primea sección inferior comenzando de nuevo allí la iluminación de todas las secciones de la esfera:

See the Pen CSS Light Sphere #6 by Josetxu (@josetxu) on CodePen.

#7

La séptima esfera calcada a la anterior, pero la primera sección transportada de arriba hacia abajo vuelve a su posición original tras iniciar la iluminación de todas las secciones de la esfera.

See the Pen CSS Light Sphere #7 by Josetxu (@josetxu) on CodePen.

#8

La esfera ocho repite el mismo funcionamiento que la número seis, pero esta vez añadiendo un efecto de rebote en la última sección.

See the Pen CSS Light Sphere #8 by Josetxu (@josetxu) on CodePen.

#9

La novena esfera duplica las veintiuna secciones externas de la esfera por el interior de la misma llevando por allí el efecto de iluminación.

See the Pen CSS Light Sphere #9 by Josetxu (@josetxu) on CodePen.

#10

Esfera número diez, parecida a la anterior, añadiendo una sección aún más pequeña y con un efecto de arcoíris en los colores.

See the Pen CSS Light Sphere #10 by Josetxu (@josetxu) on CodePen.

#11

Decimoprimera esfera a la que se le ha añadido un efecto borroso en cada una de las secciones y donde la animación sube para a continuación bajar.

See the Pen CSS Light Sphere #11 by Josetxu (@josetxu) on CodePen.

#12

La esfera número doce es igual que la anterior, solo cambia el color de las secciones y el apagado de las mismas, que se produce un poco antes dando la impresión de que parte de la esfera desaparece.

See the Pen CSS Light Sphere #12 by Josetxu (@josetxu) on CodePen.

#13

La decimotercera esfera vuelve a ser igual que la anterior, cambiando el color de las secciones y el apagado de las mismas, que se produce aún antes dando la impresión de que todavía más esfera desaparece.

See the Pen CSS Light Sphere #13 by Josetxu (@josetxu) on CodePen.

#14

La esfera número catorce también es igual que la anterior, de nuevo cambia el color de las secciones y el apagado de las mismas se produce todavía más pronto dando la impresión de que media esfera desaparece.

See the Pen CSS Light Sphere #14 by Josetxu (@josetxu) on CodePen.

#15

Decimoquinta esfera, otra vez igual que la anterior, con cambio de color y con más esfera todavía, más de la mitad, apagada.

See the Pen CSS Light Sphere #15 by Josetxu (@josetxu) on CodePen.

#16

Esfera número dieciséis, imita el funcionamiento de la anterior, pero esta vez se duplica la animación y se crean dos que se cruzan, una desde arriba y otra desde abajo.

See the Pen CSS Light Sphere #16 by Josetxu (@josetxu) on CodePen.

#17

La decimoséptima esfera es como la anterior pero volviendo a mostrar cada vez más esfera, haciendo el recorrido inverso respecto a las anteriores, pero con la doble animación.

See the Pen CSS Light Sphere #17 by Josetxu (@josetxu) on CodePen.

#18

La esfera dieciocho muestra más esfera aún manteniendo esa doble animación y con dos colores.

See the Pen CSS Light Sphere #18 by Josetxu (@josetxu) on CodePen.

#19

Decimonovena esfera continuando con la serie y aumentando el rango de esfera visible.

See the Pen CSS Light Sphere #19 by Josetxu (@josetxu) on CodePen.

#20

En la esfera veinte y exagerando el efecto anterior las dos animaciones ya no parecen cruzarse sino que aparentan ser independientes y mientras acaba una empieza la otra dando la impresión de ser la misma animación.

See the Pen CSS Light Sphere #20 by Josetxu (@josetxu) on CodePen.

#21

Una última esfera, la vigesimoprimera, creada recientemente para el Codepen Challenge de la tercera semana de junio de 2025, donde volvemos al cambio de color tipo arcoíris y aceleramos la animación para darle más brío.

See the Pen CSS Light Sphere #21 by Josetxu (@josetxu) on CodePen.

Infinitas posibilidades modificando ligeramente el código, los retardos y duraciones de las animaciones, o añadiendo pequeñas modificaciones.

Algo muy parecido a lo visto con los Hexacubos en CSS publicados recientemente.