在這個數位時代,網站的外觀和互動效果成為了吸引訪問者的關鍵。然而,過度依賴庫和框架可能讓網站失去獨特性和性能表現。這就是為什麼我們要一同踏上一場探索之旅,尋找不用依賴任何庫,卻能創造出令人驚艷的CSS和JavaScript特效的方法。
在這30天中,我們將揭開如何以最精簡的代碼,實現從簡單到複雜的特效。我們將深入探討純CSS動畫,通過過渡、轉換和關鍵幀,讓元素變得生動有趣。同時,我們也將挑戰自己,使用純JavaScript實現無需依賴庫的互動,從而提高網站效能和速度。
無論你是前端初學者還是經驗豐富的開發者,這個系列都將帶給你嶄新的思維。帶你製作令人驚艷的網站。
你有看過這種頁面往下滾,但圖片位置沒有往下的效果嗎? 這是舊版的毛哥EM資訊密技黑歷史。偷偷告訴你,這個效果只需要一行 CSS就可以做到。background...
以下內容是我高一在上公民課時體悟的數學大道理,和網路上大多的做法都不太一樣。這篇文章假設你已學會國中直線方程式。如果不會的話…我也沒辦法。 你有逛過 Ap...
昨天的內容是不是有一點燒腦?沒關係,今天來點輕鬆的,只有一行 JavaScript。 不管是在線上的文書軟體、製作網站的網站、或甚至是 iOS StandBy...
在手機開關的設定裡面通常不是 checkbox ,而是這種 toggle 開關。因為比較好看,且更有開關的感覺。 廢話不多說,今天就來把它做出來吧 原理 開...
昨天我們做了一個開關,那麼我們今天就來做一個選單吧! 這個雖然是一種 radio 選單,但對於選擇數字這種有連續性,或著是比較短的文字,使用這種風格都是一種...
今天我們要來製作一個時鐘。不使用圖片,只使用 CSS 來繪製。 我的目標是可以做出類似於 Apple iOS17 StandBy 的時鐘效果。 HTML 首...
以往製作波浪效果不是使用 GIF 就是借助貝茲曲線。貝茲曲線就是 Ai 或是 Vectornator (現在叫做Curve) 裡面的鋼筆工具。隨便拉都會有波浪...
今天我們要使用純 CSS 實現 DVD 反彈動畫,讓大家認識 steps() 以及 animation-composition 屬性的使用方式,並提供這個實用...
最討厭的廣告就是彈出式 Lightbox 廣告了,他會突然跳出來,然後你要去找那個超小的叉叉關掉他。今天我們不是要重現煩人的廣告,而是要來認識 CSS 選擇器...
今天我們要來探討如何善用使用者的 GPU 資源,讓網頁的動畫更加順暢。我盡量讓內容簡單易懂,可以當一篇科普文章閱讀。 瀏覽器的渲染流程 在我們討論之前,我們先...