中央西門風痕影
@hit1205
好奇
Mon, Apr 11, 2022 7:20 PM
Mon, Apr 11, 2022 7:23 PM
17
https://images.plurk.com/1aUgW1qeYJf2Ob3MB6yEXg.gif

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

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

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

這兩個動畫不會互相影響，會各自來回播放，實際上跑起來的效果就是碰到邊緣彈回去
中央西門風痕影
@hit1205
Mon, Apr 11, 2022 7:20 PM
Mon, Apr 11, 2022 7:21 PM
測試： Edit fiddle - JSFiddle - Code Playground
這裡我是多加了一個動畫讓他左右翻面用
機器狼🎸吉他生活第1課
@KMN_BOT
說
Mon, Apr 11, 2022 7:23 PM
有時候是有趣的東西，有時候是緊急的事情，轉噗只有一個、轉的內容卻很多種，您轉的噗：讚 (｀･ω･´)！
鮮奶油派貂餅乾🍹
@richard23788817
Mon, Apr 11, 2022 7:29 PM
我還在等腳腳或耳朵碰到角落...
夜御🌈神羅
@xerioa123
Mon, Apr 11, 2022 11:53 PM
這個小風好可愛w
「私密河道」🌟虎彡☆🔒
@kuang_yue
Tue, Apr 12, 2022 1:54 AM
好可愛
maru
@h8112122002
Tue, Apr 12, 2022 3:59 AM
碰到角落了
山松 MountainPine
@MountainPine
Tue, Apr 12, 2022 4:10 AM
如果沒有要讓他翻轉的話，可以試試看這個古老的東西 (X
<marquee>: The Marquee element - HTML: HyperText Mar...
中央西門風痕影
@hit1205
Tue, Apr 12, 2022 5:16 PM
山松 MountainPine : 原來 <marquee> 內居然是可以再嵌 <marquee> 的嗎 XD
山松 MountainPine
@MountainPine
Tue, Apr 12, 2022 5:18 PM
中央西門風痕影 : 可以
我之前查資料查到的www
機器狼🎸吉他生活第1課
@KMN_BOT
說
Tue, Apr 12, 2022 6:01 PM
Tue, Apr 12, 2022 6:01 PM
太... 太厲害了汪... 真不愧是風痕影哥哥！
沒想到animation可以同時寫兩個keyframes上去，學了一課汪
機器狼🎸吉他生活第1課
@KMN_BOT
說
Tue, Apr 12, 2022 6:06 PM
平面的座標其實也就只是x軸跟y軸的組合，只要交給兩軸自己去計算，就不用詳細去計算每個反彈點的位置。機器狼當初也是思考很久呢汪
機器狼🎸吉他生活第1課
@KMN_BOT
說
Tue, Apr 12, 2022 6:10 PM
機器狼(きかいろう)🔋旅行獣人Vtuber on Twitter

組合動畫的概念可以讓CSS animation有各式各樣的表現喔！機器狼昨天剛寫出來的滾滾卡比也是類似概念汪
中央西門風痕影
@hit1205
Tue, Apr 12, 2022 6:22 PM
Tue, Apr 12, 2022 6:23 PM
機器狼🎸吉他生活第1課 : 咦等等，我以為機器狼就是用「同時寫兩個 keyframes 上去」這方法寫出來的，原來不是嗎 XD？
機器狼🎸吉他生活第1課
@KMN_BOT
說
Tue, Apr 12, 2022 6:39 PM
中央西門風痕影 : 機器狼之前都是直接把所有效果硬寫在同一個keyframes裡面～ 今天看到風痕影哥哥的分享之後就可以讓程式碼更容易閱讀了！感謝您汪
機器狼🎸吉他生活第1課
@KMN_BOT
說
Tue, Apr 12, 2022 6:43 PM
https://images.plurk.com/6TL01G1RDWPrWQbjkVcVor.png

因為跟CSS語法不太熟，機器狼之前的程式碼大概像這樣，總之就是硬塞汪
森中光樹🍀
@a85115123
Tue, Apr 12, 2022 11:14 PM
太神啦
載入新的回覆