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

问题描述

我正在想这一点，因为3-4天，但我无法得到我怎么做这个动画，甚至不知道是否可能只使用CSS3使一个这样？

我试着用动画方向：备用; ，但我没能获得在一个特定的角度来看这一流程，能够在的正方形来制作动画 ..但不是办法原子动画，任何想法，这可怎么使用纯CSS3来完成？如果不是有jQuery的任何解决方案？

解决方案

的联机。

它利用变换式：preserve-3D 财产和在x旋转的电子，Y，Z轴来实现这个3D效果

HTML结构

 ＆LT; D​​IV ID =主＆GT;
    ＆LT; D​​IV ID =原子＆GT;
        ＆LT; D​​IV CLASS =轨道＆GT;
            ＆LT; D​​IV CLASS =路径＆GT;
                ＆LT; D​​IV CLASS =电子＆GT;＆LT; / DIV＆GT;
            ＆LT; / DIV＆GT;
        ＆LT; / DIV＆GT;
        ＆LT; D​​IV CLASS =轨道＆GT;
            ＆LT; D​​IV CLASS =路径＆GT;
                ＆LT; D​​IV CLASS =电子＆GT;＆LT; / DIV＆GT;
            ＆LT; / DIV＆GT;
        ＆LT; / DIV＆GT;
        ＆LT; D​​IV CLASS =轨道＆GT;
            ＆LT; D​​IV CLASS =路径＆GT;
                ＆LT; D​​IV CLASS =电子＆GT;＆LT; / DIV＆GT;
            ＆LT; / DIV＆GT;
        ＆LT; / DIV＆GT;
        ＆LT; D​​IV CLASS =轨道＆GT;
            ＆LT; D​​IV CLASS =路径＆GT;
                ＆LT; D​​IV CLASS =电子＆GT;＆LT; / DIV＆GT;
            ＆LT; / DIV＆GT;
        ＆LT; / DIV＆GT;
        ＆LT; D​​IV ID =核＆GT;＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

CSS

  .orbit {
    -webkit-变换式：preserve-3D;
    -webkit-变换：rotateX（80deg）rotateY（20deg）;
}#atom .orbit：第n个孩子（2）{
   -webkit-变换：rotateX（80deg）rotateY（70deg）
}
#atom .orbit：第n个孩子（3）{
   -webkit-变换：rotateX（80deg）rotateY（-20deg）
}
#atom .orbit：第n个孩子（4）{
   -webkit-变换：rotateX（80deg）rotateY（-50deg）
}。路径{
    -webkit-变换式：preserve-3D;
    -webkit-动画名称：pathRotate;
    -webkit-动画持续时间：2秒;
    -webkit-动画迭代计数：无限;
    -webkit-动画定时功能：线性的;
}.electron {
    -webkit-动画名称：electronFix;
    -webkit-动画持续时间：2秒;
    -webkit-动画迭代计数：无限;
    -webkit-动画定时功能：线性的;
}@ -webkit-关键帧pathRotate {
    从{
       -webkit-变换：rotateZ（0deg）;
    } 至 {
       -webkit-变换：rotateZ（360deg）;
    }
}@ -webkit-关键帧electronFix {
    从{
       -webkit-变换：rotateX（90度）rotateY（0deg）;
    } 至 {
       -webkit-变换：rotateX（90度）rotateY（-360deg）;
    }
}
 

小提琴

博客文章

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?

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.

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 Structure

<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

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