中央西門風痕影
@hit1205
好奇
Mon, Apr 11, 2022 7:20 PM
Mon, Apr 11, 2022 7:23 PM
17
這種 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
因為跟CSS語法不太熟,機器狼之前的程式碼大概像這樣,總之就是硬塞汪
森中光樹🍀
@a85115123
Tue, Apr 12, 2022 11:14 PM
太神啦
載入新的回覆
這種 DVD logo 彈來彈去的效果,因為有四個邊緣要判斷,之前都以為只能用 JavaScript 做出來。做法是在判定碰到邊緣時,讓運動方向反過來。例如:撞到右側時,原本遞增的
left
就得換成遞減的、撞到上方時,原本遞減的top
就要改遞增但之前看機器狼只用 CSS 就做出來,便查了一下,結果查到了沒有想過的做法:
1. 做「由左至右」、「由上至下」的動畫各一個
2. 在一個元素上同時套用這兩個動畫,並使用
linear infinite alternate
(線性、無限次數重複播放、正向與反向來回交替播放)這兩個動畫不會互相影響,會各自來回播放,實際上跑起來的效果就是碰到邊緣彈回去
這裡我是多加了一個動畫讓他左右翻面用
<marquee>
內居然是可以再嵌<marquee>
的嗎 XD我之前查資料查到的www
沒想到animation可以同時寫兩個keyframes上去,學了一課汪
組合動畫的概念可以讓CSS animation有各式各樣的表現喔!機器狼昨天剛寫出來的滾滾卡比也是類似概念汪
因為跟CSS語法不太熟,機器狼之前的程式碼大概像這樣,總之就是硬塞汪