本文详细介绍了如何利用CSS实现一个独特的菜单悬停效果，通过CSS伪元素和过渡效果创建从右到左的线条动画。在遇到无法直接从左向右出现的问题时，作者巧妙地利用了flex的`flex-direction: row-reverse`属性，反转DOM渲染顺序，配合`~`选择符解决了问题。文章深入浅出，展示了CSS在交互设计中的灵活性。
先放一个最终实现的效果图。
首先我们先把 dom 结构写出来：
1
2
3
4
5
6
7
8
9
10
11
下面我们来分析如何实现上述效果。
首先我们把鼠标放到任意一个菜单上，该菜单的底部都会出现一条从右到左的线。这个比较好实现：
1
2
3
4
5
6
7
8
9
10
11
12
13
14ul li::before {
content: '';
position: absolute;
left: 100%;
bottom: 0;
width: 0;
height: 100%;
border-bottom: 2px solid #000;
transition: left .2s, width .2s;
}
ul li:hover {
left: 0;
width: 100%;
}
这个时候的效果是这样的：
我们看到，当我们从左面一个菜单移动到右面一个菜单时，左面菜单下面的线隐藏的方向是对的，而右面菜单下面的线出现的方向却是错的。这个时候就需要一个神奇的 css 选择符来处理这种情况：~
这里简单解释下 ~ 选择符的作用：
1
2
3p ~ ul {
/* blablabla */
}
代表 p 标签后的所有 ul 标签。
如此我们可以这样处理上面的问题：
1
2
3ul li:hover ~ li::before {
left: -100%;
}
加上上面的代码后，就可以实现本文开始所示的效果了。
但是，我想你已经发现一个问题了，没错，第一次将鼠标 hover 到菜单上时，底下的线是从右向左出现的，这与我们读书时的方向是不一致的。
你可能会问，为什么一开始的时候不让线就是从左向右出现呢？
首先我们来思考之所以能用纯 css 实现这种效果最大的限制条件：那就是 ~ 选择符。
~ 选择符是有方向的，那就是只能选择后面的元素。我们现在考虑从第一个菜单滑动到第二个菜单时发生了什么：
首先当我们将鼠标放到第一个菜单上时，不论是先从左面出现还是先从右面出现，都可以实现，但当我们将鼠标从第一个菜单移动到第二个菜单时，第一个菜单的线必须从左向右消失。这则决定了首次放到菜单上时，底部的线只能是从右向左出现，只有这样才能在离开时从左向右消失。
既然所有的菜单都是设定为从右向左出现，当我们将鼠标从第一个菜单移动到第二个时，第一个菜单表现正常：从左向右消失，但第二个菜单则会和第一个菜单一样从右向左出现。这不是我们想要的效果。好在有 ~ 选择符可以让我们 hover 在第一个菜单上时，改变后面的菜单出现方向。
现在应该明白了，因为 ~ 只能选择后面的元素，所以无法实现首次从左向右出现的效果。那如果有一个和 ~ 相反的选择器岂不是就可以了吗？bingo！
是的，如果你这么想大概就已经理解我的意思了，不过可惜的是，并没有这么一种选择器(个人没有查到，若有望告知)。
那这个瑕疵就不能解决了吗？
可以的，这个问题我也考虑了很久，最后突然灵光一现，想到了 flex 的一个属性： flex-direction: row-reverse。
如果使用 flex 的属性的话，可以将 dom 元素反转渲染，这个时候 ~ 选择符表示的含义不正好相反吗？
感觉自己机智的一笔，哈哈。
说干就干，需要注意的是，reverse 后，dom 的顺序在书写时也要反转下，然后就是之前的 left 控制动画要相应的改成 right：
1
2
3
4
5
6
7
8
9
- Settings
- Insights
- Wiki
- Projects
- Pull requests
- Issues
- Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21ul {
flex-direction: row-reverse;
justify-content: flex-end;
}
ul li::before {
content: '';
position: absolute;
right: 100%;
bottom: 0;
width: 0;
height: 100%;
border-bottom: 2px solid #000;
transition: right .2s, width .2s;
}
ul li:hover::before {
right: 0;
width: 100%;
}
ul li:hover ~ li::before {
right: -100%;
}
效果如下所示：
扫一扫
367
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
