Làm cách nào để tạo một nguyên tử như hoạt hình bằng cách sử dụng hoạt ảnh CSS3?

Question

Tôi đã cố gắng điều này từ 3-4 ngày nhưng tôi không thể làm cách nào để tạo hoạt ảnh này, thậm chí không chắc chắn liệu có thể tạo một hình ảnh như thế này chỉ bằng CSS3?

Tôi đã cố gắng sử dụng animation-direction:alternate; nhưng tôi không thể nhận được dòng này ở một góc đặc biệt, có khả năng animate nó trong một hình vuông .. nhưng không phải là nguyên tử cách sinh động, bất kỳ ý tưởng như thế nào đây có thể được thực hiện bằng cách sử dụng CSS3 tinh khiết? nếu không có bất kỳ giải pháp trong jQuery?

Answer 1

Tìm thấy this trực tuyến.

Nó sử dụng thuộc tính transform-style: preserve-3d và xoay các electron trên trục x, y và z để đạt được hiệu ứng 3D này.

Cấu trúc 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

Answer 2

Chắc chắn có thể với CSS. Tôi đặt một cách cực kỳ cơ bản với nhau như là một bằng chứng về khái niệm trước khi nhận thấy bài viết của @ prashanth. Người mà anh ta tìm thấy là waaay lạnh hơn, nhưng dù sao thì đây là của tôi ... siêu trần xương nhưng hơi khó hiểu và trông nó khá là đẹp.

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

Answer 3

Tôi nghĩ cái này cũng có vẻ giống như những gì bạn yêu cầu nhưng họ nói rằng nó là dành cho Safari chỉ hoạt hình như của Chrome 9

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

Bạn có thể tìm ra giải pháp với Jquery nếu bạn quan tâm đến trình duyệt tương thích.