HTML5+CSS3+JS小实例：阿里云盘的侧边导航栏

耀南.

已于 2023-12-27 11:21:03 修改

阅读量476

点赞数 10

分类专栏：前端好玩炫酷的动画小案例文章标签： html5 css3 javascript

于 2023-12-27 11:19:57 首次发布

本文链接：https://blog.csdn.net/YN2000609/article/details/135240656

版权

前端好玩炫酷的动画小案例专栏收录该内容

68 篇文章 9 订阅

订阅专栏

话不多说看效果 V代码运行！！！

核心代码：

HTML:

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>阿里云盘的侧边导航栏</title>
    <!-- 引入字体图标 -->
    <link rel="stylesheet" href="fonts/font.css">
    <link rel="stylesheet" href="120.css">
</head>

<body>
    <div class="container">
        <div class="left-box">
            <ul>
                <li class="item active">
                    <i class="icon icon-file"></i>
                    文件
                </li>
                <li class="item">
                    <i class="icon icon-album"></i>
                    相册
                </li>
                <li class="item">
                    <i class="icon icon-like"></i>
                    收藏夹
                </li>
                <li class="item">
                    <i class="icon icon-vault"></i>
                    保险箱
                </li>
                <li class="item">
                    <i class="icon icon-favorite"></i>
                    订阅
                </li>
                <li class="item">
                    <i class="icon icon-trash"></i>
                    回收站
                </li>
                <hr>
                <li class="item">
                    <i class="icon icon-transfer"></i>
                    传输列表
                </li>
            </ul>
            <div class="user-info">
                <img src="/images/1.png" alt="">
                <span>草帽小子</span>
                <i class="icon icon-gear"></i>
            </div>
        </div>
        <div class="right-box">
            <div class="top">
                <span class="current-tag">文件</span>
                <div class="btn">
                    <i class="icon icon-search"></i>
                </div>
                <div class="btn">
                    <i class="icon icon-add"></i>
                </div>
            </div>
            <div class="middle">i'm xiaohuihui</div>
            <div class="handler"></div>
        </div>
    </div>
    <script src="120.js"></script>
</body>

</html>

JS:

// 获取要操作的元素
let items=document.querySelectorAll('.item');
let current_tag=document.querySelector('.current-tag');
let handler=document.querySelector('.handler');
let left_box=document.querySelector('.left-box');

// 设置选中项的样式
function setActive(){
    items.forEach((item)=>{
        item.classList.remove('active');
    })
    this.classList.add('active');
    current_tag.innerText=this.innerText;
}
// 为每一个li设置点击事件
items.forEach((item)=>{
    item.addEventListener('click',setActive);
})

handler.addEventListener('click',function(){
    if(!this.classList.contains('close')){
        left_box.style.width=0;
        this.classList.add('close');
    }else{
        left_box.style.width=250+'px';
        this.classList.remove('close');
    }
})

css：

*{
    /* 初始化 */
    margin: 0;
    padding: 0;
}
body{
    /* 100%窗口宽度和高度 */
    width: 100vw;
    height: 100vh;
    /* 溢出隐藏 */
    overflow: hidden;
    /* 设置背景 */
    background: url("/images/mountain.jpg") no-repeat;
    background-size: cover;
}
.container{
    width: 100%;
    height: 100%;
    /* 弹性布局 水平排列 */
    display: flex;
}
/* 字体图标 */
.icon{
    color: #fff;
    font-size: 24px;
}
/* 左侧导航栏 */
.left-box{
    width: 250px;
    height: 100%;
    /* 半透明背景 */
    background-color: rgba(0,0,0,0.65);
    /* 背景模糊（毛玻璃） */
    backdrop-filter: blur(30px);
    /* 相对定位 */
    position: relative;
    color: #fff;
    font-size: 14px;
    /* 弹性布局 垂直排列 */
    display: flex;
    flex-direction: column;
    /* 设置过渡 */
    transition: 0.5s ease;
    /* 不让文字换行 */
    white-space: nowrap;
}
.left-box ul{
    list-style: none;
    width: 90%;
    margin: 25px auto;
    /* 高度铺满 */
    flex: 1;
}
.left-box li{
    height: 46px;
    /* 弹性布局 垂直居中 */
    display: flex;
    align-items: center;
    padding-left: 12px;
    border-radius: 10px;
    cursor: pointer;
    /* 过渡 */
    transition: 0.3s;
}
/* 选中态样式 */
.left-box li.active,
.left-box li.active:hover{
    background-color: rgba(255,255,255,0.2);
}
.left-box li:hover{
    background-color: rgba(255,255,255,0.1);
}
.left-box hr{
    width: 90%;
    margin: 18px auto;
    border: none;
    border-top: 1px solid rgba(255,255,255,0.2);
}
.left-box .icon{
    margin-right: 16px;
}
/* 用户信息区域 */
.user-info{
    border-top: 1px solid rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    padding: 24px;
}
.user-info img{
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 14px;
}
.user-info span{
    flex: 1;
}
.user-info .icon{
    font-size: 20px;
    margin-right: 0;
}
/* 右侧区域 */
.right-box{
    background-color: #0f0f11;
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
}
.right-box .top{
    margin: 25px 35px;
    display: flex;
    align-items: center;
    height: 46px;
}
.right-box .top .current-tag{
    flex: 1;
    color: #fff;
    font-weight: 600;
}
.right-box .top .btn{
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}
.right-box .top .btn:last-child{
    background-color: #446dff;
    margin-left: 20px;
}
.right-box .middle{
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #222;
    font-size: 6vw;
    font-weight: bold;
    text-transform: uppercase;
}
/* 展开收起开关 */
.right-box .handler{
    width: 10px;
    height: 50px;
    /* 绝对定位 垂直居中 */
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    /* 光标变小手 */
    cursor: pointer;
    /* 默认不透明度为0 */
    opacity: 0;
    /* 过渡 */
    transition: opacity 0.3s;
}
.right-box .handler::before,
.right-box .handler::after{
    content: "";
    background-color: rgba(255,255,255,0.2);
    position: absolute;
    left: 0;
    width: 100%;
    height: 50%;
    border-radius: 10px 10px 0 0;
    /* 过渡 */
    transition: 0.2s;
}
.right-box .handler::after{
    bottom: 0;
    border-radius: 0 0 10px 10px;
}
.right-box:hover .handler{
    opacity: 1;
}
.right-box .handler:hover::before{
    transform: skewX(-15deg);
}
.right-box .handler:hover::after{
    transform: skewX(15deg);
}
.right-box .handler.close:hover::before{
    transform: skewX(15deg);
}
.right-box .handler.close:hover::after{
    transform: skewX(-15deg);
}

然后这里还需要几个文件：文件先建好，文件名和我的一样就好了，挨个cv就好了！

font.css：

@font-face {
    font-family: 'myfont';
    src:  url('font.eot?ajii88');
    src:  url('font.eot?ajii88#iefix') format('embedded-opentype'),
      url('font.ttf?ajii88') format('truetype'),
      url('font.woff?ajii88') format('woff'),
      url('font.svg?ajii88#font') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
  }
  
  [class^="icon-"], [class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'myfont' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
  
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  .icon-add:before {
    content: "\e900";
  }
  .icon-album:before {
    content: "\e901";
  }
  .icon-favorite:before {
    content: "\e902";
  }
  .icon-file:before {
    content: "\e903";
  }
  .icon-gear:before {
    content: "\e904";
  }
  .icon-like:before {
    content: "\e905";
  }
  .icon-search:before {
    content: "\e906";
  }
  .icon-transfer:before {
    content: "\e907";
  }
  .icon-trash:before {
    content: "\e908";
  }
  .icon-vault:before {
    content: "\e909";
  }

font.eot：

@font-face {
    font-family: 'myfont';
    src:  url('font.eot?ajii88');
    src:  url('font.eot?ajii88#iefix') format('embedded-opentype'),
      url('font.ttf?ajii88') format('truetype'),
      url('font.woff?ajii88') format('woff'),
      url('font.svg?ajii88#font') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
  }
  
  [class^="icon-"], [class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'myfont' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
  
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  .icon-add:before {
    content: "\e900";
  }
  .icon-album:before {
    content: "\e901";
  }
  .icon-favorite:before {
    content: "\e902";
  }
  .icon-file:before {
    content: "\e903";
  }
  .icon-gear:before {
    content: "\e904";
  }
  .icon-like:before {
    content: "\e905";
  }
  .icon-search:before {
    content: "\e906";
  }
  .icon-transfer:before {
    content: "\e907";
  }
  .icon-trash:before {
    content: "\e908";
  }
  .icon-vault:before {
    content: "\e909";
  }

font.svg：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>Generated by IcoMoon</metadata>
<defs>
<font id="icomoon" horiz-adv-x="1024">
<font-face units-per-em="1024" ascent="960" descent="-64" />
<missing-glyph horiz-adv-x="1024" />
<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
<glyph unicode="&#xe900;" glyph-name="add" d="M537.6 473.6v273.067h-51.2v-273.067h-273.067v-51.2h273.067v-273.067h51.2v273.067h273.067v51.2z" />
<glyph unicode="&#xe901;" glyph-name="album" d="M362.667 686.933c-61.867 0-110.933-49.067-110.933-110.933s49.067-110.933 110.933-110.933 110.933 49.067 110.933 110.933c0 61.867-49.067 110.933-110.933 110.933zM362.667 516.267c-32 0-59.733 27.733-59.733 59.733s27.733 59.733 59.733 59.733 59.733-27.733 59.733-59.733c0-32-27.733-59.733-59.733-59.733zM885.333 774.4c-10.667 19.2-27.733 36.267-46.933 46.933-23.467 10.667-53.333 10.667-113.067 10.667h-426.667c-59.733 0-89.6 0-113.067-10.667-19.2-10.667-36.267-27.733-46.933-46.933-10.667-23.467-10.667-53.333-10.667-113.067v-426.667c0-59.733 0-89.6 10.667-113.067 10.667-19.2 27.733-36.267 46.933-46.933 23.467-10.667 53.333-10.667 113.067-10.667h426.667c59.733 0 89.6 0 113.067 10.667 19.2 10.667 36.267 25.6 46.933 46.933 10.667 23.467 10.667 53.333 10.667 113.067v426.667c0 59.733 0 89.6-10.667 113.067zM844.8 234.667c0-29.867 0-51.2-2.133-66.133s-4.267-21.333-4.267-23.467c-4.267-10.667-12.8-19.2-23.467-23.467-2.133-2.133-8.533-4.267-23.467-4.267-14.933-2.133-34.133-2.133-66.133-2.133h-426.667c-29.867 0-51.2 0-66.133 2.133s-21.333 4.267-23.467 4.267c-10.667 4.267-19.2 12.8-23.467 23.467-2.133 2.133-4.267 8.533-4.267 23.467-2.133 14.933-2.133 34.133-2.133 66.133v70.4c55.467-40.533 115.2-57.6 170.667-53.333 70.4 4.267 134.4 40.533 177.067 98.133 59.733 78.933 93.867 110.933 128 123.733 29.867 12.8 59.733 12.8 110.933 12.8h25.6v51.2h-25.6c-51.2 0-91.733 0-132.267-17.067-46.933-19.2-89.6-61.867-149.333-140.8-34.133-44.8-83.2-74.667-138.667-76.8-51.2-2.133-108.8 14.933-166.4 68.267v290.133c0 29.867 0 51.2 2.133 66.133s4.267 21.333 4.267 23.467c4.267 10.667 12.8 19.2 23.467 23.467 2.133 2.133 8.533 4.267 23.467 4.267 14.933 2.133 34.133 2.133 66.133 2.133h426.667c29.867 0 51.2 0 66.133-2.133s21.333-4.267 23.467-4.267c10.667-4.267 19.2-12.8 23.467-23.467 2.133-2.133 4.267-8.533 4.267-23.467 2.133-14.933 2.133-34.133 2.133-66.133v-426.667z" />
<glyph unicode="&#xe902;" glyph-name="favorite" d="M800 689.067c-10.667 19.2-25.6 36.267-46.933 46.933-23.467 10.667-53.333 10.667-113.067 10.667h-256c-59.733 0-89.6 0-113.067-10.667-19.2-10.667-36.267-25.6-46.933-46.933-10.667-23.467-10.667-53.333-10.667-113.067v-384c0-40.533 0-61.867 8.533-72.533s19.2-17.067 32-17.067c14.933 0 32 10.667 66.133 34.133l174.933 115.2c6.4 4.267 10.667 6.4 14.933 8.533h10.667c4.267 0 6.4-2.133 14.933-8.533l174.933-115.2c34.133-23.467 51.2-34.133 66.133-34.133 12.8 0 23.467 6.4 32 17.067 2.133 10.667 2.133 29.867 2.133 72.533v384c0 59.733 0 89.6-10.667 113.067zM759.467 192v-32c-6.4 4.267-14.933 10.667-25.6 17.067l-172.8 115.2h-2.133c-4.267 2.133-14.933 10.667-29.867 14.933-10.667 2.133-23.467 2.133-34.133 0-12.8-2.133-23.467-10.667-29.867-14.933h-2.133l-172.8-115.2c-10.667-8.533-19.2-12.8-25.6-17.067v416c0 29.867 0 51.2 2.133 66.133s4.267 21.333 4.267 23.467c4.267 10.667 12.8 19.2 23.467 23.467 2.133 2.133 8.533 4.267 23.467 4.267 14.933 2.133 34.133 2.133 66.133 2.133h256c29.867 0 51.2 0 66.133-2.133s21.333-4.267 23.467-4.267c10.667-4.267 19.2-12.8 23.467-23.467 2.133-2.133 4.267-8.533 4.267-23.467 2.133-14.933 2.133-34.133 2.133-66.133v-384z" />
<glyph unicode="&#xe903;" glyph-name="file" d="M849.067 563.2c-4.267 12.8-8.533 27.733-17.067 38.4-8.533 12.8-21.333 25.6-46.933 46.933l-166.4 151.467c-21.333 19.2-32 29.867-44.8 36.267-10.667 6.4-23.467 10.667-34.133 12.8-14.933 4.267-29.867 4.267-57.6 4.267h-106.667c-72.533 0-106.667 0-134.4-14.933-23.467-12.8-42.667-32-55.467-55.467-14.933-27.733-14.933-61.867-14.933-134.4v-401.067c0-72.533 0-106.667 14.933-134.4 12.8-23.467 32-42.667 55.467-55.467 27.733-14.933 64-14.933 134.4-14.933h273.067c72.533 0 106.667 0 134.4 14.933 23.467 12.8 42.667 32 55.467 55.467 14.933 27.733 14.933 64 14.933 134.4v249.6c0 34.133 0 51.2-4.267 66.133zM580.267 765.867l4.267-4.267 166.4-151.467c4.267-4.267 8.533-6.4 10.667-10.667h-121.6c-32 0-59.733 27.733-59.733 59.733v106.667zM802.133 247.467c0-36.267 0-61.867-2.133-78.933-2.133-19.2-4.267-25.6-6.4-32-6.4-14.933-19.2-25.6-34.133-34.133-4.267-2.133-12.8-4.267-32-6.4s-42.667-2.133-78.933-2.133h-273.067c-36.267 0-61.867 0-78.933 2.133-19.2 2.133-25.6 4.267-32 6.4-14.933 6.4-25.6 19.2-34.133 34.133-2.133 4.267-4.267 12.8-6.4 32s-2.133 42.667-2.133 78.933v401.067c0 36.267 0 61.867 2.133 78.933 2.133 19.2 4.267 25.6 6.4 32 6.4 14.933 19.2 25.6 34.133 34.133 4.267 2.133 12.8 4.267 32 6.4s42.667 2.133 78.933 2.133h106.667c32 0 38.4 0 46.933-2.133h2.133v-138.667c0-61.867 49.067-110.933 110.933-110.933h160c2.133-8.533 2.133-17.067 2.133-53.333v-249.6z" />
<glyph unicode="&#xe904;" glyph-name="gear" d="M936.533 469.333c0 6.4 0 8.533-2.133 12.8 0 2.133-2.133 4.267-4.267 4.267-2.133 2.133-4.267 2.133-10.667 2.133l-32 4.267c-2.133 25.6-8.533 53.333-17.067 78.933l27.733 17.067c4.267 4.267 6.4 4.267 8.533 6.4s2.133 4.267 2.133 6.4c0 2.133 0 4.267-4.267 10.667l-4.267 8.533c-2.133 2.133-4.267 2.133-6.4 2.133s-6.4 0-10.667-2.133l-34.133-2.133c-6.4 12.8-12.8 23.467-19.2 34.133s-14.933 21.333-23.467 32l19.2 25.6c4.267 4.267 4.267 6.4 6.4 10.667v6.4c0 2.133-2.133 4.267-6.4 8.533s-6.4 6.4-8.533 6.4c-2.133 0-4.267 2.133-6.4 0-2.133 0-4.267-2.133-10.667-4.267l-27.733-17.067c-19.2 19.2-40.533 34.133-64 49.067l8.533 29.867c2.133 6.4 2.133 8.533 2.133 10.667s-2.133 4.267-2.133 6.4c-2.133 2.133-4.267 4.267-8.533 6.4s-8.533 4.267-10.667 4.267c-2.133 0-4.267 0-6.4-2.133l-29.867-29.867c-25.6 10.667-51.2 19.2-76.8 23.467l-2.133 32c0 6.4 0 8.533-2.133 10.667 0 2.133-2.133 4.267-4.267 4.267-2.133 2.133-4.267 2.133-10.667 2.133h-10.667c-2.133 0-4.267-2.133-6.4-4.267s-2.133-4.267-4.267-10.667l-10.667-27.733c-27.733 2.133-53.333 0-81.067-4.267l-12.8 29.867c-2.133 6.4-4.267 8.533-6.4 10.667s-4.267 2.133-6.4 2.133c-2.133 0-6.4 0-10.667-2.133-6.4-2.133-8.533-2.133-10.667-4.267s-4.267-4.267-4.267-6.4v-10.667l2.133-32c-25.6-8.533-49.067-19.2-74.667-32l-21.333 23.467-8.533 8.533c-2.133 0-4.267 2.133-6.4 0-2.133 0-4.267-2.133-10.667-4.267-4.267-2.133-6.4-4.267-8.533-6.4s-2.133-4.267-2.133-6.4c0-2.133 2.133-6.4 4.267-10.667l12.8-29.867c-21.333-17.067-40.533-34.133-59.733-55.467l-27.733 14.933c-4.267 2.133-8.533 4.267-10.667 4.267s-4.267 0-6.4-2.133c-2.133-2.133-4.267-4.267-6.4-8.533-4.267-4.267-4.267-6.4-6.4-8.533v-6.4c0-2.133 2.133-4.267 6.4-8.533l21.333-23.467c-14.933-23.467-27.733-46.933-36.267-72.533l-32 4.267h-10.667c-2.133 0-4.267-2.133-6.4-4.267s-2.133-4.267-4.267-10.667-4.267-10.667-2.133-12.8c0-2.133 0-4.267 2.133-6.4s4.267-4.267 8.533-6.4l29.867-14.933c-6.4-25.6-8.533-53.333-10.667-78.933l-32-6.4c-6.4-2.133-8.533-2.133-10.667-4.267s-4.267-4.267-4.267-6.4v-10.667c0-6.4 0-8.533 2.133-10.667 0-2.133 2.133-4.267 4.267-4.267 2.133-2.133 4.267-2.133 10.667-2.133l32-4.267c2.133-25.6 8.533-53.333 17.067-78.933l-27.733-17.067c-4.267-4.267-6.4-4.267-8.533-6.4s-2.133-4.267-2.133-6.4c0-2.133 0-4.267 4.267-10.667 4.267-8.533 4.267-10.667 6.4-12.8s4.267-2.133 6.4-2.133c2.133 0 6.4 0 10.667 2.133l32 4.267c6.4-12.8 12.8-23.467 19.2-34.133s14.933-21.333 23.467-32l-19.2-25.6c-4.267-4.267-4.267-6.4-6.4-10.667v-6.4c0-2.133 2.133-4.267 6.4-8.533s6.4-6.4 8.533-6.4c2.133 0 4.267-2.133 6.4 0 2.133 0 4.267 2.133 10.667 4.267l27.733 17.067c19.2-19.2 40.533-34.133 64-49.067l-8.533-29.867c-2.133-6.4-2.133-8.533-2.133-10.667s2.133-4.267 2.133-6.4c2.133-2.133 4.267-4.267 8.533-6.4s8.533-4.267 10.667-4.267c2.133 0 4.267 0 6.4 2.133l8.533 8.533 19.2 25.6c25.6-10.667 51.2-19.2 76.8-23.467l2.133-32c0-6.4 0-8.533 2.133-10.667 0-2.133 2.133-4.267 4.267-4.267 2.133-2.133 4.267-2.133 10.667-2.133h10.667c2.133 0 4.267 2.133 6.4 4.267s2.133 4.267 4.267 10.667l8.533 29.867c27.733-2.133 53.333 0 81.067 4.267l12.8-29.867c2.133-6.4 4.267-8.533 6.4-10.667s4.267-2.133 6.4-2.133c2.133 0 6.4 0 10.667 2.133 6.4 2.133 8.533 2.133 10.667 4.267s4.267 4.267 4.267 6.4v10.667l-2.133 32c25.6 8.533 49.067 19.2 74.667 32l21.333-23.467 8.533-8.533c2.133 0 4.267-2.133 6.4 0 2.133 0 4.267 2.133 10.667 4.267 4.267 2.133 6.4 4.267 8.533 6.4s2.133 4.267 2.133 6.4c0 2.133-2.133 6.4-4.267 10.667l-12.8 29.867c21.333 17.067 40.533 34.133 59.733 55.467l27.733-14.933c4.267-2.133 8.533-4.267 10.667-4.267s4.267 0 6.4 2.133c2.133 2.133 4.267 4.267 6.4 8.533 4.267 4.267 4.267 6.4 6.4 8.533v6.4c0 2.133-2.133 4.267-6.4 8.533l-21.333 23.467c14.933 23.467 27.733 46.933 36.267 72.533l32-4.267h10.667c2.133 0 4.267 2.133 6.4 4.267s2.133 4.267 4.267 10.667 2.133 8.533 2.133 10.667-2.133 4.267-2.133 6.4c-2.133 2.133-4.267 4.267-8.533 6.4l-23.467 10.667c6.4 25.6 8.533 53.333 10.667 78.933l32 6.4c6.4 2.133 8.533 2.133 10.667 4.267s4.267 4.267 4.267 6.4c-2.133 2.133-2.133 6.4-2.133 10.667zM512 778.667c170.667 0 309.333-128 328.533-294.4l-234.667-10.667c-2.133 8.533-6.4 19.2-12.8 25.6-23.467 38.4-70.4 51.2-110.933 36.267l-130.133 198.4c46.933 27.733 102.4 44.8 160 44.8zM541.867 405.333c-23.467-14.933-55.467-8.533-70.4 14.933s-8.533 55.467 14.933 70.4 55.467 8.533 70.4-14.933 8.533-55.467-14.933-70.4zM343.467 164.267c-98.133 57.6-162.133 162.133-162.133 283.733 0 108.8 53.333 204.8 134.4 264.533l130.133-198.4c-29.867-29.867-36.267-78.933-10.667-117.333 6.4-8.533 12.8-14.933 19.2-21.333l-110.933-211.2zM512 117.333c-46.933 0-89.6 8.533-130.133 25.6l108.8 211.2c23.467-6.4 51.2-2.133 72.533 12.8s36.267 36.267 40.533 61.867l234.667 10.667c0-177.067-147.2-322.133-326.4-322.133z" />
<glyph unicode="&#xe905;" glyph-name="like" d="M479.125 725.376c12.025-9.5 22.756-19.291 32.757-29.785l0.118-0.125s12.096 13.312 32.875 29.909c34.411 27.477 92.629 63.957 159.125 63.957 106.667 0 234.667-64 234.667-234.667 0-256-426.667-490.667-426.667-490.667s-426.667 234.667-426.667 490.667c0 170.667 128 234.667 234.667 234.667 66.496 0 124.715-36.48 159.125-63.957zM512 123.285c18.806 11.264 31.451 19.298 43.955 27.531l-5.192-3.211c38.784 25.173 90.219 61.227 141.419 104.747 51.413 43.691 101.12 93.739 137.664 146.709 36.736 53.248 57.621 105.813 57.621 155.605 0 71.061-25.941 114.837-58.667 141.803-34.389 28.309-80.789 41.664-124.8 41.664-38.805 0-76.651-17.387-107.307-38.123-14.869-10.091-26.944-20.203-35.221-27.733-3.987-3.636-7.672-7.213-11.243-10.9l-0.063-0.066-0.363-0.384h-0.021l-37.781-41.6-37.76 41.557s0-0.021 0 0h-0.043l-0.363 0.427c-3.635 3.753-7.32 7.329-11.112 10.79l-0.195 0.175c-10.554 9.617-22.045 18.723-34.14 27.012l-1.081 0.7c-30.656 20.736-68.523 38.144-107.307 38.144-44.032 0-90.432-13.355-124.8-41.664-32.704-26.965-58.667-70.741-58.667-141.803 0-49.792 20.907-102.357 57.6-155.605 36.544-52.971 86.272-103.019 137.685-146.709 51.2-43.52 102.635-79.573 141.419-104.747 15.211-9.899 28.395-18.069 38.763-24.32z" />
<glyph unicode="&#xe906;" glyph-name="search" d="M448 789.333c-153.6 0-277.333-123.733-277.333-277.333s123.733-277.333 277.333-277.333 277.333 123.733 277.333 277.333-123.733 277.333-277.333 277.333zM448 285.867c-125.867 0-226.133 100.267-226.133 226.133s100.267 226.133 226.133 226.133 226.133-100.267 226.133-226.133-100.267-226.133-226.133-226.133zM685.227 238.549l36.224 36.203 170.453-170.453-36.203-36.203z" />
<glyph unicode="&#xe907;" glyph-name="transfer" d="M475.093 628.48v-361.813h-54.187v293.845l-102.4-109.888-39.68 36.928 149.184 160.043c0.213 0.213 0.747 0.789 1.493 1.451l0.043 0.064c0.725 0.661 6.357 5.909 15.424 6.827 0.846 0.093 1.827 0.146 2.82 0.146 14.216 0 25.895-10.864 27.188-24.742l0.008-0.108v-0.085c0.085-1.003 0.107-1.792 0.107-2.069v-0.597zM548.907 629.333h54.187v-293.845l102.4 109.888 39.68-36.928-149.184-160.064c-0.213-0.213-0.747-0.768-1.493-1.429l-0.043-0.064c-0.725-0.661-6.357-5.909-15.424-6.827-0.846-0.093-1.827-0.146-2.82-0.146-14.216 0-25.895 10.864-27.188 24.742l-0.008 0.108v0.085c-0.056 0.599-0.094 1.318-0.106 2.044v362.436zM512 21.333c-235.648 0-426.667 191.019-426.667 426.667s191.019 426.667 426.667 426.667 426.667-191.019 426.667-426.667-191.019-426.667-426.667-426.667zM512 72.533c207.36 0 375.467 168.107 375.467 375.467s-168.107 375.467-375.467 375.467c-207.36 0-375.467-168.107-375.467-375.467s168.107-375.467 375.467-375.467z" />
<glyph unicode="&#xe908;" glyph-name="trash" d="M362.667 814.933h298.667v-51.2h-298.667zM422.4 533.333h51.2v-277.333h-51.2zM550.4 533.333h51.2v-277.333h-51.2zM192 686.933v-51.2h59.733v-381.867c0-27.733 0-51.2 2.133-70.4s4.267-36.267 12.8-51.2c12.8-25.6 34.133-46.933 59.733-59.733 14.933-8.533 32-10.667 51.2-12.8s40.533-2.133 70.4-2.133h132.267c27.733 0 51.2 0 70.4 2.133s36.267 4.267 51.2 12.8c25.6 12.8 46.933 34.133 59.733 59.733 8.533 14.933 10.667 32 12.8 51.2s2.133 40.533 2.133 70.4v381.867h55.467v51.2h-640zM721.067 253.867c0-29.867 0-51.2-2.133-66.133s-4.267-25.6-6.4-32c-8.533-14.933-21.333-27.733-36.267-36.267-6.4-4.267-17.067-6.4-32-6.4-17.067-2.133-36.267-2.133-66.133-2.133h-130.133c-29.867 0-51.2 0-66.133 2.133s-25.6 4.267-32 6.4c-14.933 8.533-27.733 21.333-36.267 36.267-4.267 6.4-6.4 17.067-6.4 32-2.133 17.067-2.133 36.267-2.133 66.133v381.867h418.133v-381.867z" />
<glyph unicode="&#xe909;" glyph-name="vault" d="M618.667 341.333c70.692 0 128 57.308 128 128s-57.308 128-128 128v0c-70.692 0-128-57.308-128-128s57.308-128 128-128v0zM618.667 392.533c-42.415 0-76.8 34.385-76.8 76.8s34.385 76.8 76.8 76.8v0c42.415 0 76.8-34.385 76.8-76.8s-34.385-76.8-76.8-76.8v0zM328.533 576h-51.2v-213.333h51.2v213.333zM139.627 709.76c-11.627-22.827-11.627-52.693-11.627-112.427v-256c0-59.733 0-89.6 11.627-112.427 10.424-20.162 26.451-36.19 46.020-46.333l0.594-0.28c19.307-9.813 43.648-11.349 86.827-11.584v-85.376h51.2v85.333h375.467v-85.333h51.2v85.376c43.179 0.235 67.52 1.749 86.827 11.584 20.162 10.424 36.19 26.451 46.333 46.020l0.28 0.594c11.627 22.827 11.627 52.693 11.627 112.427v256c0 59.733 0 89.6-11.627 112.427-10.424 20.162-26.451 36.19-46.020 46.333l-0.594 0.28c-22.827 11.627-52.693 11.627-112.427 11.627h-426.667c-59.733 0-89.6 0-112.427-11.627-20.162-10.424-36.19-26.451-46.333-46.020l-0.28-0.594zM725.333 716.8c30.72 0 50.667-0.043 65.899-1.28 14.613-1.195 20.288-3.243 23.275-4.757 10.493-5.422 18.834-13.763 24.11-23.947l0.146-0.309c1.515-2.987 3.563-8.661 4.757-23.275 1.237-15.232 1.28-35.2 1.28-65.899v-256c0-30.72-0.043-50.667-1.28-65.899-1.195-14.613-3.243-20.288-4.757-23.275-5.422-10.493-13.763-18.834-23.947-24.11l-0.309-0.146c-2.987-1.515-8.661-3.563-23.275-4.757-15.232-1.237-35.2-1.28-65.899-1.28h-426.667c-30.72 0-50.667 0.043-65.899 1.28-14.613 1.195-20.288 3.243-23.275 4.757-10.493 5.422-18.834 13.763-24.11 23.947l-0.146 0.309c-1.515 2.987-3.563 8.661-4.757 23.275-1.237 15.232-1.28 35.2-1.28 65.899v256c0 30.72 0.043 50.667 1.28 65.899 1.195 14.613 3.243 20.288 4.757 23.275 5.422 10.493 13.763 18.834 23.947 24.11l0.309 0.146c2.987 1.515 8.661 3.563 23.275 4.757 15.232 1.237 35.2 1.28 65.899 1.28h426.667z" />
</font></defs></svg>

剩下的两个 font.ttf 文件和 font.woff 文件是二进制文件 cv不了可以加我v（18634371151）我给你发过去或者也可以点击下载上面的资源立即下载然后运行就可以了！