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

代码语言：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-text -->
            </a>
        </span> <span class="nav-span">
            <a class="nav-link" aria-current="false" href="javascript:canvasnav._toggle(4);"
               data-spm-anchor-id="datav.10712463.0.0">
                <i class="datav-font datav-icon icon-ArtboardCopy11 nav-icon"></i>上传源码
            </a>
        </span>
    </div>
    <script>

        var canvasnav = (function () {


            var c = Math.min, h = Math.sign, m = Math.max, n = Math.abs, j = .85, k = 10, l = 4;
            var opt = {};
            opt.currentIndex = 1;
            opt.canvas = document.getElementById('canvas-2761');


            var calcAVGSpeed = function (a) {
                var b = (l * j * a + k * (1 - j) * a) / (k * l * 20);
                return b = m(n(b), 2.5) * h(b), b
            }
            var getCurSpeed = function (a, b) {
                var c = n(a) > n(j * b) ? l * opt.avgSpeed : k * opt.avgSpeed;
                return c
            }


            var _calCurve = function (a, b, c, d, e, f) {
                //console.log(a + f,b,c-f,d,c,d);
                e.bezierCurveTo(a + f, b, c - f, d, c, d)
            }

            var _initCanvas = function (canvas, width, height) {
                var devicePixelRatio = window.devicePixelRatio, canvasObj = canvas.getContext("2d");
                canvas.width = width * devicePixelRatio, canvas.height = height * devicePixelRatio, canvas.style.width = width + "px", canvas.style.height = height + "px", canvasObj.scale(devicePixelRatio, devicePixelRatio)
            }

            var resize = function () {
                //resize发生
                opt.timer && cancelAnimationFrame(opt.timer);
                _calcTabs();
                _initCanvas(opt.canvas, opt.width, opt.height), draw(0)
            }


            var _calcTabs = function () {
                var a = document..........完整代码请登录后点击上方下载按钮下载查看