一文写出基于css3的底部导航栏效果 点击关注公众号，技术干货及时送达 准备工作 ?这篇文章对基本的样式进行了设置，首先在html部分设置了一个叫nav的div，推荐大家语义化来写不要学我这种，然后进行基本的默认样式的清除，并且设置box为iebox方便后续的计算，整体都设置为弹性盒，方便后续矢量文字的操作，对导航栏导航进行定位，方便后续位置上的操作 ?图片.png body !--目前就一个简单的nav，推荐大家语义化来写-- divclass="nav"/div /body style /*清除一些默认样式*/ *{ margin:0; padding:0; box-sizing:border-box; list-style:none; } a{ text-decoration:none;/*确保在浏览器中显示链接时，没有任何文本装饰，如下划线。*/ } /*对整体进行设置，并且都设置为弹性盒，方便进行操作*/ body{ display:flex; justify-content:center; align-items:center; min-height:100vh; background:#222327; } /*设置导航栏样式*/ .nav{ /*对导航栏位置进行定位处理，方便后续的图标位置的设置*/ position:relative; width:400px; height:70px; background:#fff; display:flex; justify-content:center; align-items:center; border-radius:10px; } /style 引入矢量文字?这里面引用了阿里巴巴的矢量文字效果，具体如何使用请见https://www.iconfont.cn/manage/index?spm=a313x.7781069.1998910419.23&manage_type=myprojects&projectId=4173165里面的教程，搬运我挑了五个字体图标加入到了网页中，并且用ul和lil加入到了导航栏，目前是竖着排列的，后续加入css样式之后就会好起来，并且在第一个li上加入了active的css样式，用于设置选中效果 ?图片.png图片.pnglinkrel="stylesheet"href="//at.alicdn.com/t/c/font_4173165_2g4t5a6pg9v.css" divclass="nav" ul liclass="active"spaniclass="iconfonticon-shouye"/i/span/li lispaniclass="iconfonticon-liuyan"/i/span/li lispaniclass="iconfonticon-code"/i/span/li lispaniclass="iconfonticon-box-empty"/i/span/li lispaniclass="iconfonticon-gitee-fill-round"/i/span/li /ul /div 对导航栏和ui li字体图标进行设置?这里面呢针对ul和li进行了设置，使之达到了图下的效果，对ul和li进行了弹性盒的设置，li中的使用flex：1让这些向量文字按等份划分容器宽度，使之达到了一个距离平均的样式，并设置了这个zindex的最高级别 ?图片.png.nav{ /*对导航栏位置进行定位处理，方便后续的图标位置的设置*/ position:relative; width:400px; height:70px; background:#fff; display:flex; justify-content:center; align-items:center; border-radius:10px; } .navul{ display:flex; width:350px; } .navulli{ height:60px; /*flex:1是让所有的li平均分nav这个容器*/ flex:1; position:relative; z-index:2; display:flex; justify-content:center; } 继续设置i元素和span元素?这里呢针对了span元素和i元素进行了设置，通过span元素蒋i元素中的向量图标设置到水平都居中角的位置，并且设置了圆，加入了动画和动画延迟，针对i元素将文字大小设置了，并且在html中加入了对应图标的文字效果，并且就像在li每个元素中都添加了一个选中时的不同颜色，使用了变量--clr用于获取选中效果行内样式是一种直接在HTML元素上指定样式的方法，在这种情况下，你使用样式属性将--clr变量设置不同的颜色 ?.navullispan{ /*进行定位，使之通过span元素带动矢量图标进行水平垂直到中心位置*/ position:relative; display:flex; justify-content:center; align-items:center; width:55px; height:55px; border-radius:50%; /*设置鼠标移入的样式*/ cursor:pointer; /*设置动画过度事件以及延迟*/ transition:0.5s; transition-delay:0s; } .navullispani{ color:#222327; font-size:1.5em; } body !--目前就一个简单的nav，推荐大家语义化来写-- divclass="nav" ul !--设置active效果，用于获取选中效果用于获取选中效果行内样式是一种直接在HTML元素上指定样式的方法，在这种情况下，你使用style属性将--clr变量设为不同色-- liclass="active"style="--clr:#f44336"spaniclass="iconfonticon-shouye"/i首页/span/li listyle="--clr:#0fc70f"spaniclass="iconfonticon-liuyan"/i留言/span/li listyle="--clr:#2196f3"spaniclass="iconfonticon-code"/i代码/span/li listyle="--clr:#b145e9"spaniclass="iconfonticon-box-empty"/i盒子/span/li listyle="--clr:#ffa111"spaniclass="iconfonticon-gitee-fill-round"/igitee/span/li divclass="indicator"/div /ul /div /body 图片.png下面设置选中时候的样式，在这里呢针对span元素设置了选中的时候会向上传播到这个地方，并且在矢量图标的地方设置了原来开始选中的时候将文字颜色和颜色颜色相同的颜色，这样当点击的那一刻，图标会出现消失的情况，当超出导航栏到黑色部分的时候，文字就会显示出来，在后面，设置了一个半圆的背景图，当背景图到文字的位置的时候，矢量文字就会显示出来/*下面是针对选中效果做的样式处理*/ .navulli.activespan{ /*设置了一开始的背景颜色，后面会被取代，设置了点击的时候会向上移动*/ background:orange; transform:translateY(-27px); transition-delay:0.25s; } .navulli.activespani{ /*设置了点击时候矢量图标的文字颜色*/ color:#fff; } 图片.png设定模糊效果?这里呢加入了一个模糊的效果，配合后面的选中的形成的时候图标颜色显示会一个相似色彩过度的效果，并且将i元素上面设置的颜色显示出来 ?.navullispan::before{ content:''; position:absolute; top:10px; left:0; width:100%; height:100%; background:orange; border-radius:50%; filter:blur(40px); opacity:0; transition:0.5s; transition-delay:0s; } .navullispan::before{ opacity:0.5; transition-delay:0.25s; } /*这里将i元素设置的颜色显示出来这两个样式块中都使用了 background: var(--clr);属性，可以将背景颜色设置为clr 变量所表示的值。这种使用自定义变量的方式，可以在代码中统一定义颜色值，以便在需要时进行统一更改。*/ .navulli.activespan{ background:var(--clr); } .navullispan::before{ background:var(--clr); } 图片.png接下来设置背景圆?这里呢设置了背后的上一代突兀的圆，其原理是通过位置的调整以及颜色与背景颜色的一致再加上zindex的图册优先级的显示，构成了这么一个半圆形的背景图 ?.indicator{ /*这里进行了定位，并且设置了背景园的位置，同时将圆的背景颜色与背景颜色设为一致，会形成那种向下突兀的圆形，并且加入了动画 ps：这个过度的小圆弧我是真设置不好，凑合看吧，大佬们有能力的可以试试设置一下*/ position:absolute; top:-35px; width:70.5px; height:70px; background:#222327; border-radius:50%; z-index:1; transition:0.5s; } /*设置左边半弧*/ .indicator::before{ content:''; position:absolute; top:16px; left:-34px; width:10px; height:5px; background:transparent; border-radius:50%; box-shadow:20.5px19px04px#fff; } /*设置右边半弧*/ .indicator::after{ content:''; position:absolute; top:16px; left:54px; width:10px; height:5px; background:transparent; border-radius:50%; box-shadow:20px19px04px#fff; } 图片.png****动画设置，配合js形成点击的时候，active会移动到点击的目标身上?这里呢使用了nth-child选择器选中了对应的i元素，注意，这里设置的平移效果是由clac函数计算而来，选中其中一个i元素，并且当且仅当活跃类之后的所有兄弟中的.指标类元素，有一个缓慢元素（.indicator）。缓慢的位置会根据活动项目（带有active类的元素）的位置进行调整。根据活动项目的位置设置缓慢的水平平移距离，在导航菜单中实现一个中显示当前选中项目的效果。此时的位置和平移距离是根据活动项目的索引和固定的长度单位（70px）进行计算的。 ?/*/*nth-child()选中低某个i元素，然后配合js完成背景圆的移动 在CSS中，calc()是一个用于执行计算的函数。它允许在CSS属性值中使用数学表达式。 这种计算函数通常用于允许动态计算和调整元素的尺寸、间距或位置。在 calc()函数中，可以使用不同的运算符（如加号+、减号-、乘号*、除号/）来结合数值和单位进行计算。 它可以包含其他长度单位（如像素 px、百分比%等），并且可以与其他CSS属性值和变量一起使用。 当一个``元素具有`active`类时，对应的`.indicator`元素会相对于活动项目的位置水平平移一个特定的距离。每个`.indicator`元素的平移距离相对于其前面的活动项目索引和一个固定的长度单位（`70px`）计算得出。 */*/ .navli:nth-child(1).active~.indicator{ transform:translateX(calc(70px*0)); } .navli:nth-child(2).active~.indicator{ transform:translateX(calc(70px*1)); } .navli:nth-child(3).active~.indicator{ transform:translateX(calc(70px*2)); } .navli:nth-child(4).active~.indicator{ transform:translateX(calc(70px*3)); } .navli:nth-child(5).active~.indicator{ transform:translateX(calc(70px*4)); } 这里配合js代码，通过foreach为点击的li或者为所有的li进行添加或者移入active样式 script //通过`lis.forEach(li = li.addEventListener('click', function (){...}))`遍历`lis`数组中的每个元素，并为每个元素都添加一个‘click’事件监听器。 //在每次点击事件中，使用`lis.forEach(item={...})`遍历`lis`数组中的每个元素，将它们的`active`类都移除，然后在当前被点击的元素上添加`active`类， constlis=document.querySelectorAll('.navli') lis.forEach(li=li.addEventListener('click',function(){ lis.forEach(item={ item.classList.remove('active'); this.classList.add('active'); }) })) /script 图片.png效果展示ezgif.com-视频到-gif.gif总结这里fightjs使用的动画是值得我学习的，通过js点击赋予不同的liactive风格，又根据active所在的li元素经过计算对.indicator元素进行平移，使得之完成这个动画效果 已上传至gitee https://gitee.com/wu-canhua/bottom-navigation 如果文章对你有帮助的话欢迎 「关注+点赞+收藏」 阅读原文