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

Posted 2023-03-05

技术标签:

【中文标题】如何使用 CSS3 动画制作类似原子的动画？【英文标题】：How to make an atom like animation using CSS3 animations? 【发布时间】：2012-09-27 06:19:15 【问题描述】：

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

我尝试使用animation-direction:alternate;，但我无法以特定角度获得这种流动，能够以方形对其进行动画处理......但不是原子动画的方式，不知道如何这可以使用纯 CSS3 来完成吗？如果没有，jQuery中有什么解决方案吗？

【问题讨论】：

这应该以同样的理由关闭，因为 OP 想关闭像 ***.com/questions/16500907/… 这样的东西（我个人认为两者都是有效的，但 OP 显然有双重标准） @gcb 我不介意关闭它，如果您比较日期，当我刚接触该网站并且不了解规则时，我曾问过这个问题 :) @gcb 如果你看到this，你会发现我的好多了:) 【参考方案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

【讨论】：

它真的很棒，但我不明白一件事，如果我可以直接使用原子gif图像，我为什么要选择css，我必须写这么多代码..:(跨度> @RahulR。知道 css 单独可以做什么很有趣，显然你可以使用 gif，甚至更好，没有跨浏览器问题，但我也想要一个 css 解决方案;)【参考方案2】：

使用 CSS 绝对可以。在注意到@prashanth 的帖子之前，我将一个非常基本的东西放在一起作为概念证明。他发现的那个更酷，但无论如何这是我的……超级简单，但有点摆弄，看起来不错。

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

【讨论】：

同意你的很聪明，但我没有任何想法让球从后到前浮动，但是一个很好的例子 +1 在关键帧动画的 translate3d 属性中操作 Z 值可以让您从前到后更改电子的相对位置，向关键帧添加 scale() 值可以让您更改它们大小，因为它们似乎从前向后移动。【参考方案3】：

我认为这个看起来也像你所要求的，但他们说这是 Chrome 9 的 Safari 唯一动画

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

如果您关心浏览器的兼容性，您可能会找到使用 Jquery 的解决方案。

【讨论】：