在實務開發中,我們常常想為網站增添一些酷炫的特效,例如浮動粒子、浮雕效果等,來提升網站的互動性與趣味性。然而,當我們使用的 UI 框架本身未支援這些特效時,往往需要自己手刻實現。雖然通常只要 Google 一下,就能很快找到相關的技術文章或教學影片,但似乎缺乏一個將這些常用特效集中整理的地方。藉著這次鐵人賽的機會,我希望能夠親自實現、整理和分享這些特效的實作方法,讓大家能夠一次性地掌握這些實用的 CSS 技巧。
文章同步更新在 CodeFictionist 平滑滾動效果,乍聽之下應該會有所疑惑:平滑滾動?難道我平常 scroll 的時侯那個滾拉條的動作不平滑嗎? 嗯...
文章同步更新在 CodeFictionist 這個特效也是促成我寫這 30 天系列的原因之一。 那時為了建我朋友工作室的網站,想說要在首頁添增一些會飄動的粒...
文章同步更新在 CodeFictionist 今天這篇我其實也是來當學生的 XD 今天這個波浪效果,過去我在一位前端前輩的作品集上看過,那時就很想試試,但一...
文章同步更新在 CodeFictionist 今天這個效果我覺得可以說是這 24 天來最常在實務上看到的一個效果,常見到 Tailwind CSS 都為它特...
文章同步更新在 CodeFictionist 今天這個主題又是划水的一個主題 www 我們之前曾經在 Day 8 介紹過圖片懸停縮放效果,今天這個其實也是有...
文章同步更新在 CodeFictionist 先來解釋一下這個效果到底是什麼。 我們在 Day 21 介紹的平滑滾動效果是指當使用者點擊頁面上的錨點連結時,...
文章同步更新在 CodeFictionist 我們 Day 22 講過怎麼用 box-shadow 創造粒子浮動效果,那時有稍稍提過一嘴用 box-shad...
文章同步更新在 CodeFictionist 嚴格來講,這個效果其實不干 CSS 的事,它其實是靠 HTML5 的 draggable 屬性和 JavaSc...
文章同步更新在 CodeFictionist 今天想了一天,今天雖然是第 29 天,但明天預計是寫個 30 天心得為這次鐵人賽收個尾,所以嚴格來講今天是寫技...
文章同步更新在 CodeFictionist 一眨眼就 30 天了,鐵人賽就這樣完成了,在寫這篇鐵人 30 感想時猶感到一絲不真實。 其實打從我剛踏進軟體開...