Come creare un'animazione simile ad un atomo usando le animazioni CSS3?

Sto provando questo da 3-4 giorni ma non riesco a ottenere come faccio questa animazione, non sono nemmeno sicuro se sia possibile crearne uno usando solo CSS3?Come creare un'animazione simile ad un atomo usando le animazioni CSS3?

Atom

Ho provato ad utilizzare animation-direction:alternate; ma io non sono in grado di ottenere questo flusso in un angolo particolare, in grado di animare in una forma quadrata .. ma non il modo atomo di anima, qualsiasi idea di come questo può essere realizzato usando puro CSS3? se no c'è qualche soluzione in jQuery?

fonte

2012-10-06 Mr. Alien

Questo dovrebbe essere chiuso per gli stessi motivi in cui l'OP si avvicinava per chiudere cose come http://stackoverflow.com/questions/16500907/collapsible-panel-in-html-css (personalmente penso che entrambi siano validi, ma il OP ha chiaramente i doppi standard) – gcb

@ gcb Non mi dispiace chiuderlo, se confronti le date, avevo fatto questa domanda quando ero nuovo al sito e non ero a conoscenza delle regole :) –

@gcb Se vedi [this] (http://stackoverflow.com/q/13132864/1542290), troverai il mio molto meglio :) –

Trovati online.

Utilizza la proprietà transform-style: preserve-3d e ruota gli elettroni sugli assi x, yez per ottenere questo effetto 3D.

struttura HTML

<div id="main"> 
    <div id="atom"> 
     <div class="orbit"> 
      <div class="path"> 
       <div class="electron"></div> 
      </div> 
     </div> 
     <div class="orbit"> 
      <div class="path"> 
       <div class="electron"></div> 
      </div> 
     </div> 
     <div class="orbit"> 
      <div class="path"> 
       <div class="electron"></div> 
      </div> 
     </div> 
     <div class="orbit"> 
      <div class="path"> 
       <div class="electron"></div> 
      </div> 
     </div> 
     <div id="nucleus"></div> 
    </div> 
</div>

CSS

.orbit { 
    -webkit-transform-style: preserve-3d; 
    -webkit-transform: rotateX(80deg) rotateY(20deg); 
} 

#atom .orbit:nth-child(2) { 
    -webkit-transform: rotateX(80deg) rotateY(70deg) 
} 
#atom .orbit:nth-child(3) { 
    -webkit-transform: rotateX(80deg) rotateY(-20deg) 
} 
#atom .orbit:nth-child(4) { 
    -webkit-transform: rotateX(80deg) rotateY(-50deg) 
} 

.path { 
    -webkit-transform-style: preserve-3d; 
    -webkit-animation-name: pathRotate; 
    -webkit-animation-duration: 2s; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-timing-function: linear; 
} 

.electron { 
    -webkit-animation-name: electronFix; 
    -webkit-animation-duration: 2s; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-timing-function: linear; 
} 

@-webkit-keyframes pathRotate { 
    from { 
     -webkit-transform: rotateZ(0deg); 
    } to { 
     -webkit-transform: rotateZ(360deg); 
    } 
} 

@-webkit-keyframes electronFix { 
    from { 
     -webkit-transform: rotateX(90deg) rotateY(0deg); 
    } to { 
     -webkit-transform: rotateX(90deg) rotateY(-360deg); 
    } 
}

Fiddle

Blog Post

fonte

2012-10-06 06:43:46 prashanth

è davvero fantastico, ma non capisco una cosa, se posso usare direttamente l'immagine atom gif, perché dovrei andare per css, dove devo scrivere così tanto codice .. :( –

@RahulR. è solo divertente sapere cosa può fare solo css, ovviamente puoi usare gif, che è anche, meglio, senza problemi di cross-browser niente ma, anche io volevo una soluzione css;) –

sicuramente possibile con CSS. Ho messo insieme un concetto di base estremamente semplice prima di notare @ post di prashanth. Quello che ha trovato è mooolto più fresco, ma qui il mio è comunque ... super ossa nude ma un po 'giocherellona e sarebbe piuttosto buono.

http://jsfiddle.net/BZFJ8/2/

fonte

2012-10-06 07:09:07

concorda sul fatto che la tua è silenziosa, ma non ho alcuna idea per far fluttuare quella palla da dietro in avanti, ma un buon esempio +1 –

Manipolando il valore Z nella proprietà translate3d nell'animazione del fotogramma chiave sarebbe consente di modificare la posizione relativa degli elettroni da fronte a retro e l'aggiunta di un valore di scala() ai fotogrammi chiave consente di modificare le loro dimensioni in quanto sembrano spostarsi avanti e indietro. –

Penso che questo sembra anche quello che hai chiesto, ma mi hanno detto che è per Safari solo animazione come di Chrome 9

http://bgre.at/demo/CSS3-atom/index.html

Si potrebbe trovare una soluzione con Jquery se ti interessa il browser compatibilmente.

fonte

2012-10-06 12:29:47

Come creare un'animazione simile ad un atomo usando le animazioni CSS3?

risposta

Problemi correlati