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

作者 | 杨小二

前言

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

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

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

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

从今天开始，敲下你的第一行代码。

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

案例效果

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

要点解析

在列表项锚点处使用 :before 伪元素创建悬停效果，使用 transform: scale(0) 隐藏它。
使用 :hover 和 :focus 伪类选择器转换到 transform: scale(1) 并显示带有彩色背景的伪元素。
使用a:hover伪类对文字颜色进行设置。
使用 z-index 防止伪元素覆盖锚元素。

案例代码

HTML代码：

<nav class="hover-nav"><ul><li><a href="http://www.webqdkf.com/">首页</a></li><li><a href="http://www.webqdkf.com/HTML/">HTML/CSS</a></li><li><a href="http://www.webqdkf.com/JS/">JavaScript</a></li></ul>
</nav>

CSS代码：

.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);
}

完整代码如下：

<html>
<head><style type="text/css">.hover-nav ul {list-style: none;margin: 0;padding: 0;overflow: hidden;}.hover-nav ul 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);
}
</style>
</head>
<body>
<nav class="hover-nav"><ul><li><a href="http://www.webqdkf.com/">首页</a></li><li><a href="http://www.webqdkf.com/HTML/">HTML/CSS</a></li><li><a href="http://www.webqdkf.com/JS/">JavaScript</a></li></ul>
</nav>
</body>
</html>

写在最后

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

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

最后，今天这个效果，你都学会了吗？如果还不会，请自行多练习几遍。

在此，感谢你的阅读。我是杨小二，我们下次再见。

学习更多技能

请点击下方公众号

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

bootstrap 导航栏鼠标悬停显示下拉菜单
在jsp中加入一下代码: .navbar .nav > li:hover .dropdown-menu { display: block; } 全部代码如下所示: <%@ page lan ...
bootstrap4.3.1 导航栏鼠标悬停下拉显示
在css中加入以下代码即可:
CSS - 鼠标移入悬停显示下拉菜单（导航栏鼠标经过 hover 时出现二级菜单）
前言该效果很常见,网上的代码都非常的乱,样式改起来非常难受. 本文提供 "最简洁" 的解决方案与干净整洁的代码,一眼看过去就知道改哪里, 配合 Vue.js 项目非常合适,如下图 ...
HTML+CSS 主页面美化的详细过程及全部代码（美化导航栏+文本框+按钮）
文章目录效果图展示前言步骤 0.创建css文件 1.美化中间板块 1.1 html改变 1.2. css部分 1.3. placeholder美化 2.增加导航栏 2.1 html文件增加代码 ...
如何用最简洁的css代码写一个导航栏
如何用最简洁的css代码写一个导航栏首先我们在里面通过标签添加一个logo,然后通过标签简单的设置几个导航栏中的内容. 注:标签主要是用于设置超链接. <div><img src= ...
Js鼠标悬停事件，简单的实现导航栏鼠标划过内容弹窗的效果。可读性较高的鼠标悬停事件
Js鼠标悬停事件,简单的实现导航栏鼠标划过内容弹窗的效果.可读性较高的鼠标悬停事件 <!DOCTYPE html> <html lang="en"> < ...
layui导航栏鼠标经过青色条块怎么移到顶部？
layui导航栏鼠标经过青色条块怎么移到顶部? layui-nav-bar怎么移到导航栏的顶部? 青色条块其实就是在鼠标经过时会变成,所以,如果我们把top:111px变成top:0,青色条块就可以移 ...
php点击切换图片的底部导航,如何优雅地使用BottomNavigationView实现底部导航栏+fragment切换效果...
BottomNavigationView.jpeg 引言之前总是使用RadioButton+ViewPager来实现底部导航栏+fragment切换效果,总是繁琐地还需要写ViewPager的适配器 ...
底部导航栏的凸起效果
微信小程序开发教程.开发教学本视频为1-1号视频,做出了底部导航栏的凸起效果第一次做视频,希望大家多多支持- 组件源码+项目源码: 链接:https://pan.baidu.com/s/1EkZx ...

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

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

最新文章

热门文章