Search for a command to run...
Articles tagged with #css-animation
⚠️ 本篇文章已搬遷至 css.im1010ioio.dev，請至新站閱讀完整版。 你一定看過那種很酷的網頁：當你向下滾動時，背景圖片移動得比前景文字慢，或者某個元素會隨著滾動淡入、旋轉、放大，創造出引人入勝的深度和故事感。 這種效果，我們稱之為「捲動式動畫 (Scroll-driven Animations)」或「視差滾動 (Parallax Scrolling)」。 為了寫這篇，我發現了一個超實用的網站！ 這個網站 Scroll-driven Animations 收集了許多由滾動驅動...
⚠️ 本篇文章已搬遷至 css.im1010ioio.dev，請至新站閱讀完整版。 前幾篇我們已經學會怎麼設定 CSS 的滾動範圍，現在我們要再對滾動的操作行為做一些很簡單的設定，就是：滾動時的行為 scroll-behavior 。 一、使用 HTML hash # 連結（錨點），滾動到指定 HTML ID 範圍 1. hash 錨點的設定 在 CSS 中指定 ID 時是使用井字號代表，在 HTML 中其實也是一樣的，我們可以使用 <a> 連結連到這個 ID，點了連結後就會在同個畫面中跳...
⚠️ 本篇文章已搬遷至 css.im1010ioio.dev，請至新站閱讀完整版。 前幾篇我們有提到 CSS transition 的特性： 延伸閱讀：#51 CSS Transition 與一些小技巧：倒帶、影響相鄰的兄弟 transition 是兩個狀態之間的過渡效果，但這個過渡效果只適用於可以計算的數值型屬性。例如，width、height、opacity 等等。所以，像 auto 、 display: none 或 background-image 這類非數值型屬性是無法有過渡效果...
⚠️ 本篇文章已搬遷至 css.im1010ioio.dev，請至新站閱讀完整版。 上篇我們教了大家如何客製化 checkbox 與 radio 樣式，其實運用同樣的原理，我們也可以做到簡單的互相切換（toggle）行為，例如：「點了就開，再點就關」這種動作。 所以，今天我們來做簡單的網頁選單吧！ 基本概念 幫大家複習一下要用的小技巧…
⚠️ 本篇文章已搬遷至 css.im1010ioio.dev，請至新站閱讀完整版。 在日常前端開發中，radio 和 checkbox 是非常常用的表單元素，但瀏覽器預設的樣式往往不符合設計需求。因此，學會如何客製化這些元素樣式是每個前端設計師的必備技能之一。在這篇教學文中，我們將介紹如何使用 CSS 來客製化 radio 和 checkbox，而且進一步用 checkbox 做出一個開關按鈕 (Switch Button)。 ㄧ、改變 checkbox/radio 顏色：accent-c...
⚠️ 本篇文章已搬遷至 css.im1010ioio.dev，請至新站閱讀完整版。 這篇我們會介紹如何使用 CSS 的 offset-path 屬性來創建路徑動畫。這個屬性允許元素沿著指定的路徑跑，配合 offset-distance 可以控制元素在路徑上的哪個位置。我們將透過一些範例來了解 offset-path 的用法。 基本概念 offset-path 用來定義一個元素應該沿著哪條路徑進行動畫效果。 這個屬性支援許多不同的形狀，包括： 圓 circle() 橢圓 ellipse()...
