屏幕动画中的CSS“弹跳”线

时间:2013-04-11 08:59:01

标签: html css3 animation

我有一个很酷的想法,但我有点坚持如何实现这一目标。

这是一个关于创建弹跳球动画的教程: Bouncing ball animation tutorial

我想创建类似但类似蠕虫的东西。该线朝向它的方向,并在撞到墙壁时改变方向。

我想这有两个部分我无法弄清楚:

  1. 如何使线朝向它的方向?使用CSS。
  2. 当线到达容器的末端时,如何获得类似蠕虫的方向变化,例如屏幕?
  3. 提前致谢!

1 个答案:

答案 0 :(得分:2)

这对CSS来说很难做到。球是圆的,因此当它“击中”并且边缘时它会反弹。在弹跳过程中,一条直线会反弹并且在一定程度上会向两个方向反弹(从墙壁弹回的部分和没有反弹的部分)。只用CSS就不能轻易做到这一点。

要使线条朝向您想要的方向,您可以使用正确的变换量:旋转使其指向与其移动方向相同的方向。再次,这将工作,并将看起来很好,直到线进入墙。