在這個數位時代,網站的外觀和互動效果成為了吸引訪問者的關鍵。然而,過度依賴庫和框架可能讓網站失去獨特性和性能表現。這就是為什麼我們要一同踏上一場探索之旅,尋找不用依賴任何庫,卻能創造出令人驚艷的CSS和JavaScript特效的方法。
在這30天中,我們將揭開如何以最精簡的代碼,實現從簡單到複雜的特效。我們將深入探討純CSS動畫,通過過渡、轉換和關鍵幀,讓元素變得生動有趣。同時,我們也將挑戰自己,使用純JavaScript實現無需依賴庫的互動,從而提高網站效能和速度。
無論你是前端初學者還是經驗豐富的開發者,這個系列都將帶給你嶄新的思維。帶你製作令人驚艷的網站。
今天是第二十一天,已經走完2/3的路程,我媽還以為我早被淘汰了。這個系列明明是叫【不用庫 也能酷 - 玩轉 CSS & Js 特效】,但 Js 出現了幾...
今天我們要來做一些乱薍覼釠亂碼效果。 基本版面 效過在手,氣氛要有。 HTML 一個標題,一個 <div> 放亂碼,一個 <span>...
今天我們會提到幾個不同的原理。你可以像生菜沙拉一樣自己調配。 漸層動畫有甚麼難的? 我阿嬤...不會 CSS body { background: lin...
今天我們要來做這個紓壓的效果: https://codepen.io/edit-mr/pen/poqqoLr 怎麼做? 原理其實很簡單。要讓兩個東西之間相連只...
我們今天要來做幾份漢堡選單。 原理和 Day14 今天我想來點… 純 CSS 的開關 一樣,都是用 input 的 checkbox 來儲存狀態好讓其他元素可...
我們都知道 CSS 動畫可以用 @keyframes 來做,但是他們都是馬上就觸發的。就算元素還沒有出現在畫面上,動畫也已經開始了。 如果要做出滾動到某個位置...
今天我們要來製作 iT 邦幫忙首頁的導覽列。我們先來看看原本的網站。 呃好喔...晚點再看看... 沒事我有先截圖。 你有注意到嗎?第二排的導覽列在往下滾...
今天我們要來製作Slider效果。不過要用一個你應該沒有看過有人這樣做但卻很簡單的方法。 應用應該不用我多說,不管是公司網站展示產品,學校輪播榮譽榜,還是業界...
相信大家對於這個頁面都不陌生吧。這是我們2023 iThome 鐵人賽的首頁。我覺得他的粒子特效和地球很酷,所以我們今天就來看看怎麼做吧。 以下是今天我們的...
不知不覺,三十天的鐵人賽就要結束了。一開始還覺得時間很漫長,但到了二十幾天之後我開始發現時間不多了,十分珍惜每一次能夠和大家分享的機會。 這三十天我們做了什麼...