如何使用CSS3动画制作类似原子的动画？

Question

我已经尝试了3-4天，但无法得到我如何制作这个动画，甚至不确定是否有可能做到这样一个只用CSS3？

​

​

我试过使用animation-direction:alternate;，但我无法在一个特定的角度获得这个流，能够以方形动画化它。但不是原子的动画方式，知道如何使用纯CSS3实现这一点吗？如果没有，jQuery中是否有任何解决方案？

Answer 1

在网上找到this。

它利用transform-style: preserve-3d特性，使电子在x，y和z轴上旋转，从而达到这种3D效果。

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

当然可以用CSS。在注意到@prashanth的帖子之前，我把一个非常基本的概念放在一起作为概念的证明。他找到的是更凉快的，但这是我的anyway...super赤裸的骨头，但有点摆弄，它看起来会很不错。

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

Answer 3

我想这个看起来也和你想要的一样，但是他们说这是Safari唯一的动画，就像Chrome 9一样

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

如果您关心的是兼容的浏览器，您可能会发现Jquery的解决方案。