今天我們要來探討如何善用使用者的 GPU 資源，讓網頁的動畫更加順暢。我盡量讓內容簡單易懂，可以當一篇科普文章閱讀。 瀏覽器的渲染流程 在我們討論之前，我們先來看看瀏覽器的渲染流程。這裡我畫了一張可愛的小圖 JavaScript: JavaScript 實現動畫效果，DOM 元素操作等。 Style（計算樣式）: 決定每個 DOM 元素應該套用什麼 CSS 規則。 Layout（佈局）: 計算每個 DOM 元素在最終畫面上顯示的大小和位置。 由於 web 頁面的元素佈局是相對的，所以其中任一個元素的位置發生變化，都會聯動的引起其他元素發生變化，這個過程叫做 reflow。 Paint（繪製）: 在多個圖層上繪製 DOM 元素的文字、 …
閱讀更多最討厭的廣告就是彈出式 Lightbox 廣告了，他會突然跳出來，然後你要去找那個超小的叉叉關掉他。今天我們不是要重現煩人的廣告，而是要來認識 CSS 選擇器 :target 並做出以下效果。 我們來用 Lightbox 看貓貓 認識 :taget :target 是一個虛擬類別（pseudo-class） 選擇器。他選擇的是超連結連結到的錨點（anchor）。直接上範例你就懂了。 1<a href="#one">One</a> 2<a href="#two">Two</a> 3<a href="#">no</a> …
閱讀更多- 以往製作波浪效果不是使用 GIF 就是借助貝茲曲線。貝茲曲線就是 Ai 或是 Vectornator (現在叫做Curve) 裡面的鋼筆工具。隨便拉都會有波浪的感覺，且使用 SVG或 JavaScript Canvas 都不難實現。
閱讀更多 - 今天我們要來製作一個時鐘。不使用圖片，只使用 CSS 來繪製。我的目標是可以做出類似於 Apple iOS17 StandBy 的時鐘效果。
閱讀更多 - 昨天我們做了一個開關，那麼我們今天就來做一個選單吧！
閱讀更多 在手機開關的設定裡面通常不是 checkbox ，而是這種 toggle 開關。因為比較好看，且更有開關的感覺。 廢話不多說，今天就來把它做出來吧 原理 開關本身還是 checkbox 勾選框，但是我們把原本勾勾的隱藏起來，然後用圓形開關代替。當被勾選時白色的圓形移動到右邊，而背景顏色漸變成綠色。 寫 checkbox 的 CSS 時因為 input 是插入一個元素，而不是一個範圍，所以不能使用 ::before 和 ::after 來做。 checkbox 顯示一定是正方形，如果設置為其他長寬比塊白的地方還是可以點擊。 checkbox 無法設定背景顏色 問題那麼多，因此我們只需要input幫我們掛名存狀態，然後把它藏在角落裡面就 …
閱讀更多- 昨天的內容是不是有一點燒腦?沒關係，今天來點輕鬆的，只有一行 JavaScript。不管是在線上的文書軟體、製作網站的網站、或甚至是 iOS StandBy 都會有顏色選單。今天我們就來做一個極簡的吧，還要加上自訂顏色的功能。
閱讀更多 以下內容是我高一在上公民課時體悟的數學大道理，和網路上大多的做法都不太一樣。這篇文章假設你已學會國中直線方程式。如果不會的話…我也沒辦法。
你有逛過 Apple 產品介紹的網頁嗎？這應該是我最早接觸滾動視差的地方。也是到現在我都覺得做的數一數二好的網站。你會發現在滾動的時候並不是單純的往下滑而已，螢幕上的元素常常會以出乎你意料的方式移動、或者是變化。
閱讀更多- 你有看過這種頁面往下滾，但圖片位置沒有往下的效果嗎？
閱讀更多