如何使用CSS创建一个炫酷的球体动画效果

这篇文章给大家分享的是有关如何使用CSS创建一个炫酷的球体动画效果的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

　　1.使用Jade和SCSS生成一个圆圈

　　创建一个圆圈的第一步是生成所有组成圆圈的粒子。有了Jade，我们不用一个一个的写出200个div。

　　以下的代码创建了一个容器.mommy和200个div：

　　.mommy

　　- for (var x = 0; x < 200; x++)

　　div

　　添加一点CSS确认一下200个div已经生成：

　　.mommy{

　　border:1px solid black;

　　}

　　div{

　　width: 4px;

　　height: 4px;

　　background:red;

　　}

　　正如下面你所看到的，我们生成了一个800px高的红色方块，它是由200个div组成的。

　　接下来，我们要将这200个div分别定位在不同的位置组成一个圆圈，并通过SCSS来实现。

　　在上面的CSS中还需要再添加一些设置，给所有的div设置绝对定位，并将它们向左和向上移动2px的距离，这样div的中心点与容器的0，0坐标点就重合了。然后，我们设置容器为固定的宽高大小。

　　.mommy{

　　border:1px solid black;

　　width: 400px;

　　height: 400px;

　　position: relative;

　　}

　　div{

　　width: 4px;

　　height: 4px;

　　background:red;

　　position: absolute;

　　top: -2px;

　　left: -2px;

　　}

　　通过SCSS，我们可以在for循环中为每一个div设置不同的位置，这样就不必手动的一个一个去设置。首先创建一个变量，它的值等于div的个数，这样在后面如果要用到div的数量值时，直接引用这个变量就可以了。如果有一天需要改变成400个div，只需要在CSS中改变变量的值就可以了。

　　$amount : 200;

　　@for $i from 1 through $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轴上的位置坐标。幸运的是，已经有成熟的公式帮助我们来定位球体上每个元素的位置，我不会详细的介绍公式的原理（属于数学范畴），我们只需要使用就可以了：

　　&theta; : (index / amount) * 120;

　　&delta; : (index / amount) * PI;

　　x : radius * cos(&delta;) * cos(&theta;);

　　y : radius * cos(&delta;) * sin(&theta;);

　　z : radius * sin(&delta;);

　　现在我们有了以上的函数，它可以完全满足我们的需求，我们把它插入到循环中。

　　@for $i from 1 through $amount {

　　$theta : ($i / $amount) * 120;

　　$delta : ($i / $amount) * pi();

　　$x : 200px * cos($delta) * cos($theta) + 200; //+200 to center our sphere in our 3D world

　　$y : 200px * cos($delta) * sin($theta) + 200; //+200 to center our sphere in our 3D world

　　$z : 200px * sin($delta);

　　div:nth-child(#{$i}){

　　transform: translate3d($x, $y,$z);

　　}

　　}

　　下面就是生成的球体效果，正如你所看到的，所有的div都有重新有了新的位置，但是我们看到的好像仍然是平面效果，不是3D立体的。

　　在CSS中有一个叫perspective的属性，它允许我们为任何元素设置一个特定的透视值。在我们的例子中，我们希望在容器.mommy设置3D效果。并且还需要设置一个transform-style: preserve-3d；这样所有的div就处于立体坐标系中了。

　　现在我们可以看到所有div的大小都变得不一样了。div距离“屏幕”的距离越远，它就会越小，这意味着它们已经处于立体坐标系中了！

　　3.旋转球体

　　所有的div已经就绪了，接下来我们就要看到最后的结果了。我们设置一个仅有一个关键帧的动画效果：

　　.mommy{

　　[...]

　　animation: rotation 10s linear infinite;

　　}

　　@keyframes rotation{

　　to{

　　transform:rotateY(360deg);

　　}

　　}

　　你可能已经注意到，有些div不是正面屏幕而是与屏幕成90&deg;时，它们就会消失看不到。为了防止这种情况的发生，我们需要给每个div一个反方向的旋转，让它们的正面始终面对屏幕显示。

　　我们要在div上应用一个反方向的旋转，但是由于已经应用了一个转换，我们将利用伪元素，它将成为红色的小方块。这样，div本身只需要提供定位作用就可以了，并且设置一个transform-style属性，让div处于3D环境中。

　　div{

　　[...]

　　transform-style: preserve-3d;

　　&:before{

　　content:"";

　　display: block;

　　width: 4px;

　　height:4px;

　　background:red;

　　animation: rotation 10s infinite linear reverse;

　　}

　　}

感谢各位的阅读！关于“如何使用CSS创建一个炫酷的球体动画效果”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！