canvas实现炫酷流线流动性选项卡导航条效果代码-html代码-BFW代码库

canvas实现炫酷流线流动性选项卡导航条效果代码

代码语言：html

代码描述：canvas实现炫酷流线流动性选项卡导航条效果代码

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <style type="text/css">
        span {
            color: inherit;
        }

        * {
            margin: 0;
            padding: 0;
            border: 0;
            font-size: 100%;
            vertical-align: baseline;
        }

        * {
            box-sizing: border-box;
            -o-box-sizing: border-box;
            -ms-box-sizing: border-box;
            -icab-box-sizing: border-box;
            -khtml-box-sizing: border-box;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }

        * {
            outline: 0;
        }

        a {
            text-decoration: none;
            cursor: pointer;
        }

        .nav-main .nav-span .nav-active, .datav-nav .nav-main .nav-span .nav-link:hover {
            color: #00baff !important;
        }

        .nav-main .nav-span .nav-link {
            text-decoration: none !important;
            display: block;
            color: #fff;
            width: auto;
            min-width: 140px;
            line-height: 40px;
            font-size: 14px;
            text-align: left;
            cursor: pointer;
            padding: 0 40px;
        }

        .datav-icon {
            display: inline-block;
            vertical-align: middle;
        }

        .datav-font {
            font-family: "datav-font" !important;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        .nav-main .nav-icon {
            padding-right: 5px;
            font-size: 20px;
        }

        .nav-main {
            z-index: 10;
            display: flex;
            top: 200px;
            position: fixed;
            width: 100%;
            min-width: 1024px;
        }
    </style>
</head>
<body style="background: #222;margin:0;padding:0px;">
    <div class="nav-main">
        <canvas id="canvas-2761" style="position: absolute; z-index: -1; left: 0px;"></canvas>
        <span class="nav-span">
            <a class="nav-link nav-active" aria-current="true"
               href="javascript:canvasnav._toggle(0);"
               data-spm-anchor-id="datav.10712463.0.0">
                <i class="datav-font datav-icon icon-ArtboardCopy9 nav-icon"></i><!-- react-text: 60 -->首页
                <!-- /react-text -->
            </a>
        </span><span class="nav-span">
            <a class="nav-link" aria-current="false"
               href="javascript:canvasnav._toggle(1);"
               data-spm-anchor-id="datav.10712463.0.0">
                <i class="datav-font datav-icon icon-ArtboardCopy10 nav-icon"
                   data-spm-anchor-id="datav.10712463.0.i0.6f053967skiQbA"></i><!-- react-text: 64 -->源码区<!-- /react-text -->
            </a>
        </span><span class="nav-span">
            <a class="nav-link" aria-current="false" href="javascript:canvasnav._toggle(2);"
               data-spm-anchor-id="datav.10712463.0.0">
                <i class="datav-font datav-icon icon-ArtboardCopy12 nav-icon"></i><!-- react-text: 68 -->模板区
                <!-- /react-text -->
            </a>
        </span> <span class="nav-span">
            <a class="nav-link" aria-current="false" href="javascript:canvasnav._toggle(3);"
               data-spm-anchor-id="datav.10712463.0.0">
                <i class="datav-font datav-icon icon-ArtboardCopy11 nav-icon"></i><!-- react-text: 72 -->会员中心
                <!-- /react-t.........完整代码请登录后点击上方下载按钮下载查看