Wie erstellt man eine atomartige Animation mit CSS3-Animationen?

Ich habe das seit 3-4 Tagen versucht, aber bin nicht in der Lage zu bekommen, wie mache ich diese Animation, nicht einmal sicher, ob es möglich ist, eine solche nur mit CSS3 zu machen?Wie erstellt man eine atomartige Animation mit CSS3-Animationen?

Atom

ich versuchte, mit animation-direction:alternate; aber ich bin nicht in der Lage diese Strömung in einem bestimmten Winkel zu bekommen, kann es in einer quadratischen Form animieren .. aber nicht die Art und Weise Atome beseelt, eine Idee, wie dies kann mit reinem CSS3 erreicht werden? Wenn nicht, gibt es eine Lösung in jQuery?

Quelle

2012-10-06 Mr. Alien

Dies sollte aus den gleichen Gründen geschlossen werden, die OP kam, um Dinge wie http://stackoverflow.com/questions/16500907/collapsible-panel-in-html-css schließen (ich persönlich denke, beide sind gültig, aber die OP haben eindeutig doppelte Standards) – gcb

@ gcb Ich habe nichts dagegen, es zu schließen, wenn Sie die Daten vergleichen, hatte ich diese Frage gestellt, wenn ich neu auf der Website war und die Regeln nicht kannte :) –

@ gcb Wenn Sie sehen [this] (http://stackoverflow.com/q/13132864/1542290), wirst du mir viel besser finden :) –

Gefunden this online.

Es nutzt die transform-style: preserve-3d Eigenschaft und dreht die Elektronen auf der X, Y und Z-Achse, um diesen 3D-Effekt zu erzielen.

HTML Struktur

<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

Quelle

2012-10-06 06:43:46 prashanth

es ist wirklich toll, aber ich verstehe nicht eine Sache, wenn ich das Atom gif Bild direkt verwenden kann, warum würde ich für CSS gehen, wo ich so viel Code schreiben muss .. :( –

@RahulR. es ist einfach Spaß zu wissen, was css allein tun kann, offensichtlich können Sie gif verwenden, die sogar, besser ist, keine Cross-Browser-Probleme nichts als, als auch ich wollte eine css-Lösung;) –

Definitiv möglich mit CSS. Ich habe ein extrem einfaches Konzept als Beweis für das Konzept erstellt, bevor ich @prashanths Beitrag bemerkt habe. Der, den er gefunden hat, ist waaay cooler, aber hier ist meiner sowieso ... super bare-bones aber ein wenig fummeln und es würde ziemlich gut aussehen.

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

Quelle

2012-10-06 07:09:07

stimme zu, dass deine ist leise schlau, aber ich habe keine Idee, diesen Ball von hinten nach vorne zu schweben, aber ein schönes Beispiel +1 –

Manipulieren der Z-Wert in der translate3d-Eigenschaft in der Keyframe-Animation würde Sie können die relative Position der Elektronen von vorne nach hinten ändern, und wenn Sie den Keyframes einen Wert für scale() hinzufügen, können Sie ihre Größe ändern, wenn sie sich von vorne nach hinten bewegen. –

Ich denke, das sieht auch wie, was Sie gefragt, aber sie sagte, dass es für Safari nur Animation ist wie von Chrome 9

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

Sie könnten eine Lösung mit JQuery finden, wenn Sie interessieren sich für Browser kompatibel.

Quelle

2012-10-06 12:29:47

Wie erstellt man eine atomartige Animation mit CSS3-Animationen?

Antwort

Verwandte Themen