使用css实现导航下方线条随导航移动效果
HTML部分
<ul>
<li><a href="">第一条</a></li>
<li><a href="">第二条</a></li>
<li><a href="">第三条</a></li>
<li><a href="">第四条</a></li>
<li><a href="">第五条</a></li>
</ul>
CSS部分
ul {
display: flex;
position: absolute;
width: 800px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
} li {
position: relative;
padding: 20px;
font-size: 24px;
color: #000;
line-height:;
transition: 0.2s all linear;
cursor: pointer;
} li::before {
content: "";
position: absolute;
top:;
left: 100%;
width:;
height: 100%;
border-bottom: 2px solid #000;
transition: 0.2s all linear;
} li:hover::before {
width: 100%;
top:;
left:;
transition-delay: 0.1s;
border-bottom-color: #000;
z-index: -1;
} li:hover ~ li::before {
left:;
} li:active {
background: #000;
color: #fff;
}
减效是这样,具体好看的样式还是要自己动动小手
使用css实现导航下方线条随导航移动效果的更多相关文章
- CSS水平导航条和纵向导航条
问题描述: 使用CSS制作水平导航条和纵向导航条 问题解决: (1)水平导航条 1.1 效果预览: 1.2 ...
- [HTML/CSS]导航栏的下划线跟随效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- amazeui学习笔记--css(常用组件10)--导航条Topbar
amazeui学习笔记--css(常用组件10)--导航条Topbar 一.总结 1. 导航条:就是页面最顶端的导航条:在容器上添加 .am-topbar class,然后按照示例组织所需内容.< ...
- amazeui学习笔记--css(常用组件9)--导航nav
amazeui学习笔记--css(常用组件9)--导航nav 一.总结 1.导航基本使用:<ul> 添加 .am-nav class 以后就是一个基本的垂直导航.默认样式中并没有限定导航的 ...
- bootstrap基础学习【导航条、分页导航】(五)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果
查看本章节 查看作业目录 需求说明: 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果 用户将光标移动到"最新动态页"或"帮助查询" ...
- iOS开发——实用技术OC篇&8行代码教你搞定导航控制器全屏滑动返回效果
8行代码教你搞定导航控制器全屏滑动返回效果 前言 如果自定了导航控制器的自控制器的leftBarButtonItem,可能会引发边缘滑动pop效果的失灵,是由于 self.interactivePop ...
- 【iOS开发-21】UINavigationController导航控制器初始化,导航控制器栈的push和pop跳转理解
(1)导航控制器初始化的时候一般都有一个根视图控制器,导航控制器相当于一个栈,里面装的是视图控制器,最先进去的在最以下,最后进去的在最上面.在最上面的那个视图控制器的视图就是这个导航控制器对外展示的界 ...
- [vue]声明式导航和编程式导航
声明式导航和编程式导航 共同点: 都能进行导航,都可以触发路由,实现组件切换 区别: 写法不一样,声明式导航是写在组件的template中,通过router-link来触发,编程式导航写在js函数中, ...
随机推荐
- 关于git的认知
Git,官方的解释为一个开源的分布式版本控制系统,可以有效.高速地处理从很小到非常大的项目版本管理.是一个开放源码的版本控制软件. 就个人而言,这是一种不同开发者之间的代码交流.合并的途径,进而完成目 ...
- 21 (OC) 数据持久化
概论 所谓的持久化,就是将数据保存到硬盘中,使得在应用程序或机器重启后可以继续访问之前保存的数据.在iOS开发中,有很多数据持久化的方案,接下来我将尝试着介绍一下5种方案: plist文件(属性列表) ...
- Elasticsearch(9) --- 聚合查询(Bucket聚合)
Elasticsearch(9) --- 聚合查询(Bucket聚合) 上一篇讲了Elasticsearch聚合查询中的Metric聚合:Elasticsearch(8) --- 聚合查询(Metri ...
- [VB.NET Tips]赋值运算千万要注意
赋值运算符是一个语句,不能在表达式中使用,表达式中的等号表示相等而不是赋值. 上示例: Dim x As Integer Dim y As Object x = 5 y = x = 5 Console ...
- DOM之节点操作
DOM提供了很多实用的API,这些API让我们可以轻松的访问HTML文档.所谓API(应用程序接口),简单来说,就是让我们可以直接使用它访问程序的一些属性或方法,而不用了解程序内部的运作过程和原理. ...
- 在vue中使用[provide/inject]实现页面reload
在vue中实现页面刷新有不同的方法: 如:this.$router.go(0),location.reload()等,但是或多或少会存在问题,如页面会一闪等 所以建议使用[provide/inject ...
- [python]汉诺塔问题
相传在古印度圣庙中,有一种被称为汉诺塔(Hanoi)的游戏.该游戏是在一块铜板装置上,有三根杆(编号A.B.C),在A杆自下而上.由大到小按顺序放置64个金盘(如下图).游戏的目标:把A杆上的金盘全部 ...
- SpringCloudEureka入门
说明 SpringBoot版本 2.1.7.RELEASE SpringCloud版本 Greenwich.SR2 创建eureka server工程 加入pom依赖 <dependencies ...
- jenkins+ant构建项目时候build.xml需要改动的地方说明
上一节将build.xml文件代码列出来了,这一节给出说明,要想使用该文件,需要变更的地方有哪些.
- Python sys.setdefaultencoding('utf-8') 后就没输出
为了解决Python的 UnicodeDecodeError: 'ascii' codec can't decode byte ,我们可以加入以下代码. import sys reload(sys) ...