如何用css实现水平导航栏下划线动画

上周 搞导航栏下划线动画。

2 02 3 年3 月 我用CSS伪元素+过渡搞的。

地点 公司工位。

数字 搞了3 个版本。

第一版 ::after伪元素。
初始宽度0。
hover宽度1 00%。
代码这样写。
.nav-link::after{...} content:''; width:0; transition:width 0.3 s ease; hover:width:1 00%; 效果是慢慢从左到右展开。

第二版 居中展开。
left和width一起动。
.nav-link::after{...} left:5 0%; width:0; transition:left 0.3 s ease, width 0.3 s ease; hover:left:0; width:1 00%; 像从中间掰开。

第三版 transform:scaleX。
性能最好。
.nav-link::after{...} transform:scaleX(0); transform-origin:center; transition:transform 0.3 s ease; hover:transform:scaleX(1 ); 不会重排。

关键点 1 . 必须用relative和absolute定位。
2 . 用width/transform/left。
3 . transform最流畅。

刚想到另一件事 旧浏览器要加前缀。

算了 你看着办。

如何用css实现固定底部导航栏

记得有一次做网站，页面底部导航栏总是跑偏，不是卡在内容中间，就是飘到页面外面。
那段时间，我每天盯着屏幕，就像盯着一堆乱麻，怎么也理不清。
后来，我决定放下手头的工作，去趟附近的咖啡馆，想找个清静的地方好好思考。
坐在窗边，点了一杯咖啡，看着窗外来来往往的行人，我突然想到，这不就像做网站一样，问题总是在不经意间出现，关键是要找到解决它的方法。

于是，我回到电脑前，重新审视了代码。
固定在页面底部的导航栏，核心是使用position:fixed定位，结合bottom:0和width:1 00%实现全屏贴底。
我试着调整了一下样式，发现导航栏确实稳固地贴在了底部。
再一看时间，已经过去了两个小时。
我接着优化了导航项的分布，调整了一下内边距，页面内容也跟着布局得更加整洁。

那天晚上，我成功实现了固定底部导航栏的功能。
看着页面底部的导航栏稳稳当当，心里也跟着踏实了不少。
等等，还有个事，我突然想到，如果导航项再多一些，会不会影响页面的加载速度呢？这个细节，我下次得好好研究一下。