[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 ...
随机推荐
- Hexo博客主题优化
Hexo博客主题优化 添加背景图 在 themes/*/source/css/_custom/custom.styl 中添加如下代码: body{ background:url(/images/bg. ...
- flash中调用XML遇到的中文显示异常问题
昨天使用flash调用XML文件进行显示时,出现了中文无法显示的问题,记录一下解决方法: 1.字体设置: 一般flash里的动态文本和嵌入文本都是默认的使用Arial字体,这个字体里可能没有中文,所以 ...
- Kubernetes 笔记 02 demo 初体验
本文首发于我的公众号 Linux云计算网络(id: cloud_dev),专注于干货分享,号内有 10T 书籍和视频资源,后台回复「1024」即可领取,欢迎大家关注,二维码文末可以扫. 从前面的文章我 ...
- Java 11 已发布，String 还能这样玩！
在文章<Java 11 正式发布,这 8 个逆天新特性教你写出更牛逼的代码>中,我有介绍到 Java 11 的八个新特性,其中关于 String 加强部分,我觉得有点意思,这里单独再拉出来 ...
- spring boot -thymeleaf-异常处理
异常流程 :controller-ControllerAdvice-异常解析器-默认的error页面 1.错误页面error.html: 程序出现异常会自动跳到error.html里,视频效果,该页面 ...
- App 性能相关
51Testing系列丛书:性能测试学习笔记之 LoadRunner实战 http://www.51testing.com/html/38/n-3723938.html
- 减少重复代码的书写--Lombok
本文版权归 远方的风lyh和博客园共有,欢迎转载,但须保留此段声明,并给出原文链接,谢谢合作. 在开发中,比如我们要写一个modol 实体类 要编写 get.set 这些获取和填值的方法,这样写也没错 ...
- MySQL模糊匹配查询like、regexp、in
MySQL提供标准的SQL模式匹配,以及一种基于像Unix实用程序,如:vi.grep和sed的扩展正则表达式模式匹配的格式 一.SQL模式(% ,_) SQL的模式匹配允许你使用“_”匹配任何单个字 ...
- 【ASP.NET MVC系列】浅谈ASP.NET MVC资源过滤和授权
最近比较忙,博客很久没更新了,很多博友问何时更新博文,因此,今天就花了点时间,写了本篇文章,但愿大家喜欢. 本篇文章不适合初学者,需要对ASP.NET MVC具有一定基础. 本篇文章主要从ASP.NE ...
- TensorFlow中的Placement启发式算法模块——Placer
背景 [作者:DeepLearningStack,阿里巴巴算法工程师,开源TensorFlow Contributor] 受限于单个Device的计算能力和存储大小,许多深度学习模型都有着使用模型分片 ...