Question

我自3-4天以来一直在尝试这个但是我怎么不知道如何制作这个动画，甚至不能确定是否可以使用CSS3制作这样的动画？

Atom

我尝试使用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的帖子之前，我把一个非常基本的作为概念证明。他找到的那个是更酷的，但无论如何这里是我的...超级裸骨，但有点摆弄，它看起来很不错。

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

Answer 3

我认为这个看起来也像你要求的那样，但他们说这是仅适用于Safari 9的Safari动画

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

如果您关心兼容浏览器，可以找到Jquery的解决方案。

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

3 个答案: