最近看到一个纯CSS实现的球体动画效果：研究了上面的效果，大致可以分为五步，下面一一介绍。1.使用Jade和SCSS生成圆创建圆的第一步是生成构成圆的所有粒子。使用Jade，我们不必一个一个地写出200个div。下面的代码创建了一个容器.mommy和200个div：.mommy-for(varx=0;x<200;x++)div添加一点CSS来确认已经生成了200个div：.mommy{border:1pxsolidblack;}div{宽度：4px;高度：4px；background:red;}如下图所示，我们生成了一个800px高的红色方块，由200个div组成。接下来，我们需要将这200个div放在不同的位置，形成一个圆圈，通过SCSS实现。在上面的CSS中，还需要增加一些设置，为所有的div设置绝对定位，将它们向左向上移动2px，使div的中心点与容器的0,0坐标点重合.然后，我们将容器设置为固定的宽度和高度。.mommy{border:1px纯黑;宽度：400px；高度：400px；位置：相对；}div{宽度：4px；高度：4px；背景：红色；位置：绝对；顶部：-2px；左：-2px；}通过SCSS，我们可以在for循环中为每个div设置不同的位置，这样我们就不用手动一一设置了。先创建一个变量，变量的值等于div的个数，这样后面要用到div的个数，直接引用这个变量就可以了。如果有一天你需要更改为400个div，你只需要更改CSS中变量的值即可。$amount:200;@for$ifrom1through$amount{//循环中的代码}现在我们可以更改循环中每个div的坐标，这需要一点数学知识。下面的函数是计算圆的坐标点的公式：x=cos((index/amount)*(PI*2))*radius+radius;y=sin((index/amount)*(PI*2))*radius+radius;用SCSS表示上面的公式是：$x:cos(($i/$amount)*360deg)*200px+200;$y:sin(($i/$amount)*360deg)*200px+200;然后我们把公式计算出来的点坐标应用到每个div上：div:nth-child(#{$i}){transform:translate3d($x,$y,0px);}这是第一步的结果，它不是很漂亮，但是，好吧，你从头开始创建了一个圆圈！2.把圆变成球现在我们有了一个用SCSS生成的圆，但是我们需要的是一个球。圆是二维图形，而球是三维图形。二维的几何图形只有两个轴：X轴和Y轴，而三维的则多了一个坐标轴：Z轴。这意味着我们还必须计算每个div在Z轴上的位置坐标。幸运的是，已经有成熟的公式可以帮助我们定位每个元素在球体上的位置。公式原理我就不详细介绍了（属于数学范畴），我们只需要用到：θ:(index/amount)*120;δ:(index/amount)*PI;x:radius*cos(δ)*cos(θ);y:半径*cos(δ)*sin(θ);z:半径*sin(δ);现在我们有了上面的函数，它完全满足了我们的需要，让我们将它插入到循环中。@for$i从1到$amount{$theta:($i/$amount)*120;$delta:($i/$amount)*pi();$x:200px*cos($delta)*cos($theta)+200;//+200使我们的球体在3D世界中居中$y:200px*cos($delta)*sin($theta)+200;//+200使我们的球体在3D世界中居中$z:200px*sin($delta);div:nth-child(#{$i}){转换：translate3d($x,$y,$z);}}下面是生成的球体效果，如大家所见，所有的div都有了新的位置，但是我们看到的好像还是平面效果，不是3D立体。在CSS中有一个名为perspective的属性，它允许我们为任何元素设置特定的透视值。在我们的例子中，我们想要在container.mommy上设置3D效果。并且你还需要设置一个transform-style:preserve-3d;这样所有的div都在三维坐标系中。现在我们可以看到所有的div都有不同的大小。div离“屏幕”越远，它就会越小，也就是说它们已经在长方体坐标系中了！3、旋转球体的所有div都准备好了，接下来我们看最终效果。让我们设置一个只有一个关键帧的动画效果：.mommy{[...]animation:rotation10slinearinfinite;}@keyframesrotation{to{transform:rotateY(360deg);}}你可能已经注意到我意识到当一些div不是面向屏幕而是与屏幕成90°时，它们会消失并且看不见。为了防止这种情况发生，我们需要给每个div一个相反方向的旋转，以便它们的正面始终面向屏幕。我们将对div应用反向旋转，但由于我们已经应用了变换，我们将使用伪元素，它将是红色的小方块。这样div本身只需要提供定位，设置一个transform-style属性就可以让div处于3D环境中。div{[...]转换样式：preserve-3d；&:之前{内容："";显示：块；宽度：4px；高度：4px；背景：红色；动画：旋转10s无限线性反转；}}多田！这就是CSS球体效果！4.更炫的球体在以上代码的基础上，发散思路制作更炫酷的球体效果：获取以上所有球体动画的代码可以是：
