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

文章预览

交错动画 为列表的元素创建交错动画。 设置 opacity: 0 和 transform: translateX(100%) 使列表元素透明并将它们全部移到右侧。 为列表元素指定相同的 transition 属性,除了 transition-delay 。 使用内联样式为每个列表元素指定 --i 的值。这反过来将用于 transition-delay 以创建交错效果。 使用复选框的 :checked 伪类选择器来设置列表元素的样式。将 opacity 设置为 1 ,将 transform 设置为 translateX(0) ,使它们出现并滑入视图。 < div   class = "container" >    < input   type = "checkbox"   name = "menu"   id = "menu"   class = "menu-toggler" >    < label   for = "menu"   class = "menu-toggler-label" > 菜单 label >    < ul   class = "stagger-menu" >      < li   style = "--i: 0" > 首页 li >      < li   style = "--i: 1" > 定价 li >      < li   style = "--i: 2" > 账户 li >      < li   style = "--i: 3" > 支持 li >      < l ………………………………