CodePen

在分頁順序中插入元素

使用 tabindex="0" 以自然的分頁順序插入元素。例如：

<div tabindex="0">Focus me with the TAB key</div>

如要聚焦元素，請按下 Tab 鍵或呼叫元素的 focus() 方法。

從分頁順序中移除元素

使用 tabindex="-1" 移除元素。例如：

<button tabindex="-1">Can't reach me with the TAB key!</button>

這樣即可從自然的分頁順序中移除元素，但仍可透過呼叫 focus() 方法讓元素保持聚焦。

請注意，為元素套用 tabindex="-1" 不會影響其子項；如果這些元素在分頁順序中自然地顯示，或由於 tabindex 值，這些值仍會保留在分頁順序中。如要從分頁順序中移除元素及其所有子項，建議您使用 WICG 的 inert polyfill。polyfill 會模擬提議的 inert 屬性行為，防止輔助技術選取或讀取元素。

盡情揮灑創意！

.loader {
  animation: spin 0.75s infinite steps(var(--count));
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

留意要用 steps(var(--count)) 讓效果達到最佳效果 ✨