html - 屏幕动画内的CSS“弹跳”线

Question

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

这是一个关于创建弹跳球动画的教程： 弹跳球动画教程

我想创建类似但带有蠕虫线的东西。这条线朝向它前进的方向，并在撞到墙上时改变方向。

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

1. 如何使线朝向它的方向？使用 CSS。
2. 当线路到达容器的末端时，我如何获得类似蠕虫的方向变化，例如屏幕？

提前致谢！

Answer 1

仅使用 CSS 很难做到这一点。球是圆形的，所以当它“击中”并边缘时，它就会弹开。一条线会反弹，在反弹的中途，这条线会朝两个方向（从墙上反弹的部分和没有反弹的部分）。仅使用 CSS 将无法轻松做到这一点。

要使线条按照您想要的方向移动，您只需使用正确的变换量：旋转以使其指向与移动方向相同的方向。同样，这将起作用并且看起来不错，直到线路撞到墙上为止。