CodePen

在 Tab 键顺序中插入元素

使用 tabindex="0" 将元素插入自然 Tab 键顺序。例如：

<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>

这会从自然 Tab 键顺序中移除某个元素，但仍可通过调用其 focus() 方法聚焦该元素。

请注意，对某个元素应用 tabindex="-1" 不会影响其子项；如果这些子项自然按 Tab 键顺序排列，或由于存在 tabindex 值，这些子项将保持 Tab 键顺序不变。如需从 Tab 键顺序中移除某个元素及其所有子级，请考虑使用 WICG 的 inert polyfill。polyfill 会模拟所提议的 inert 属性的行为，该属性会阻止辅助技术选择或读取元素。

让一切动起来！

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

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

请注意使用 steps(var(--count)) 以获得理想的效果 ✨