标签：flex sla abs 绝对定位 ack 一个 isp width :active
1、基本效果就是这样的 ，鼠标悬停，下划线划入。鼠标离开，下划线划出
2、下划线的划入是有方向的，从左侧划入悬停，下划线由左向右伸长。从右侧划入，下划线由又往左伸长
1、导航是由ul+li组成的，在这里显然li 的宽度是不固定的。所以，我们可能需要从 li 本身的宽度上做文章，
既然每个 li 的宽度不一定，那么它对应的下划线的长度，肯定是是要和他本身相适应的。所以 ，我们可以在li hover 的时候，借助伪元素。将下划线作用到每个 li 的伪元素身上。
2、怎么样实现一个过渡效果的动画呢？我们可以利用相对定位+决定定位，当li hover 的时候，下划线要从一侧运动展开。
所以，我们利用绝对定位，将 li 的伪元素的宽度设置为0，在 hover 的时候，宽度从 width: 0 -> width: 100%，OK 完美
3、左移左出，右移右出的问题怎么解决
如何让线条跟随光标的移动动作，实现当从导航的左侧 li 移向右侧 li，下划线从左往右移动。同理，当从导航的右侧 li 移向左侧 li，下划线从右往左移动
我们迫切需要一种方法，能够不改变当前 hover 的 li 的下划线移动方式却能改变它下一个 li 的下划线的移动方式（好绕口）。
这里我们可以借助 ~ 选择符，完成这个艰难的使命，对于当前 hover 的 li ，其对应伪元素的下划线的定位是 left: 100%，而对于 li:hover ~ li::before，它们的定位是 left: 0
<ul> <li>奇妙的CSS</li> <li>导航栏</li> <li>前端</li> <li>CSS3</li> <li>Javascript</li> </ul>
ul { display: flex; position: absolute; width: 800px; top: 30%; left: 50%; transform: translate(-50%, -50%); } li { position: relative; padding: 20px; font-size: 24px; color: #000; line-height: 1; transition: 0.2s all linear; cursor: pointer; list-style: none; } li::before { content: ""; position: absolute; top: 0; left: 100%; width: 0; height: 100%; border-bottom: 2px solid #000; transition: 0.2s all linear; } li:hover::before { width: 100%; top: 0; left: 0; transition-delay: 0.1s; border-bottom-color: #000; z-index: -1; } li:hover ~ li::before { left: 0; } li:active { background: #000; color: #fff; }
这就是css3之魅力
标签：flex sla abs 绝对定位 ack 一个 isp width :active
原文地址：https://www.cnblogs.com/zhangyongl/p/8859026.html
