Cum să construiești o animație cu cercuri orbitale în HTML și CSS

Publicat pe: 29 Jul 2025 | 221 vizualizări | ~2 min. lectură

O animație atomică realizată cu HTML și CSS este o metodă creativă de a crea un fundal interactiv care simulează mișcarea electronilor în jurul unui nucleu. Este ideală pentru proiecte web moderne, prezentări educaționale sau introduceri vizuale captivante.

Structura HTML

HTML-ul include un set de div-uri organizate logic:

• Un container principal cu clasa .ib-bg care definește spațiul de animație
• Un wrapper central .ib-wrapper pentru poziționare relativă
• 11 cercuri orbitale generate cu div-uri .ib-circle, fiecare animat independent

Fiecare cerc este plasat în același punct central, iar mișcarea se bazează pe rotații CSS pentru a simula orbitarea.

Logica CSS: Animații orbitale

• Fiecare cerc este poziționat în centrul wrapperului folosind translate(-50%, -50%)
• Rotația se realizează cu rotateX(), rotateY(), rotateZ(), și combinații între ele
• Se utilizează @keyframes pentru a defini traiectorii animate unice
• Duratele și întârzierile (animation-delay) creează o mișcare desincronizată și naturală

Animațiile folosesc transformări 3D și sunt complet compatibile cu majoritatea browserelor moderne.

Design și personalizare

Aspectul estetic este obținut prin:

• Culori pastel personalizate cu variabile CSS (:root)
• Blur subtil pe fundal cu backdrop-filter
• Opacitate scăzută pentru un efect cinematic
• Borderuri elegante de 4px pentru vizibilitate fină

Fiecare cerc are o traiectorie proprie, dar centrul de rotație este comun – creând un model atomic coerent.

Adaptabilitate și extindere

• Responsive prin dimensiuni dinamice (vw, vh)
• Suport pentru media queries pe dispozitive mobile
• Posibilitate de integrare cu nucleu luminos central sau efecte de interacțiune

Animația poate fi extinsă ușor în module CSS, componente reutilizabile sau fundaluri dinamice interactive.

Concluzie

Modelul atomic cu cercuri orbitale CSS demonstrează puterea vizuală a transformărilor 3D și a animațiilor fluide. Este un exemplu elegant de cum se poate crea un efect sofisticat doar cu HTML și CSS, fără librării externe sau JavaScript. Descarcă arhiva