35. 交错动画 & 导航列表项的悬停和聚焦效果

交错动画 & 导航列表项的悬停和聚焦效果

交错动画

为列表的元素创建交错动画。

• 设置 opacity: 0 和 transform: translateX(100%) 使列表元素透明并将它们全部移到右侧。
• 为列表元素指定相同的 transition 属性,除了 transition-delay。
• 使用内联样式为每个列表元素指定 --i 的值。这反过来将用于 transition-delay 以创建交错效果。
• 使用复选框的 :checked 伪类选择器来设置列表元素的样式。将 opacity 设置为 1,将 transform 设置为 translateX(0),使它们出现并滑入视图。

<div class