搜尋

CSS 捲軸控制放射選單

這篇教學會使用 CSS 的 transform 製作放射形的選單,並透過 step-end 的 CSS 動畫呈現方式搭配 animation-timeline 控制動畫進度,讓使用者拖拉捲軸時,放射形的選單同時會發生改變的動畫效果。

注意,這個效果目前僅支援 Chrome 和 Edge,其他部分瀏覽器或行動裝置瀏覽器可能不支援。

快速導覽:

CSS 教學 - CSS 捲軸控制放射選單

製作放射形選單

根據下方說明撰寫程式碼,執行後會在畫面看到一個具有七個連結的選單。

<!-- HTML 程式碼 -->
<div class="main">
  <div class="menu">
    <a href="">Apple</a>
    <a href="">Banana</a>
    <a href="">Oxxo</a>
    <a href="">Coconut</a>
    <a href="">Papaya</a>
    <a href="">Peach</a>
    <a href="">Watermelon</a>
  </div>
  <div class="contain"></div>
</div>

<!-- CSS 程式碼 -->
<style>
    .main {
      position: relative;
      width: 540px;
      height: 400px;
      overflow: hidden scroll; /* 超過範圍隱藏,y 方向出現捲軸 */
      border: 1px solid #000;
    }
    .menu {
      position: sticky;        /* 黏貼定位,如果是瀏覽器視窗改用 fixed */
      top: 50px;
      left: 50px;
      width: 200px;
      height: 200px;
      border-radius: 50%;      /* 讓選單樣式為原形 */
      background: #ccc;
    }
    .menu a {
      display: block;
      width: 200px;
      font-size: 40px;
    }
    .contain {height: 2000px;}
</style>

CSS 教學 - CSS 捲軸控制放射選單 - 製作放射形選單 ( 基本外觀 )

使用 CSS transform 將每個超連結旋轉成放射形,注意需要「先移動,再先旋轉在移動」,目的在於先將選單移動到父元素中心點,接著進行旋轉,旋轉後後再往外移動同樣的距離,程式碼中額外使用「變數」,將移動的數值獨立為變數,讓後續修改更為方便。

<!-- HTML 程式碼 -->
<div class="main">
  <div class="menu">
    <a href="">Apple</a>
    <a href="">Banana</a>
    <a href="">Oxxo</a>
    <a href="">Coconut</a>
    <a href="">Papaya</a>
    <a href="">Peach</a>
    <a href="">Watermelon</a>
  </div>
  <div class="contain"></div>
</div>

<!-- CSS 程式碼 -->
<style>
  .main {
    position: relative;
    width: 540px;
    height: 400px;
    overflow: hidden scroll;
    border: 1px solid #000;
  }
  .menu {
    position: sticky;
    top: 50px;
    left: 50px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: #ccc;
    --x: 220px;         /* 變數 */
    rotate: 0deg;       /* 預設旋轉角度 */
  }
  .menu a {
    position: absolute; /* 改成絕對定位 */
    display: block;
    width: 200px;
    font-size: 40px;
  }

  .menu a:nth-child(1){
    transform: translate(0px,70px) rotateZ(0deg) translateX(var(--x));
  }
  .menu a:nth-child(2){
    transform: translate(0px,70px) rotateZ(30deg) translateX(var(--x));
  }
  .menu a:nth-child(3){
    transform: translate(0px,70px) rotateZ(60deg) translateX(var(--x));
  }
  .menu a:nth-child(4){
    transform: translate(0px,70px) rotateZ(90deg) translateX(var(--x));
  }
  .menu a:nth-child(5){
    transform: translate(0px,70px) rotateZ(120deg) translateX(var(--x));
  }
  .menu a:nth-child(6){
    transform: translate(0px,70px) rotateZ(150deg) translateX(var(--x));
  }
  .menu a:nth-child(7){
    transform: translate(0px,70px) rotateZ(180deg) translateX(var(--x));
  }
  .contain {height: 2000px;}
</style>

CSS 教學 - CSS 捲軸控制放射選單 - 製作放射形選單 ( 變成放射選單 )

使用捲軸控制放射選單

延伸上方的放射狀選單,加入多個 CSS 變數設定初始透明度,使用變數的目的在於如果後續要修改透明度,只需要修改一次即可,因此如果動畫裡修改了變數,相關樣式就會發生變動。接著撰寫動畫內容,因為有七個選單,所以動畫使用 16.7% 為間隔,每一格中除了旋轉角度,也同時會修改變數內容,執行到該格動畫時,選單透明度就會發生變化

<!-- HTML 程式碼 -->
<div class="main">
  <div class="menu">
    <a href="">Apple</a>
    <a href="">Banana</a>
    <a href="">Oxxo</a>
    <a href="">Coconut</a>
    <a href="">Papaya</a>
    <a href="">Peach</a>
    <a href="">Watermelon</a>
  </div>
  <div class="contain"></div>
</div>

<!-- CSS 程式碼 -->
<style>
  .main {
    position: relative;
    width: 540px;
    height: 400px;
    overflow: hidden scroll;
    border: 1px solid #000;
  }
  .menu {
    position: sticky;
    top: 50px;
    left: 50px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: #ccc;
    --x: 220px;
    rotate: 0deg; 
    --o: 0.2;        /* 變數,非選擇時的透明度 */
    --o1: var(--o);  /* 變數,數值與 --o 相同 */
    --o2: var(--o);  /* 變數,數值與 --o 相同 */
    --o3: var(--o);  /* 變數,數值與 --o 相同 */
    --o4: var(--o);  /* 變數,數值與 --o 相同 */
    --o5: var(--o);  /* 變數,數值與 --o 相同 */
    --o6: var(--o);  /* 變數,數值與 --o 相同 */
    --o7: var(--o);  /* 變數,數值與 --o 相同 */
    animation: oxxo step-end forwards;   /* 使用 step-end 讓進度從第二格開始一格格移動 */
    animation-timeline: scroll();        /* 根據捲軸滾動改變動畫進度 */

  }
  .menu a {
    position: absolute; /* 改成絕對定位 */
    display: block;
    width: 200px;
    font-size: 40px;
    opacity: var(--o);  /* 預設透明度 */
  }

  .menu a:nth-child(1){
    transform: translate(0px,70px) rotateZ(0deg) translateX(var(--x));
    opacity: var(--o1); /* 第一個選單的透明度 */
  }
  .menu a:nth-child(2){
    transform: translate(0px,70px) rotateZ(30deg) translateX(var(--x));
    opacity: var(--o2); /* 第二個選單的透明度 */
  }
  .menu a:nth-child(3){
    transform: translate(0px,70px) rotateZ(60deg) translateX(var(--x));
    opacity: var(--o3); /* 第三個選單的透明度 */
  }
  .menu a:nth-child(4){
    transform: translate(0px,70px) rotateZ(90deg) translateX(var(--x));
    opacity: var(--o4); /* 第四個選單的透明度 */
  }
  .menu a:nth-child(5){
    transform: translate(0px,70px) rotateZ(120deg) translateX(var(--x));
    opacity: var(--o5); /* 第五個選單的透明度 */
  }
  .menu a:nth-child(6){
    transform: translate(0px,70px) rotateZ(150deg) translateX(var(--x));
    opacity: var(--o6); /* 第六個選單的透明度 */
  }
  .menu a:nth-child(7){
    transform: translate(0px,70px) rotateZ(180deg) translateX(var(--x));
    opacity: var(--o7); /* 第七個選單的透明度 */
  }
  .contain {height: 2000px;}

  /* 動畫過程中除了旋轉角度,也改變變數數值 */
  @keyframes oxxo {
    0% {
      rotate: 0deg;
      --o1: 1;
    }
    16.7% {
      rotate: -30deg;
      --o1: var(--o);
      --o2: 1;
    }
    33.4% {
      rotate: -60deg;
      --o2: var(--o); 
      --o3: 1;
    }
    50.1% {
      rotate: -90deg;
      --o3: var(--o); 
      --o4: 1;
    }
    66.8% {
      rotate: -120deg;
      --o4: var(--o); 
      --o5: 1;
    }
    83.5% {
      rotate: -150deg;
      --o5: var(--o); 
      --o6: 1;
    }
    100% {
      rotate: -180deg;
      --o6: var(--o); 
      --o7: 1;
    }
  }
</style>

CSS 教學 - CSS 捲軸控制放射選單 - 使用捲軸控制放射選單

小結

使用捲軸控制放射選單是個滿有趣的效果,雖然目前只有 Chrome 和 Edge 支援,但相信不久的將來,相關 CSS 功能應該就能普及化,也就能做出更多有趣的效果了。

意見回饋

如果有任何建議或問題,可傳送「意見表單」給我,謝謝~

CSS 教學

基本介紹

認識 CSS 開始使用 CSS CSS 語法規則 CSS 命名原則 CSS 常用樣式屬性

CSS 選擇器

認識 CSS 選擇器 優先順序 ( 權重 ) 樣式繼承與聯集 使用巢狀結構語法 元素選擇器 ID 和 Class 選擇器 屬性選擇器 文件結構選擇器 虛擬類別選擇器 ( 結構 ) 虛擬類別選擇器 ( 類型 ) 虛擬類別選擇器 ( 輸入 ) 虛擬類別選擇器 ( 行為 ) 虛擬類別選擇器 ( 超連結 ) 虛擬類別選擇器 ( 邏輯 ) 虛擬類別選擇器 ( 其他 ) 虛擬元素選擇器 群組與組合選擇器

數值與單位

全域關鍵字與文字數值 長度與角度單位 位置名稱與時間單位 特殊樣式屬性 ( all、appearance)

規則與定義

變數 ( Variables ) 媒體查詢 ( @media ) 容器查詢 ( @container ) 自訂屬性值 ( @property ) 匯入樣式 ( @import ) 分層優先順序 ( @layer ) 定義字型 ( @font-face ) 計數規則 ( @counter-style ) 列印網頁 ( @page )

函式類型

數學計算 文字與清單計數 形狀與線段 路徑 ( path ) 生成內容與引號

顏色與濾鏡

顏色單位 色彩模型 漸層色 影像濾鏡 ( filter ) 背景濾鏡 ( backdrop-filter ) 混合模式 ( mix-blend-mode )

文字與段落

設定字型 ( font-family ) 使用外部字型 文字尺寸 文字樣式 ( 常用 ) 文字樣式 ( 其他實用 ) 文字樣式 ( 特殊用途 ) 文字換行 文字空白與 Tab 大小 文字行高與縮排 文字水平與垂直對齊 文字書寫方向 文字自動分欄

元素容器

容器顯示類型 ( display ) 元素 display 對照表 盒子模型 ( Box Model ) 寬度與高度 內邊距 ( padding ) 外邊界 ( margin ) 邊框 ( border ) 邊框圓角 ( border-radius ) 影像邊框 ( border-image ) 輪廓 ( outline ) 內容溢出與裁切 ( overflow ) 內容範圍 ( contain ) 可見性與透明度

背景與陰影

背景顏色 背景圖 ( 定位、尺寸 ) 背景圖 ( 固定、重複 ) 背景圖 ( 多重背景、混合 ) 背景縮寫 ( background ) 容器陰影 ( box-shadow )

清單與表格

清單樣式 清單計數器 表格基本樣式 表格邊框樣式 表格內容寬度與對齊

基本排版與定位

元素排版方式 浮動 ( float ) 浮動形狀 ( shape-* ) 定位 ( position ) 邏輯屬性 ( logical properties ) 水平置中技巧 垂直置中技巧

Flex 彈性排版

Flexbox 彈性盒子 Flex 對齊方式 Flex 彈性伸縮

Grid 網格排版

Grid 網格容器與格線 Grid 網格空間與命名 Grid 網格流向與間距 Grid 排列網格項目 Grid 項目對齊與順序

轉場與動畫

轉場 ( transition ) 轉場觸發事件 動畫 ( animation ) 自訂動畫路徑 ( offset ) 動畫觸發事件 多重動畫的權重與順序 動畫進度控制 ( timeline )

變形、裁切與遮罩

裁切路徑 ( clip-path ) 影像遮罩 ( mask ) 物件填滿方式與定位 轉換函式 ( transform ) 平移、旋轉與縮放 3D 轉換與透視

視窗與使用者行為

捲軸樣式 ( scrollbar ) 拉霸、滑桿樣式 ( slider ) 滑鼠游標圖示 ( cursor ) 滑鼠事件 ( pointer-events ) 使用者選取 ( user-select ) 捲動行為 ( scroll、overscroll ) 列印換頁 ( break-* )

範例效果

CSS 圓餅圖 CSS 跑馬燈 Google 載入動畫 漸層色的轉場與動畫 電子時鐘數字 不規則形狀動畫 彈跳的正方形動畫 3D 正多面體 超連結底線動畫效果 噁心黏黏球效果 漸層色製作星空背景 CSS 視差滾動效果 捲軸控制放射形選單 捲軸改變文字背景色 CSS 頁面捲動進度條