Jak zrobić animację atomu za pomocą animacji CSS3?

Próbuję tego od 3-4 dni, ale nie jestem w stanie uzyskać tego, jak zrobić animację, nie mając nawet pewności, czy można to zrobić używając tylko CSS3?Jak zrobić animację atomu za pomocą animacji CSS3?

Atom

Próbowałem za pomocą animation-direction:alternate; ale nie jestem w stanie uzyskać ten przepływ w określonym kątem, w stanie ożywić go w kwadratowym kształcie .. ale nie sposób atom animuje, jakiś pomysł jak to można osiągnąć za pomocą czystego CSS3? jeśli nie jest jakieś rozwiązanie w jQuery?

Źródło

2012-10-06 Mr. Alien

To powinno być zamknięte na tych samych podstawach, co OP przyszedł do zamykania takich rzeczy jak http://stackoverflow.com/questions/16500907/collapsible-panel-in-html-css (osobiście uważam, że oba są ważne, ale OP wyraźnie mają podwójne standardy) – gcb

@ gcb Nie mam nic przeciwko temu, jeśli porównasz daty, zadałem to pytanie, gdy byłem nowy na stronie i nie znałem zasad :) –

@ gcb Jeśli widzisz [this] (http://stackoverflow.com/q/13132864/1542290), znajdziesz mój o wiele lepiej :) –

Znaleziono this online.

Wykorzystuje właściwość transform-style: preserve-3d i obraca elektrony na osi X, Y i Z, aby uzyskać ten efekt 3D.

Struktura 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

Źródło

2012-10-06 06:43:46 prashanth

to naprawdę niesamowite, ale nie rozumiem jednej rzeczy, jeśli mogę bezpośrednio użyć obrazu atomu gif, dlaczego miałbym pójść na css, gdzie muszę napisać tyle kodu ... :( –

@RahulR. Po prostu fajnie jest wiedzieć, co potrafi css sam, oczywiście możesz użyć gif, który jest jeszcze lepszy, nie ma problemów z przeglądarką nic, ale też chciałem rozwiązanie css;) –

Zdecydowanie możliwe CSS. Przed zapoznaniem się z postem @ prashantha, przedstawiłem niezwykle podstawowe elementy jako dowód koncepcji. Ten, który znalazł, jest chłodniejszy, ale i tak jest mój ... super gołe kości, ale trochę skrzypiące i wyglądałoby całkiem nieźle.

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

Źródło

2012-10-06 07:09:07

zgadzam się, że twój jest spokojny i inteligentny, ale nie mam pomysłu na unoszenie piłki od tyłu do przodu, ale ładny przykład +1 –

Manipulowanie wartością Z w właściwości translate3d w animacji klatki kluczowej możesz zmienić względną pozycję elektronów w przód i tył, a dodanie wartości scale() do klatek kluczowych pozwoli zmienić rozmiar, tak jak się wydaje, aby przesuwać się od przodu do tyłu. –

myślę, że ten wygląda również jak co prosiłeś, ale powiedzieli, że to jest tylko dla Safari animacji jak Chrome 9

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

Można znaleźć rozwiązanie z jQuery, jeśli zależy ci na kompatybilności przeglądarki.

Źródło

2012-10-06 12:29:47

Jak zrobić animację atomu za pomocą animacji CSS3?

Odpowiedz

Powiązane problemy