我最近看到了一个纯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