這種互動特效好酷，底層邏輯怎麼寫的？！？！？

前端前端新手村網頁設計網頁網頁程式

jason07 2023-02-26 20:04:59 ‧ 2531 瀏覽

分享至

最近有學互動式特效的課程，剛好逛到鍵盤網站，發現有用JS+CSS搞一個：

https://rog.asus.com/tw/keyboards/keyboards/compact/rog-falchion-model/

超級帥超級酷

先不論JS特效部分怎麼實作的，雖然我很好奇XD
我看到他是用一張圖片蓋住

我有詳細用F12去看他每個鍵都有div
但是單獨改好像沒有作用不知道為何被蓋掉之類的
怎麼有辦法只讓鍵盤字母發光呢~~這些按鍵上面的數字可不好刻呢
他也不是用文字去表現的

那怎麼讓這些鍵盤上的符號發光！？

看更多先前的討論...收起先前的討論...

窮嘶發發發 iT邦高手 1 級 ‧ 2023-02-26 21:32:25 檢舉

那張鍵盤的圖檔，是PNG，所有的鍵盤文字都是挖空透明的，然後在這張圖的後面還有有一張背景圖層，圖檔上方是鍵盤按鍵的布局，透過布局去做動讓背景圖層變色就會產生這個效果，講開了就是這樣子而已，不過他的特效處理有用JS處理，針對不同的選項去切換已經寫好的動作，然後撥放寫好的動畫效果，大致上這樣

ccutmis iT邦高手 2 級 ‧ 2023-02-26 23:27:20 檢舉

怎麼做的技術我知道......... 它叫作「鈔能力」....(逃ing...)

jason07 iT邦新手 5 級 ‧ 2023-02-27 02:44:56 檢舉

@窮嘶發發發原來如此
1.那還想請問懂設計的挖空這些文字會很難嗎
假設要自己幹一張出來會不會超花時間

2.JS處理的部分稍微看一下是很難的那種嗎~?
如果不是太難感覺來練js會很不錯xd

以上謝謝兩位

wu2960 iT邦新手 2 級 ‧ 2023-02-27 08:35:24 檢舉

挖空的部分:
我們拿到鍵盤的圖片，通常只有兩種顏色，鍵盤(黑)文字(白)
使用影像處理軟體(Photoshop或PhotoImpact)，選取圖片中所有黑色的部分，
再另存成png就好了

jason07 iT邦新手 5 級 ‧ 2023-02-27 20:10:34 檢舉

@wu2960 原來有這種選項酷學到了

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

lionad

iT邦新手 5 級 ‧ 2023-02-27 13:26:17

最佳解答

键盘上的字母是透明的；发光动画是靠 CSS 动画制作的，CSS 动画控制每一个按键什么时候亮，亮什么颜色，亮多久等。

如果你把键盘图片的透明度降低，就能看到他的实现原理了：

回應 2
分享
檢舉

jason07 iT邦新手 5 級 ‧ 2023-02-27 20:10:54 檢舉

這招很有創意很屌學到了謝謝你我想選你最佳解答XD

jason07 iT邦新手 5 級 ‧ 2023-02-27 20:11:55 檢舉

感謝其他人的分享，不過你這個透明度的想法我很喜歡，就選你！
謝謝大家！
這文章留給其他想學的人參考，都會看到你們的貢獻。

登入發表回應

一尾活熊

iT邦新手 5 級 ‧ 2023-02-27 11:32:27

發光的底色是一個div，鍵盤是PNG檔本身就有支援透明，把鍵盤的圖片疊在底色上就可以看到效果了。

不同的效果是藉由不同的底色做到，主要是CSS動畫，JS用的不多，大概只用在切換樣式囉。

回應 1
分享
檢舉

jason07 iT邦新手 5 級 ‧ 2023-02-27 20:11:11 檢舉

謝謝你的說明非常清楚學習了感謝分享

登入發表回應

我要發表回答

立即登入回答

參賽組數

1064 組

團體組數

40 組

累計文章數

22199 篇

完賽人數

602 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙