昨天在聊天群里看见有人问,鼠标划过,文字下方横线从左向右划过怎么实现?作为初学前端的我页忍不住想要试一试自己能否实现这样的效果,当然用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%)的方法来水平居中的话,它的中间点却始终位于它父元素的中间点,这样出来的效果就是,鼠标移上去后,横线是自中间向两边延长的效果;如下图为三个时间段横线长度的变化图,横线应该是同一个位置,只是为了方便而花了三个不同的位置,它是自中间向两边拓展延长。
好了,就分享到这里,其实也算上分享吧,只是自己作为笔记总结一下吧,一定还有很多其它的简便方法。
其实我很想研究下内部的原理什么的,但是自己现在时间有限,等以后接触的更多了,再来研究原理的问题比较好,我们的大学老师告诉我们,编程开始要大气的学,之后再深入学。
如果觉得《html 鼠标经过出现横线 CSS实现鼠标经过 文字下方横线划过特效》对你有帮助,请点赞、收藏,并留下你的观点哦!