這種 DVD logo 彈來彈去的效果,因為有四個邊緣要判斷,之前都以為只能用 JavaScript 做出來。做法是在判定碰到邊緣時,讓運動方向反過來。例如:撞到右側時,原本遞增的
left
就得換成遞減的、撞到上方時,原本遞減的
top
就要改遞增
但之前看機器狼只用 CSS 就做出來,便查了一下,結果查到了沒有想過的做法:
1. 做「由左至右」、「由上至下」的動畫各一個
2. 在一個元素上同時套用這兩個動畫,並使用
linear infinite alternate
(線性、無限次數重複播放、正向與反向來回交替播放)
這兩個動畫不會互相影響,會各自來回播放,實際上跑起來的效果就是碰到邊緣彈回去
![](https://emos.plurk.com/65951918c91c6c72f24ab949788fb76b_w48_h48.gif)