【5分钟代码练习】01—导航栏鼠标悬停效果的实现

作者 | 杨小二

前言

畅销书《异类》的作者格拉德威尔告诉我们&＃xff0c;人们眼中的天才之所以卓越非凡&＃xff0c;并非天资超人一等&＃xff0c;而是付出了持续不断的努力&＃xff0c;只要经过1万小时的锤炼&＃xff0c;任何人都能从平凡变成超凡。

因此&＃xff0c;我们在提升自己技能&＃xff0c;不断精进的路上&＃xff0c;刻意练习起到了非常大的作用。而面对编程&＃xff0c;如何习得这样的专业技能&＃xff0c;请多动手多练习。

如果你觉得每天练习一个小时&＃xff0c;半个小时&＃xff0c;时间太长&＃xff0c;那么&＃xff0c;我们就先从每天5分钟开始做起。

所以&＃xff0c;我们大家一起&＃xff0c;从每天5分钟练习开始&＃xff0c;每天实现一个效果。一个月就可以练习30个效果&＃xff0c;一年就是365个效果&＃xff0c;如果能够坚持练习两年&＃xff0c;前端技术领域的很多常用效果&＃xff0c;你都会了。

从今天开始&＃xff0c;敲下你的第一行代码。

从今天开始&＃xff0c;每天坚持学习5分钟&＃xff0c;实现一个简单的效果。

案例效果

这是最终实现的效果&＃xff0c;因为&＃xff0c;我是用软件录制的GIF动画&＃xff0c;所以效果不是那么流畅。

要点解析

1. 在列表项锚点处使用 :before 伪元素创建悬停效果&＃xff0c;使用 transform: scale(0) 隐藏它。

2. 使用 :hover 和 :focus 伪类选择器转换到 transform: scale(1) 并显示带有彩色背景的伪元素。

3. 使用a:hover伪类对文字颜色进行设置。

4. 使用 z-index 防止伪元素覆盖锚元素。

案例代码

HTML代码&＃xff1a;

CSS代码&＃xff1a;

.hover-nav ul {list-style: none;margin: 0;padding: 0;overflow: hidden;
}
.hover-nav li {float: left;
}
.hover-nav li a {position: relative;display: block;color: #222;text-align: center;padding: 8px 12px;text-decoration: none;z-index: 0;
}
.hover-nav li a:hover {color: #fff;
}
li a:before {position: absolute;content: "";width: 100%;height: 100%;bottom: 0;left: 0;background-color: #1ab1cc;z-index: -1;transform: scale(0);transition: transform 0.5s ease-in-out;
}
li a:hover:before,
li a:focus:before {transform: scale(1);
}


完整代码如下&＃xff1a;

写在最后

关于这个5分钟代码练习的灵感&＃xff0c;主要是来源于我在极客时间上购买的一个课程《如何成为学习高手》&＃xff0c;作者高冷冷分享了很多她学习时候的一些方法&＃xff0c;其中&＃xff0c;里面有一个5分钟克服拖延症的方法。快速开始&＃xff0c;坚持5分钟&＃xff0c;5分钟后&＃xff0c;你可以再进行其他事项。

所以&＃xff0c;从今天开始&＃xff0c;也希望你能坚持每天学习5分钟&＃xff0c;然后慢慢把学习时间加长&＃xff0c;让自己成为一个学习高手。加油吧&＃xff0c;少年。

最后&＃xff0c;今天这个效果&＃xff0c;你都学会了吗&＃xff1f;如果还不会&＃xff0c;请自行多练习几遍。

在此&＃xff0c;感谢你的阅读。我是杨小二&＃xff0c;我们下次再见。

学习更多技能

请点击下方公众号