[HTML/CSS]导航栏的下划线跟随效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>纯CSS导航栏下划线跟随效果</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
html,
body{
width: 100%;
height: 100%;
}
ul{
display: flex;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
li{
position: relative;
padding: 1em 2em;
font-size: 24px;
list-style: none;
white-space:nowrap;
}
li::after{
content: '';
position: absolute;
bottom: 0;
width: 0;
height: 2px;
background-color: #000;
transition: .5s all linear;
}
li:hover::after{
width: 100%;
}
li::after{
left: 100%; /*选中项上一个下划线收回的方向，从左往右收线*/
}
li:hover::after{
left: 0; /*选中项下划线出线的方向，从左往右出线*/
}
li:hover ~ li::after {
left: 0; /*选中项下一个下划线出线的方向，从左往右收线*/
}
</style>
<body>
<ul>
<li>纯CSS导航栏</li>
<li>导航菜单项</li>
<li>被划过</li>
<li>下划线跟随</li>
</ul>
</body>
</html>
[HTML/CSS]导航栏的下划线跟随效果的更多相关文章
- 不可思议的纯CSS导航栏下划线跟随效果
先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...
- css实现导航栏下划线跟随效果
话不多说先附上代码 <style> ul li { float: left; display: block; list-style: none; margin-left: 20px; bo ...
- 纯css导航下划线跟随效果【转载】
css: ul { display: flex; position: absolute; width: 800px; top: 50%; left: 50%; transform: translate ...
- android实现对导航Tab设置下划线选中效果
技术人员核心竞争力还是技术啊.努力提高各种实现效果.加油哦! 直接看效果.此linearLayout只有两个Button ,当选中Button1,Button1有个下划线选中效果.当选中Buton2, ...
- 奇妙的CSS3—导航栏下划线跟随效果
先来看一下效果: 1.基本效果就是这样的 ,鼠标悬停,下划线划入.鼠标离开,下划线划出 2.下划线的划入是有方向的,从左侧划入悬停,下划线由左向右伸长.从右侧划入,下划线由又往左伸长 实现思路 1.导 ...
- CSSTab栏下划线跟随效果
神奇的 ~ 选择符 对于当前 hover 的 li ,其对应伪元素的下划线的定位是 left: 100%,而对于 li:hover ~ li::before,它们的定位是 left: 0. ul li ...
- day19—纯CSS实现菜单列表下框跟随效果
转行学开发,代码100天——2018-04-04 今天看到一篇介绍利用CSS实现列表下跟随效果的设计文章,如下图,当鼠标滑过列表项时,要求该项内容下的黑色下边框线实现同方向的跟随移动. 其中,列表内容 ...
- 纯CSS导航栏下划线跟随效果
参考文章 <ul> <li>111</li> <li>2222</li> <li>3333333</li> < ...
- 纯css导航栏下划线
.nav-underline > *{/* 指定容器,里面可以是li.span等多样化的元素 */ display: inline-block; margin: -3px; padding: 1 ...
随机推荐
- 基于nodemailer使用阿里云企业邮箱发送邮件（526错误的解决）
在虽然日常生活中,QQ,微信等即时聊天工具几乎主导了人们的生活,但是邮件依然是现代生活不可缺少的一部分.这篇文章主要讲述使用node.js 中的nodemail模块操作阿里云的企业邮箱发送邮件 (52 ...
- Android自定义控件总结
自定义控件分类: 1.使用系统控件,实现自定义的效果 2.自己定义一个类继承View ,如textView.ImageView等,通过重写相关的方法来实现新的效果 3.自己定义一个类继承ViewGro ...
- 四面美团，收割 offer
阅读本文大概需要 6 分钟. 来源:https://blog.csdn.net/csuliyajin2012/article/details/49430659 美团我是在拉勾网上投的简历,之前也投过一 ...
- [Postman]排除API请求(9)
可能存在API无法运行或出现意外行为的情况.如果您没有收到任何回复,邮递员将显示有关连接服务器时出错的消息. 有关错误可能原因的更多详细信息,请打开Postman Console.它有关于故障的详细信 ...
- jupyter notebook的安装与基本操作
0.前言 最近正在重温Python基础知识,为了方便练习敲代码,于是选择安装jupyter notebook作为代码编辑器. Project Jupyter exists to develop ope ...
- ubuntu默认的Python版本号修改
ubuntu默认的Python是2.7版本的,键入Python3 就可以使用Python3.X版本.下面修改默认的Python版本, 1.删除/usr/bin 下的Python链接 sudo rm / ...
- hbase之InitMetaProcedure流程
hbase中相关命令行操作在服务端都是由相应的Procedure来执行完成的,并不是一个单独的操作,而是由其状态机中的一系列状态按照流程来完成的.特别的,我这次本着有图有真相的原则来为大家分析这一流程 ...
- Java核心技术及面试指南 JDBC部分的面试题总结以及答案
5.5.1 你最近的项目里用到的是哪个数据?或你用过哪些数据库?或你对哪个数据库最熟悉? 通过这个问题,我们将会确认候选人是否在项目里用过数据库或JDBC. 5.5.2 你有没有建过表?或修改表里的字 ...
- logstash解耦之redis消息队列
logstash解耦之redis消息队列 架构图如下: 说明:通过input收集日志消息放入消息队列服务中(redis,MSMQ.Resque.ActiveMQ,RabbitMQ),再通过output ...
- Maven三种仓库的配置
转自:https://www.cnblogs.com/jack1995/p/6925879.html Maven三种仓库的配置 1 本地仓库的配置 在第一篇中我们介绍过,Maven的仓库有三类,这里不 ...