如何使一个原子像动画使用CSS3动画？ [英] How to make an atom like animation using CSS3 animations?

问题描述

我已经尝试这3-4天，但我不能得到如何做这个动画，甚至不知道是否可以使用CSS3这样的一个。

I've being trying this since 3-4 days but am not able to get how do I make this animation, not even sure whether is possible to make one like this using only CSS3?

我尝试使用 animation-direction：alternate; 但我不能在特定的角度获得这个流程，能够以方形形状动画 ..但不是原子动画的方式，任何想法如何这可以使用纯CSS3完成？如果没有在jQuery中有任何解决方案？

I tried using animation-direction:alternate; but I am not able to get this flow in a particular angle, able to animate it in a square shape.. but not the way atom animates, any idea how this can be accomplished using pure CSS3? if not is there any solution in jQuery?

推荐答案

找到

Found this online.

它使用 transform-style：preserve-3d 属性，并旋转x，y和z轴上的电子以实现此3D效果。

It utilizes the transform-style: preserve-3d property and rotates the electrons on the x, y and z axis to achieve this 3D effect.

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); 
    } 
}

小提琴

博客

这篇关于如何使一个原子像动画使用CSS3动画？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！