css实现多彩下划线滚动式菜单栏效果代码-html代码-BFW代码库

css实现多彩下划线滚动式菜单栏效果代码

代码语言：html

代码描述：css实现多彩下划线滚动式菜单栏效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        @import url("https://fonts.googleapis.com/css?family=DM+Sans:500,700&display=swap");
        * {
        box-sizing:border-box;
    }
    body {
        text-align:center;
        display:flex;
        height:100vh;
        width:100%;
        justify-content:center;
        align-items:center;
        padding:0 20px;
        background-image:url("https://www.toptal.com/designers/subtlepatterns/patterns/debut_light.png");
    }
    .nav {
        display:inline-flex;
        position:relative;
        overflow:hidden;
        max-width:100%;
        background-color:#fff;
        padding:0 20px;
        border-radius:40px;
        box-shadow:0 10px 40px rgba(159,162,177,0.8);
    }
    .nav-item {
        color:#83818c;
        padding:20px;
        text-decoration:none;
        transition:.3s;
        margin:0 6px;
        z-index:1;
        font-family:'DM Sans',sans-serif;
        font-weight:500;
        position:relative;
    }
    .nav-item:before {
        content:"";
.........完整代码请登录后点击上方下载按钮下载查看