[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 ...
随机推荐
- Android常用第三方支付
移动支付 用户使用移动的终端完成对所购买商品或者服务的支付功能;分为近场支付(蓝牙支付,刷卡,滴卡),和远程支付(网上支付,短信支付) app支付模块 常见的支付厂商-->常见的支付方式 支付宝 ...
- Oracle和Mysql语法异同整理笔记
目录 (1) 模糊匹配 (2) 删除数据 (3) 时间函数 (4) 关键字问题 (5) 递归查询 (6) 排序问题 (7) 空值返回0 (8) 取最大值 (9) 列转换函数 (10) 类型转行函数 @ ...
- CentOS7+Mono5.2.0.224 +Jexus5.8.3.0 布署 Asp.Net MVC (vs2017)
背景: 比起大神我们只是差远了,只知道一味的找找看,找的资料不少,但真不知道哪一个是正确的. 之前一个文章也写了怎么安装 Jexus 但始终只有是html的静态页面可以asp.net 都不行(http ...
- logstash收集TCP端口日志
logstash收集TCP端口日志官方地址:https://www.elastic.co/guide/en/logstash-versioned-plugins/current/index.html ...
- Linux编程 22 shell编程(输出和输入重定向，管道，数学运算命令，退出脚本状态码)
1. 输出重定向 最基本的重定向是将命令的输出发送到一个文件中.在bash shell中用大于号(>) ,格式如下:command > inputfile.例如:将date命令的输出内容, ...
- python中使用xlrd、xlwt和xlutils3操作Excel
简单试了下python下excel的操作,使用了xlrd.xlwt和xlutil3:xlrd可以实现excel的读取操作,xlwt则是写入excel操作,xlutils3主要是为了修改excel,简单 ...
- Ioc及Bean容器（三）
专题一 IoC 接口及面向接口编程 什么是 IoC Spring 的Bean配置 Bean 的初始化 Spring 的常用注入方式 接口 用于沟通的中介物的抽象化 实体把自己提供给外界的一种抽象化说明 ...
- Mybatis 事务管理
mybatis的事务和数据源有着非常密切的联系.上文讲述了mybatis的数据源,本文要讲述的便是mybatis的事物 1.事务的分类 我们还是已一段xml配置文件为例 <environment ...
- Java 代理模式
熟悉设计模式的人对于代理模式可能都不陌生.那什么事代理呢,例如我们要买一件国外的商品,但是自己买不到只能去找代购,这个代购就是我们的代理.我们来了解下java中的代理 静态代理 我们来举一个开车的例子 ...
- java 容器 集合 用法
Set,List,Map,Vector,ArrayList的区别 JAVA的容器---List,Map,Set Collection ├List │├LinkedList │├ArrayList │└ ...