分享更有价值
被信任是一种快乐

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

文章页正文上

这篇文章给大家分享的是有关如何使用CSS创建一个炫酷的球体动画效果的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
  1.使用Jade和SCSS生成一个圆圈
  创建一个圆圈的第一步是生成所有组成圆圈的粒子。有了Jade,我们不用一个一个的写出200个div。
  以下的代码创建了一个容器.mommy和200个div:
  .mommy
  - for (var x = 0; 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创建一个炫酷的球体动画效果”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

相关推荐: vue底层是不是用node写的

这篇文章主要讲解了“vue底层是不是用node写的”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue底层是不是用node写的”吧! vue底层不是用node写的,而是基于JavaScript语言开发的;vue…

文章页内容下
赞(0) 打赏
版权声明:本站采用知识共享、学习交流,不允许用于商业用途;文章由发布者自行承担一切责任,与本站无关。
文章页正文下
文章页评论上

云服务器、web空间可免费试用

宝塔面板主机、支持php,mysql等,SSL部署;安全高速企业专供99.999%稳定,另有高防主机、不限制内容等类型,具体可咨询QQ:360163164,Tel同微信:18905205712

主机选购导航云服务器试用

登录

找回密码

注册