使用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函数中, ...
随机推荐
- JsonConvert 转DateTime类型为json 带T
在调用接口的时候 将Model转换成json Datetime类型多了个T 用的是Newtonsoft.Json.dll 版本v4.5.0.0 代码:paramsjson = JsonConvert ...
- 建议收藏 - 专业的MySQL开发规范
为了项目的稳定,代码的高效,管理的便捷,在开发团队内部会制定各种各样的规范 这里分享一份我们定义的MySQL开发规范,欢迎交流拍砖 数据库对象命名规范 数据库对象 命名规范的对象是指数据库SCHEMA ...
- 利用Python制作二维码
利用简单的Python代码制作二维码 一.制作工具 安装Python环境 + PyCharm编译器. 二.电脑系统 本人win10 + Python3.7.0 + PyCharm. 三.写代码前先下载 ...
- 【Python笔记】Python变量类型
Python 变量类型 变量存储在内存中的值.这就意味着在创建变量时会在内存中开辟一个空间. 基于变量的数据类型,解释器会分配指定内存,并决定什么数据可以被存储在内存中. 因此,变量可以指定不同的数据 ...
- 配置文件my.cnf---配置信息注释大全
在进行MySQL与CM+CHD之间的应用配置时,发现此前对于MySQL的配置含义过于模糊,所以将CM+CHD集群所涉及MySQL方面的配置含义进行抽取并加以注释,方便此后的配置和使用. 一.客户端设置 ...
- C/C++ 中带空格字符串输入的一些小trick
今天在重温 C++ 的时候发现自己存在的一些问题,特此记录下来. 我们可以看一下下面这段代码: #include <iostream> #include <cstdio> #i ...
- 原创电子书《菜鸟程序员成长之路:从技术小白到阿里巴巴Java工程师》
<菜鸟程序员成长之路:从技术小白到阿里巴巴Java工程师> 国庆节快乐!一年一度长度排第二的假期终于来了. 难得有十一长假,作者也想要休息几天啦. 不管你是选择出门玩,还是在公司加班,在学 ...
- 十大排序算法JavaScript实现总结
花费了几周的时间断断续续的练习和模仿与使用JavaScript代码实现了十大排序算法. 里面有每种算法的动图和静态图片演示,看到图片可以自己先按照图片的思路实现一下. github中正文链接,点击查看 ...
- 第一篇:php开发环境
Window: 1.XAMPPhttps://www.apachefriends.org/index.html 2.WampServerhttp://www.wampserver.com/ Linux ...
- spring源码分析系列3:BeanFactory核心容器的研究
目录 @(spring源码分析系列3:核心容器的研究) 在讲容器之前,再明确一下知识点. BeanDefinition是Bean在容器的描述.BeanDefinition与Bean不是一个东西. Be ...