CSS «подпрыгивая» линия внутри анимации экрана

Question

У меня классная идея, но я как бы зациклен на том, как этого добиться.

Это учебник по созданию прыгающего мяча анимации: Bouncing ball animation tutorial

Я хотел бы создать нечто подобное, но с червеобразной линией. Линия обращена к направлению, в котором она движется, и меняет направление, когда оно попадает в стену.

Я предполагаю, что есть две части этого, которые я не могу понять:

1. Как сделать линию лицо направления это происходит? Использование CSS.
2. Как получить червотоподобное изменение направления, когда линия достигает конца контейнера, например. экран?

Заранее благодарен!

Answer 1

Это будет довольно сложно сделать только с CSS. Мяч круглый, поэтому, когда он «бьет» и опускается, он просто отскакивает. Линия будет отскакивать и на полпути во время отскока линии будет идти в двух направлениях (часть, которая отскочила от стены, а часть, которая не имела). Вы просто не сможете сделать это просто с помощью CSS.

Чтобы линия попала в нужное вам направление, вы можете просто использовать правильное количество преобразований: поверните, чтобы он указывал в том же направлении, в котором он движется. Снова это сработает и будет хорошо выглядеть, пока линия не наткнется на стену.