前端实现炫酷动效_web前端入门到实战：使用CSS创建一个炫酷的球体动画效果

最新推荐文章于 2024-07-08 19:08:25 发布

weixin_39525243

最新推荐文章于 2024-07-08 19:08:25 发布

阅读量570

点赞数

文章标签：前端实现炫酷动效

本文链接：https://blog.csdn.net/weixin_39525243/article/details/111498779

版权

这篇博客介绍了如何使用CSS和SCSS创建一个3D球体动画。通过生成和定位多个div，结合数学计算设置坐标，以及应用透视和旋转效果，最终实现了一个动态的球体动画。文章详细讲解了每一步骤，并提供了进一步优化和创新的可能性。

摘要由CSDN通过智能技术生成

一个纯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);