Com crear una animació de bola en moviment en CSS explicat pas a pas i traduït al català
Crear una animació de bola que es mogui és senzill amb CSS modern. La idea bàsica és dibuixar un element circular amb border-radius 50 per cent, posicionar-lo i animar el seu transform i top/left o translate per generar moviment suau. També es pot jugar amb ombres, degradats i filtres per donar sensació de profunditat.
Biblioteca i classes disponibles a butterfly css
A la meva biblioteca butterfly css pots utilitzar diverses animacions ja preparades per a boles en moviment, per exemple ball-move-1 fins a ball-move-5. Un exemple ràpid d'ús és aquest marcatge:
<div ball-move-1 h-500 w-full gradient-1></div>
Exemple mínim de CSS per a una bola en moviment
.ball{width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,#ff7a18,#af002d);position:absolute;left:0;top:50%;transform:translateY(-50%);} @keyframes ballMove1{0%{transform:translate(0, -50%);}50%{transform:translate(80%, -50%);}100%{transform:translate(0, -50%);} } .ball.animate{animation:ballMove1 4s ease-in-out infinite;}
Variants i consells
Pots crear diverses variants canviant la trajectòria als keyframes, la durada, la funció de temps i aplicant transform: translate3d per activar l'acceleració per GPU. Per a moviments més complexos combina diverses animacions, per exemple una animació per a la posició horitzontal i una altra per al rebot vertical amb timing diferent.
Exemple de keyframes per a rebot i desplaçament diagonal
@keyframes ballDiagonal{0%{transform:translate(0,0) scale(1);}25%{transform:translate(30%, -40%) scale(0.95);}50%{transform:translate(60%,0) scale(1.05);}75%{transform:translate(30%,40%) scale(0.95);}100%{transform:translate(0,0) scale(1);} }
Ús pràctic i accessibilitat
Assegura contrast suficient amb el fons i afegeix prefer-reduced-motion per respectar usuaris amb mobilitat reduïda. Exemple: @media (prefers-reduced-motion: reduce){.ball.animate{animation:none;}}
Recursos i enllaços
cdn https://cdn.jsdelivr.net/gh/AMR2010M/butterfly-css@main/attributes.css
docs https://butterfly-css.netlify.app/docs#ball-animations
Sobre Q2BSTUDIO i serveis relacionats
Q2BSTUDIO és una empresa de desenvolupament de programari i aplicacions a mida especialitzada en solucions a mida per a empreses. Oferim serveis de programari a mida, aplicacions a mida, integració d'intel·ligència artificial i solucions de ciberseguretat. El nostre equip desenvolupa agents IA, solucions d'IA per a empreses i projectes d'intel·ligència artificial a la mida de cada client.
A més, brindem serveis cloud aws i azure, serveis intel·ligència de negoci i anàlisi amb eines com power bi per obtenir dashboards i reporting robust. Si necessita programari a mida o desenvolupar una app amb IA, agents IA o reforçar la ciberseguretat dels seus sistemes, Q2BSTUDIO pot ajudar amb consultoria, disseny, desenvolupament i implementació.
Posicionament i paraules clau
A Q2BSTUDIO treballem amb termes clau com aplicacions a mida, programari a mida, intel·ligència artificial, ciberseguretat, serveis cloud aws i azure, serveis intel·ligència de negoci, IA per a empreses, agents IA i power bi per millorar la seva presència en línia i atraure clients interessats en transformació digital.
Contacte i següent pas
Si vols integrar animacions com boles en moviment a les teves interfícies o necessites desenvolupar una aplicació a mida amb components visuals i comportament avançat impulsat per intel·ligència artificial, contacta amb Q2BSTUDIO per a una proposta personalitzada.
