利用元素向左移动的同时,宽度变长,实现两边延伸效果。

react代码:

      <ul className="tab">
{
moduleList.map((item: any, index: number) => {
return (<li key={item.mkId} data-index={index} className={isSelect === index ? 'active' : ''}
onClick={(e) => handleLiClick(e, item)}>
<span>{item.mkMc}</span>
</li>)
})
}
<li className={isSelect === -1 ? 'active' : ''} onClick={handleEditLiClick}>
<img src={getImgUrl('edit.svg')} alt="编辑我的功能模块" width={20} style={{ marginRight: 20 }}/>
<span>编辑</span>
</li>
</ul>

CSS样式:

.tab {
width: 100%;
display: flex;
list-style: none;
height: 100%;
margin-bottom: 0;
padding-inline-start: 0;
margin-block-start: 0;
margin-block-end: 0;
} .tab li {
position: relative;
display: flex;
flex: 1;
justify-content: center;
align-items: center;
cursor: pointer;
} .tab li span {
font-size: 18px;
font-weight: 600;
} .tab li:after {
content: "";
position: absolute;
top: 100%;
left: 50%;
width: 0;
height: 3px;
background: #0a5fad;
transition: all 0.3s ease-out;
} .tab li.active:after {
left: 0;
transition: all 0.3s ease-out;
width: 100%;
} .listItem li {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
padding: 5px 10px;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s ease-out;
} .listItem li:hover {
color: #2966c1;
transition: all 0.3s ease-out;
background-color: #f1f4f9;
} .listItem li.active {
color: #2966c1;
transition: all 0.3s ease-out;
background-color: #f1f4f9;
}

CSS 导航栏底线向两边延伸动画的更多相关文章

  1. [HTML/CSS]导航栏的下划线跟随效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. CSS:CSS 导航栏

    ylbtech-CSS:CSS 导航栏 1.返回顶部 1. CSS 导航栏 导航栏 熟练使用导航栏,对于任何网站都非常重要. 使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单. 导航栏=链接 ...

  3. 4 CSS导航栏&下拉菜单&属性选择器&属性和值选择器

    CSS导航栏 熟练使用导航栏,对于任何网站都非常重要 使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单 垂直导航栏: <!DOCTYPE html> <html> & ...

  4. 不可思议的纯CSS导航栏下划线跟随效果

    先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...

  5. css导航栏

    几个导航栏也算对学过知识的回顾,总有新的收获,下面是学习过程中敲的代码: <!DOCTYPE HTML> <html> <head> <title>&l ...

  6. CSS 导航栏

    实例: 导航栏 Home News Articles Forum Contact About 导航栏 熟练使用导航栏,对于任何网站都非常重要. 使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜 ...

  7. 纯洁CSS实现下拉菜单和下拉容器(纯洁CSS导航栏和导航下拉容器)

    虽然网上课程似即使案件大同小异,但我还是写,记笔记,也为您提供参考 我希望你能指导批评~~ 首先,我们必须列出ul li 开始我们的导航栏菜单也能说生产: 在下面的页面,我们先建XHTML结构体: & ...

  8. 纯css导航栏下划线

    .nav-underline > *{/* 指定容器,里面可以是li.span等多样化的元素 */ display: inline-block; margin: -3px; padding: 1 ...

  9. PHP全栈开发(八):CSS Ⅹ 导航栏制作

    学习了这么久的CSS,我们现在也可以小试牛刀一下了,我们使用我们学会的CSS知识来制作一个导航栏. 我们都知道,在现代的导航栏里面,最普遍的就是使用无序列表来制作导航栏. 我们可以使用如下代码来制作一 ...

随机推荐

  1. HCNP Routing&Switching之MSTP

    前文我们了解了RSTP保护相关话题,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/16255918.html:今天我们来了解下MSTP相关话题: MSTP技术背 ...

  2. CSAPP 之 BombLab 详解

    前言 本篇博客将会展示 CSAPP 之 BombLab 的拆弹过程,粉碎 Dr.Evil 的邪恶阴谋.Dr.Evil 的替身,杀手皇后,总共设置了 6 个炸弹,每个炸弹对应一串字符串,如果字符串错误, ...

  3. PKUSC2022 游记

    PKUSC2022 游记 Day1 上午随便看了点题,感觉没看什么题就开考了. 开考之后先看 T1,发现 T1 好像不是那么简单. T1 : 九条可怜有两个账号,她每次都会打 \(\rm rating ...

  4. yolov2学习笔记

    Yolov2学习笔记 yolov2在yolov1的基础上进行一系列改进: 1.比如Batch Normalization,High Resolution Classifier,使用Anchor Box ...

  5. django框架6

    内容概要 神奇的双下划线查询 外键字段的创建 外键字段操作 多表查询 基于对象的跨表查询 基于双下划线的跨表查询 双下线查询扩展 如何查看SQL语句 内容详情 神奇的双下划线查询 1.查询年龄大于20 ...

  6. 入坑KeePass(三)安全设置完后后留存

    1.文件> 数据库设置 > 安全 迭代次数改成500000 2.工具 > 选项 2.1.安全 2.2.策略 2.3.集成 2.4高级

  7. JS:Array

    js有五种基本数据类型:string,number,boolean,null,undefined 一种引用类型,包括:1.Object类型:2.Function类型:3.Array类型:4.RegEx ...

  8. 安装typescript环境并开启VSCode自动监视编译ts文件为js文件

    一.前言 小编最近开始学习typescript,懂得人都知道,typescript是vue3的基础伴生,配合更加默契.就像vue2和js一样!typescript不像js那样浏览器直接可以解读,需要我 ...

  9. MongoDB 的内存使用限制

    本文将简述一下MongoDB的内存限制问题 1. 使用Docker限制 当我们使用docker创建mongo 容器时,可通过使用以下参数,对mongo可以使用的资源进行限制 内存限制 参数 简介 -m ...

  10. 详细图解 Netty Reactor 启动全流程 | 万字长文 | 多图预警

    本系列Netty源码解析文章基于 4.1.56.Final版本 大家第一眼看到这幅流程图,是不是脑瓜子嗡嗡的呢? 大家先不要惊慌,问题不大,本文笔者的目的就是要让大家清晰的理解这幅流程图,从而深刻的理 ...