如何使用CSS3动画制作像动画一样的原子？

Question

我从3-4天开始尝试这个,但是我不知道如何制作这个动画,甚至不确定是否可以使用CSS3制作这样的动画？

我尝试使用animation-direction:alternate;但是我无法以特定的角度获得此流,能够以方形形状设置它的动画..但不是原子动画的方式,任何想法如何使用纯CSS3实现这一点？如果没有在jQuery中有任何解决方案？

Answer 1

发现这个在线.

它利用该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); 
    } 
}

小提琴

博客文章

Answer 2

CSS绝对可以.在注意到@prashanth的帖子之前,我把一个非常基本的作为概念证明.他找到的那个是waaay凉爽,但无论如何这里是我的...超级裸骨,但有点摆弄,它看起来很不错.

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