css3随手写个底部导航栏效果，P8大佬恐怖如斯

行准备工作

这边对基本的样式进行了设置，首先在html部分设置了一个名为nav的div，随后进行基本的默认样式的清除，并且设置盒子为ie盒子方便后续的计算，整体都设置为弹性盒，方便后续矢量文字的操作，对导航栏nav进行定位，方便后续位置上的操作


<body>
    <!-- 目前就一个简单的nav，推荐大家语义化来写 -->
    <div class="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>

引入矢量文字

这里面呢引用了阿里巴巴的矢量文字效果，具体如何使用请见www.iconfont.cn/manage/inde… 里面的教程，这边我挑了五个字体图标加入到了网页中，并且用ul和lil加入到了导航栏中，目前是竖着排列的，后续加入css样式之后会好起来，并且在第一个li上加入了active的css样式，用于设置选中效果

<link rel="stylesheet" href="//at.alicdn.com/t/c/font_4173165_2g4t5a6pg9v.css">
    <div class="nav">
        <ul>
            <li class="active"> <span><i class="iconfont icon-shouye"></i></span></li>
            <li > <span><i class="iconfont icon-liuyan"></i></span></li>
            <li > <span><i class="iconfont icon-code"></i></span></li>
            <li > <span><i class="iconfont icon-box-empty"></i></span></li>
            <li > <span><i class="iconfont icon-gitee-fill-round"></i></span></li>
        </ul>
    </div>

对导航栏和ui li字体图标进行设置

这里面呢针对ul和li进行了设置，使之达到了图下的效果，对ul 和li进行了弹性盒的设置，li中的使用flex：1让这些矢量文字按等份划分容器宽度，使之达到了一个距离平均的样式，并且设置了这个zindex的叠加级别

    .nav{
        /* 对导航栏位置进行定位处理，方便后续的图标位置的设置 */
        position: relative; 
        width: 400px;
        height: 70px;
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 10px;
    }
    .nav ul{
        display: flex;
        width: 350px;
    }
    .nav ul li{
        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元素上指定样式的方法，在这种情况下，你使用 style 属性将 --clr 变量设为不同色

  .nav ul li span{
        /* 进行定位，使之通过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;
    }
    .nav ul li span i{
        color: #222327;
        font-size: 1.5em;
    }

<body>
    <!-- 目前就一个简单的nav，推荐大家语义化来写 -->
    <div class="nav">
        <ul>
            <!-- 设置active效果，用于获取选中效果 用于获取选中效果 行内样式是一种直接在HTML元素上指定样式的方法，在这种情况下，你使用 style 属性将 --clr 变量设为不同色 -->
            <li class="active" style="--clr:#f44336"><span><i class="iconfont icon-shouye"></i>首页</span></li>
            <li style="--clr:#0fc70f"> <span><i class="iconfont icon-liuyan"></i>留言</span></li>
            <li style="--clr:#2196f3"> <span><i class="iconfont icon-code"></i>代码</span></li>
            <li style="--clr:#b145e9"> <span><i class="iconfont icon-box-empty"></i>盒子</span></li>
            <li style="--clr:#ffa111"> <span><i class="iconfont icon-gitee-fill-round"></i>gitee</span></li>
            <div class="indicator"></div>
        </ul>
    </div>
</body>

下面设置选中时候的样式，在这里呢针对span元素设置了选中的时候会向上位移到这个地方，并且在矢量图标的地方设置了开始选中的时候将文字颜色改为和背景颜色一样的颜色，这样当点击的那一刻，图标会出现消失的情况，当超出导航栏到黑色部分的时候，文字就会显示出来，在后面，设置了一个半圆的背景图，当背景图位移到文字的位置的时候，矢量文字就会显示出来

/* 下面是针对选中效果做的样式处理 */
    .nav ul li.active span {
        /* 设置了一开始的背景颜色，后面会被取代，设置了点击的时候会向上移动 */
        background: orange;
        transform: translateY(-27px);
        transition-delay: 0.25s;
    }

    .nav ul li.active span i {
        /* 设置了点击时候矢量图标的文字颜色 */
        color: #fff;
    }

设置模糊效果

这里呢加入了一个模糊的效果，配合后面的选中的时候图标颜色显示会形成一个类似于色彩过度的效果，并且将i元素上面设置的颜色显示出来

    .nav ul li span::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;
    }
    .nav ul li span::before {
        opacity: 0.5;
        transition-delay: 0.25s;
    }
        /* 这里将i元素设置的颜色显示出来 这两个样式块中都使用了 background: var(--clr); 属性，可以将背景颜色设置为clr 变量所表示的值。这种使用自定义变量的方式，可以在代码中统一定义颜色值，以便在需要时进行统一更改。*/
       .nav ul li.active span {
        background: var(--clr);
    }

    .nav ul li span::before {
        background: var(--clr);
    }

接下来设置背景圆

这里呢设置了背后的那个向下突兀的圆，其原理是通过位置的调整和颜色的与背景颜色的一致加上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.5px 19px 0 4px #fff;
    }
/* 设置右边半弧 */
    .indicator::after {
        content: '';
        position: absolute;
        top: 16px;
        left: 54px;
        width: 10px;
        height: 5px;
        background: transparent;
        border-radius: 50%;
        box-shadow: 20px 19px 0 4px #fff;
    }

****动画设置，配合js形成点击的时候，active会移动到点击的目标身上

这里呢使用了nth-child选择器选中对应的i元素，注意，这里设置的平移效果是由clac函数计算而来，选中其中一个i元素，并且当且仅当具有active类之后的所有兄弟中的.indicator类元素，有一个指示器元素（.indicator）。指示器的位置会根据活动项目（具有active类的<li>元素）的位置进行调整。根据活动项目的位置设置指示器的水平平移距离，实现一个在导航菜单中显示当前选中项目的效果。指示器的位置和平移距离是根据活动项目的索引和固定的长度单位（70px）进行计算的

/*/* nth-child()选中低某个i元素，然后配合js完成背景圆的移动 
在CSS中，calc() 是一个用于执行计算的函数。它允许在CSS属性值中使用数学表达式。
这种计算函数通常用于允许动态计算和调整元素的尺寸、间距或位置。在 calc() 函数中，可以使用不同的运算符（如加号 +、减号 -、乘号 *、除号 /）来结合数值和单位进行计算。
它可以包含其他长度单位（如像素 px、百分比 % 等），并且可以与其他CSS属性值和变量一起使用。

当一个 `<li>` 元素具有 `active` 类时，对应的 `.indicator` 元素会相对于活动项目的位置水平平移一个特定的距离。每个 `.indicator` 元素的平移距离相对于其前面的活动项目索引和一个固定的长度单位（`70px`）计算得出。

*/ */
   
   .nav li:nth-child(1).active~.indicator{
        transform: translateX(calc(70px*0));
    }

    .nav li:nth-child(2).active~.indicator {
        transform: translateX(calc(70px*1));
    }

    .nav li:nth-child(3).active~.indicator {
        transform: translateX(calc(70px*2));
    }

    .nav li:nth-child(4).active~.indicator {
        transform: translateX(calc(70px*3));
    }

    .nav li: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` 类，
    const lis = document.querySelectorAll('.nav li')
    lis.forEach(li => li.addEventListener('click', function () {
        lis.forEach(item => {
            item.classList.remove('active');
            this.classList.add('active');
        })
    }))
</script>

效果展示

总结

这里配合js使用的动画是值得我学习的，通过js点击赋予不同的liactive样式，又根据active所在的li元素经过计算对.indicator元素进行平移，使之完成这个动画效果

基于css3写出的底部导航栏效果（详细注释
原文链接：https://juejin.cn/post/7262334378759405605

绍

我们都知道普通的HTML自带的功能相对有限，很多复杂的交互式场景，如果手动去写功能的话会非常的复杂，而且可扩展性差，就拿HTML表格来说，对于初学者或者对于复杂的拖拽式交互编程不熟悉的话会很浪费时间，因此今天就介绍一个第三方的插件——Table-draagger，来轻松实现类似的功能。Table-draagger是用于构建可重排序的拖放表的极简主义纯Javascript库！

Github

https://github.com/sindu12jun/table-dragger

特征

Table-draagger因为其以下几个特征而让拖拽和排序的实现变得如此简单：

非常容易配置
能够同时对列或行进行排序
排序时动画流畅
没有臃肿的依赖
提供触摸事件（意味着在触摸设备可以实现一些你想要的功能）

安装使用

安装

可以在npm上获得它：

npm install table-dragger --save

或者引用压缩的js文件

<script src="../node_modules/table-dragger/dist/table-dragger.min.js"></script>

或者尝试开发中的不稳定版本

npm install table-dragger@next --save

快速入门

请看以下代码：

import tableDragger from 'table-dragger'
tableDragger(el, options?)

<table id="table">
<thead>
<tr>
<th class='handle'>header1</th>
<th class='handle'>header2</th>
</tr>
</thead>
<tbody>
<tr>
<td>conten1</td>
<td>conten2</td>
</tr>
</tbody>
</table>

var el = document.getElementById('table');
var dragger = tableDragger(el, {
mode: 'row',
dragHandler: '.handle',
onlyBody: true,
});
dragger.on('drop',function(from, to){
console(from);
console(to);
});

你可以在不设置任何参数的情况下使用默认的拖拽和排序方式，当然以下是你可以配置的选项：

options.mode

1、将mode设置为column，用户拖动和排序表的列

2、将mode设置为row，用户拖动并排序表的行

3、设置mode为free，用户根据点击后鼠标移动的方向拖动行或列。注意，必须在自由模式下指定dragHandler。

options.dragHandler

dragHandler是表中的拖动句柄选择器默认情况下，在列模式下，dragHandler是表的第一行；在行模式下，则是第一列。

options.onlyBody

在行模式下将onlyBody设置为true时，用户只能在tbody中提升行。

下面是返回对象的API

tableDragger(document.querySelector('#event-table'), { mode: 'free', dragHandler: '.handle', onlyBody: true })
.on('drag', () => {
console.log('drag');
})
.on('drop', (from, to, el, mode) => {
console.log(`drop ${el.nodeName} from ${from} ${mode} to ${to} ${mode}`);
})
.on('shadowMove', (from, to, el, mode) => {
console.log(`move ${el.nodeName} from ${from} ${mode} to ${to} ${mode}`);
})
.on('out', (el, mode) => {
console.log(`move out or drop ${el.nodeName} in mode ${mode}`);
});

总结

Table-draagger为我们节省了很多手动封装表格排序和拖拽功能的时间，当然目前很多第三方框架已经实现了类似的功能，这更适用于原生的html表格，你还可以通过一些手段记忆用户拖拽，这只是其中一种思路，Enjoy it！~

标的设计水平和素材质量对页面的影响很大，前端程序员经常要为一个合适的图标找来找去。试想一下你有没有遇到找不到合适图标的情况呢？今天和大家介绍一下很牛气的图标库Font Awesome。

图标不合适的原因有：

图标设计不符合要求，图标不能表示主题意义
图标质量很差，不是矢量图
图标数量太少，不能找到设计风格统一的多个图标

如果你还遇到过其他问题，欢迎你给我留言。

上面说的问题Font Awesome全部都帮你解决了，从此只需要这一套解决方案。虽说很多框架都有自己的图标库，比如说bootstrap，element-UI，ant-d 都有自己的图标库。但是他们的图标库都有数量较少的缺点。

element-ui图标

Font Awesome作为独立，专业的图标库，完美的解决了这些问题。那Font Awesome优点有哪些呢？

图标数量多

Font Awesome目前的图标数量目测应该有几千个，而且还在不断的更新。一般你需要的图标都能在这里找到。不仅是产品设计需要的图标，甚至一些产品图标也可以找到，比如chrome矢量化图标，Facebook图标等。

2.支持模糊搜索

这里的搜索是英文搜索，你可以根据主题的意义搜索。比如你需要一个用户管理的突变，可以搜索account或者user。

3.支持不同尺寸的图标

Font Awesome支持图标的放大操作，而且使用简便。

除此之外，还支持图标排列等功能，大家可以自己去官网了解。

那如何使用Font Awesome图标呢？

首先引入Font Awesome库，方式有很多，可以在head中添加link引入：

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

然后就可以通过标签<i>使用图标了。

<i class="fa fa-camera-retro"></i>

好了，关于Font Awesome就和大家介绍到这里，欢迎你给我留言。如果你觉得文章对你有帮助，欢迎你帮助点赞，转发。

在线咨询

上一篇：如何修改word默认文档模板，一次设置好版面格式，长期使用
下一篇：PDF如何转换为HTML？这五种快捷方法你试过吗？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商