乐趣区

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

θ : (index / amount) * 120;
δ : (index / amount) * PI;
x : radius * cos(δ) * cos(θ);
y : radius * cos(δ) * sin(θ);
z : radius * sin(δ);

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

@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°时,它们就会消失看不到。为了防止这种情况的发生,我们需要给每个 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 球体的效果就这样做好了!

4. 更炫的球体

在以上代码的基础上,我们发散思维,可以做出更加炫酷的球体效果:


获取以上所有球体动画的代码可以:

退出移动版