在今天的 GUI Challenge 中,@AdamArgyleInk 分享思考如何建構浮動式訊息,這是用於提供使用者意見回饋的非互動式使用者介面元件。探索 [output] 元素、CSS 格線、動畫,以及有助於建構自動調整式元件的 FLIP 技術。
章節:
- 0:00 - 簡介
- 0:23 - 總覽
- 2:02 - [輸出]
- 3:00 - 版面配置
- 4:41 - 動畫
- 5:50 - JavaScript 第 1 部分
- 6:55 - 降低的動作
- 7:43 - 主要畫面格
- 8:09 - JavaScript 第 2 部分
- 10:48 - F.L.I.P.
- 14:18 - 結尾
資源:
- 立即閱讀 → https://goo.gle/3GghBfI
- 立即試用 → https://goo.gle/3EHsuXG
- 取得原始碼 → https://goo.gle/3oykceU
- 小飛 → https://goo.gle/3oz8P6D
- Paul Lewis (來自 SuperCharged) → https://goo.gle/31IOFy0
觀看更多 GUI 挑戰 → https://goo.gle/GUIchallenges
訂閱 Google Chrome 開發人員 → https://goo.gle/ChromeDevs