纯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 {width:4px;height:4px;background:red;}专门构建的学习Qqun：731771211，分享学习技巧和需要注意的小细节，不断更新最新的教程和学习方法（从零基础到后端项目实用教程、学习工具、全栈开发学习路线和规划）如下图所示，我们生成了一个高度为800px的白色小方块，由200个div组成。 然后，我们需要将这200个div定位在不同的位置，形成一个圆圈，并通过SCSS来实现。 在前面的CSS中，需要添加一些设置，为所有的div设置绝对定位，并以2px的距离向左、下连接，使div的中心点与div的0,0坐标点重合。容器。
之后，我们将容器设置为固定的宽度和高度。 .mommy{边框:1pxsolidblack;宽度:400px;高度:400px;位置:相对;}div{宽度:4px;高度:4px;背景:红色;位置:绝对;顶部:-2px;左侧:-2px;}pass在SCSS中，我们可以在for循环中为每个div设置不同的位置css3球体，这样就不用自动一一设置了。 首先创建一个变量，其值等于div的数量，所以如果想使用前面的div的数量，可以直接引用这个变量。 如果三天需要改成400个div，只需要更改CSS中变量的值即可。 金额：200 美元； @for $ifrom1through $amount{//循环中的代码} 现在我们可以在循环中改变每个div的坐标，这需要一点物理计算。 下面的函数是圆的坐标点的估计公式： x=cos((index/amount)*(PI*2))*radius+radius;y=sin((index/amount)*(PI*2) )) *半径+半径; 用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 坐标。 幸运的是css3球体，已经有一个成熟的公式可以帮助我们确定长传上各个要素的位置。 公式原理我就不详细介绍了（属于物理范畴），我们只需要用到：θ:(指数/量)*120;δ:(指数/量)*PI;x:半径* cos(δ)*cos(θ);y:半径*cos(δ)*sin(θ);z:半径*sin(δ); 现在我们有了上面的函数，完全可以满足我们的需求，我们将其插入到循环中。 @for $ifrom1through $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}){transform:translate3d($x,$y,$z);}}专门构建的一个学习Qqun：731771211，分享学习技巧和需要注意的小细节，不断更新最新教程和学习方法（来自从零基础开始到后端项目实战教程、学习工具、全栈开发学习路线和规划）下面是生成球的效果，可以看到，所有的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{[...]transform-style:preserve-3d;&:before{content:"";display:block;width:4px;height:4px;background:red;animation:rotation10sinfinite Lineararreverse;}} 专为学习而设计Qqun：731771211，分享学习技巧和需要注意的小细节，不断更新最新的教程和学习方法（从零基础到后端项目实战教程、学习工具、全栈开发学习路线和规划）田田！ CSS球的疗效就是这样！ 4、更炫的球在上面代码的基础上，我们发散思维，制作更炫的球效果：如果你想学习以上球动画的全部代码，可以加入我们的学习群。
本文由javascript技术分享创作并收集
发表评论