【老闆不藏私房菜】— 活用 Chrome 開發者工具看透網頁動畫的魔術手法 🧙♂️
大家在研究案例或是 debug 的時候都是怎麼進行的呢？
除了最基礎的使用開發者工具查看 elements 與 console，Chrome 也內建更多工具可以協助我們理解網站架構的設計喔！
打開 Chrome 的開發者工具之後點擊右上角的 ... 符號 -> 更多工具 -> Layers，就可以開啟 Layers 工具，透過 3D 的方式理解元件在瀏覽器上的層級關係與移動順序。如此一來，就像是打開了魔術師的遮布，一窺各式動畫是怎麼實現的。（雖然這個方式不適用在以 Canvas 實現的動畫上😂，但依舊非常的實用喔）
對於案例與細節有興趣的客人們可以進一步到 Chrome 的 Youtube 影片（https://www.youtube.com/watch?v=6je49J67TQk）瞭解，老闆也用了這個工具解析了上週分享的拆字動畫，是不是每個元件的移動與層級關係在這裡變得一目了然呢？你也知道什麼解析網站的好用工具嗎？快點在留言跟老闆與其他朋友分享吧！
拆字動畫範例請往這邊：https://codepen.io/frank890417/pen/dyPbgWW
#devtools #chrome #webdevelopment #css #debug
css動畫範例 在 CSS - 動畫| 樂遊前端趣 的推薦與評價
等等都由動畫其它屬性來設定，動畫很多屬性，對吧，這就是它比轉場可以設定更複雜的效果原因。以下為一個簡單的動畫範例，當滑鼠移到.box 元素上時，在5 ... ... <看更多>