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