https://images.plurk.com/1aUgW1qeYJf2Ob3MB6yEXg.gif

這種 DVD logo 彈來彈去的效果,因為有四個邊緣要判斷,之前都以為只能用 JavaScript 做出來。做法是在判定碰到邊緣時,讓運動方向反過來。例如:撞到右側時,原本遞增的 left 就得換成遞減的、撞到上方時,原本遞減的 top 就要改遞增

但之前看機器狼只用 CSS 就做出來,便查了一下,結果查到了沒有想過的做法:

1. 做「由左至右」、「由上至下」的動畫各一個
2. 在一個元素上同時套用這兩個動畫,並使用 linear infinite alternate (線性、無限次數重複播放、正向與反向來回交替播放)

這兩個動畫不會互相影響,會各自來回播放,實際上跑起來的效果就是碰到邊緣彈回去