昨天在聊天群里看见有人问，鼠标划过，文字下方横线从左向右划过怎么实现？作为初学前端的我页忍不住想要试一试自己能否实现这样的效果，当然用JS实现确实简单，另外自己最近刚巩固了css3的一些新的过渡和动画特性的编程，所以再巩固一下也好，遂决定用CSS3的一些特性来写这个特效。

一开始为了最简单，我直接就是做好一个导航，ul > li  > a。 然后li左浮动布局。如下图所示:

(之前用flex布局，虽然能够自适应屏幕宽度，但是li元素的宽度也随之改变，导致以margin方式水平居中布局的方法失效，所以最后还是采用浮动布局，固定li宽度的方式布局)

具体要求: 鼠标悬浮在以上文字时，底部出现一条横线，横线从左到右变长。

说实话，不是老手，很多布局上的小点子真心想不到，只看书不写代码实践，思维永远难易开拓，不知变通，或许鄙人不适合编程也说不定，哈哈。。。。

好了，闲话不多说，大概布局的示意图如下:

具体布局的像素大小，就不写了。一开始我把焦点放在横线如何画出，首先考虑到盒子的属性border-bottom，居然没有想到盒子的宽度width，真是够low的。试想，利用边框如何实现变化过渡呢？当然首先设置好底边框，然后设置其宽度由0变到100%。间接实现了，想到这里，那不如就直接利用盒子的width更简单。但是，具体用到哪个盒子的宽度呢？并且盒子的宽度变化也要不影响周边元素的布局才行，那就只能用脱离文档流的元素了。于是，我想到了利用绝对定位的方法，新增一个元素，将其显示为块状元素，利用它的宽度由小变大的变化，实现下滑线的从左到右的变化。

代码如下: 在li下新增em标签

• 新品
• 折扣
• 惊喜
• 购物车

样式代码如下:

li{            flex: 1; width: 157px;            margin: 0 10px;            position: relative; float: left;        }

li>em {            position: absolute;            left: 50%;            bottom: 0;            margin: 0 -75px; //大家可以把本行注释掉，启用下一行的代码，效果会不一样            /* transform: translate(-50%); */        }        a{            display: inline-block;            height: 100%;            width: 100%;            text-align: center;            line-height: 40px; text-decoration: none; font-weight: 700; font-size:20px;        }

li:hover em{            animation: test 0.4s ease;            border: 1px solid red;            width: 100%;         }

@keyframes test { from{ width: 0; }

to{ width: 100%; }        }

这里让元素水平方向上居中的方法有两个，常用的为

position: absolue; left: 50%; margin: 0  -75px(父元素宽度的一半取负数);

还有就是CSS3的新特性translate();它可以让盒子在x和y方向上产生相应的变化，具体请看:点击打开链接

position: absolue; left: 50%;  transform: translateX( -50% );

虽然都是让元素居中，但是效果不一样，前者margin值的方法是一个固定的值，也就是-75px。所以，无论如何，em元素的左边启点位置在: 如下图所示: 它的效果则是从左往右宽度逐渐变长。

而后者translateX(-50%)的方法来水平居中的话，它的中间点却始终位于它父元素的中间点，这样出来的效果就是，鼠标移上去后，横线是自中间向两边延长的效果；如下图为三个时间段横线长度的变化图，横线应该是同一个位置，只是为了方便而花了三个不同的位置，它是自中间向两边拓展延长。

好了，就分享到这里，其实也算上分享吧，只是自己作为笔记总结一下吧，一定还有很多其它的简便方法。

其实我很想研究下内部的原理什么的，但是自己现在时间有限，等以后接触的更多了，再来研究原理的问题比较好，我们的大学老师告诉我们，编程开始要大气的学，之后再深入学。