系列文章
Day11 - 圓圈旋轉加載動畫
今天要介紹，如何使用 border 和 @keyframes 創建旋轉的圓形加載動畫 HTML 創建一個 div 元素，並應用 .loader類 來表示加載動...
Day12 - 製作加載進度條的動畫
今天要介紹，如何使用 CSS 漸變和動畫來製作加載進度條效果 HTML <div class="progress-bar">...
Day13 - 模擬打字機的文字輸入
今天要學習如何使用 CSS 來模擬打字機的文字輸入效果，讓文字逐字呈現。會利用 border-right 來模擬光標的閃爍效果，並使用 steps() 函數來精...
Day14 - 製作心跳般的脈動效果
今天要介紹如何使用 CSS 創建一個心跳動畫 HTML 創建一個 div 元素，類別名為 heart，用於顯示愛心形狀 <div class="...
Day15 - 模擬雷達掃描
今天要介紹如何使用conic-gradient和rotate模擬雷達掃描的動畫效果 HTML <div class="radar"&g...
Day16 - 星星閃爍夜空效果
今天要介紹的是，利用css製作星星閃爍的效果 HTML <div class="night-sky"> <div...
Day17 - 泡泡字體效果
今天要介紹，如何使用 border-radius 和 transform 創建膨脹的泡泡字體，並讓字體不斷變形 HTML 創建一個名為 bubble-text...
Day18 - 摺紙效果
今天要介紹的是，如何使用 CSS 創建一個簡單的摺紙動畫效果，點擊元素時模擬摺紙的折疊和展開 HTML 創建一個 <div> 元素，並透過 onc...
Day19 - 漸變框架中的文字滑動效果
今天要介紹的是如何在漸變框架中創建一個文字滑動效果，並透過 CSS 動畫讓文字在框架中從左到右滑動 HTML 創建一個包裹文字的框架（text-wrapper...
Day20 - 圖片模糊懸停效果
這篇文章要介紹如何設置一個圖片，在滑鼠懸停時顯示模糊效果，並讓模糊效果隨著滑鼠移開漸漸消失，將需使用 CSS 的 filter: blur() 和 transi...