✏️全部文章
怎麼幫網站加上具有科技感的背景？用 CSS 做一個光線墜落特效
前端特效-前幾天看到一個這樣的效果，覺得很酷很有科技感，嘗試了一下發現蠻簡單的，今天就來看看怎麼做吧！ JS 生成 DOM 這次先從 JS 開始，因為每個光線都是一個 DOM，所以直接用 JS 生成比較快速...
前往怎麼幫網站加上具有科技感的背景？用 CSS 做一個光線墜落特效文章如何用 JS 將 1,2,3 數字格式化處理成 001,002,003 ? padStart 的實際應用
前端基礎-最近在公司遇到一個這樣的小問題，要將 index 的 1, 2, 3 在前端顯示變成 001, 002, 003，之前我看過有人這樣寫： 第一眼看到會有點不確定為什麼要這樣寫，而且未來改動也麻煩，例...
前往如何用 JS 將 1,2,3 數字格式化處理成 001,002,003 ? padStart 的實際應用文章如何用 CSS 和 JavaScript 製作音樂波浪 waveform 背景特效？
前端特效-前幾天幫公司專案做了一個簡單的 Landing Page，客戶希望後面有 waveform 的樣式，並隨著滑鼠移動變化波浪。像這樣 👇 今天就來看看怎麼做出這樣的特效吧！ Waveform - ...
前往如何用 CSS 和 JavaScript 製作音樂波浪 waveform 背景特效？文章CSS 直角文字怎麼做？超日系風格的設計
前端特效-前陣子看到某個日本網站做出這樣的直角文字，並搭配動畫，整個超日系超愛，結果發現他們整個文字是用圖片做的（ 跟 113 國慶網站一樣ＸＤ） 身為喜歡前端特效的我，一定要研究一下純 CSS 是怎麼做到的...
前往CSS 直角文字怎麼做？超日系風格的設計文章10 個實用卻冷門的 HTML 技巧
前端基礎-雖然 HTML 學起來很簡單，但卻有很多實用的技巧被忽略，這些技巧可以讓你更輕鬆地實現特定的功能和效果。 今天介紹 10 個你可能不熟悉，但非常有用的 HTML 標籤及其應用示例，分別是： <de...
前往10 個實用卻冷門的 HTML 技巧文章漸變背景也能有 transition ？CSS @property 的應用
前端特效-前言 今天來聊聊一年多前我就在關注的 CSS 屬性。 我們先來看一個問題，現在有一個 background: linear-gradient() 的元素，如果我們在 :hover 時直接更改 li...
前往漸變背景也能有 transition ？CSS @property 的應用文章如何用 CSS 的 box-shadow 來做 S 型圓角？
前端特效-前言 前幾天看到這樣的卡片效果，覺得他圖片和下面文字部分銜接的樣子很特別，是一個 S 型的圓角。 研究之後發現它居然是用 box-shadow 做的！？ 往下看具體怎麼做吧！ HTML ＆ C...
前往如何用 CSS 的 box-shadow 來做 S 型圓角？文章Terminal 終端機文字特效
前端特效-前陣子看到這個文字特效，在 hover 時文字會依序隨機變換，最後變回原本的字，有種產生亂碼的感覺，研究了一下，發現不會很複雜～ 今天就讓我們看看這究竟是怎麼做的吧～ 終端機文字特效 HTML ...
前往Terminal 終端機文字特效文章如何用原生 JS 和 CSS 做 3D carousel？
前端特效-前陣子看到台灣服飾品牌 namesake 的網站，它們產品介紹的頁面是使用 3d carousel，覺得超酷 👇 研究一下之後其實不會很難，今天就帶你用原生 JS 和 CSS 做出一樣的特效！👇...
前往如何用原生 JS 和 CSS 做 3D carousel？文章網頁的流動背景怎麼做？讓你的網站背景不再死版
前端特效-第一眼看到這個背景，以為是用 webGl 做的，研究之後發現其實很簡單。 原理是幾個 div 元素在後面跑，並對整個 container 做 blur。 讓我們先來看 HTML 架構 👇 流動...
前往網頁的流動背景怎麼做？讓你的網站背景不再死版文章