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小時內與您取得聯系。

整合營銷服務商