particles实现粒子背景全屏导航页面效果代码-html代码-BFW代码库

particles实现粒子背景全屏导航页面效果代码

代码语言：html

代码描述：particles实现粒子背景全屏导航页面效果代码

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

<html>
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-size: 16px;
        }

        body {
            font-family: "ROBOTO", sans-serif;
        }

        a {
            text-decoration: none;
        }

        .nav,
        .slide {
            position: relative;
            z-index: 0;
            background: #1e1f26;
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            padding: 0 1vw;
        }
        .nav h1,
        .nav a,
        .slide h1,
        .slide a {
            font-size: 5vw;
            margin: 0 auto;
            padding-bottom: 0.5rem;
            letter-spacing: 0.4rem;
            color: #03dac6;
            transition: all 0.3s ease;
        }
        .nav h1:hover,
        .nav a:hover,
        .slide h1:hover,
        .slide a:hover {
            transform: translate3d(0, -10px, 22px);
            color: #ff0266;
        }
        .nav h3,
        .slide h3 {
            font-size: 2.7vw;
            letter-spacing: 0.2rem;
            font-family: "Josefin Sans", sans-serif;
            font-weight: 300;
            color: #faebd7;
        }
        .nav .nav-container,
        .slide .nav-container {
            display: flex;
            flex-direction: row;
            position: absolute;
            z-index: 2;
            bottom: 0;
            width: 100%;
            height: 70px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
            background: #fff;
            z-index: 10;
        }
        .nav .nav-container--top,
        .slide .nav-container--top {
            position: fixed;
            top: 0;
        }
        .nav .nav-tab,
        .slide .nav-tab {
            display: flex;
            justify-content: center;
            align-items: center;
            flex: 1;
            z-index: 3;
            color: #03dac6;
            letter-spacing: 0.1rem;
            font-size: 0.8rem;
        }
        .nav .nav-tab:hover,
        .slide .nav-tab:hover {
            color: #ff0266;
            transition: all 0.5s ease;
        }
        .nav .nav-tab-slider,
        .slide .nav-tab-slider {
            position: absolute;
            bottom: 0;
            width: 0;
            height: 6px;
            background: #03dac6;
            transition: left 0.3s ease;
        }
@media (min-width: 800px) {
            .nav .nav-tab,
            .slide .nav-tab {
                font-size: 2vw;
            }
            .nav .nav h1,
            .nav .slide h1,
            .slide .nav h1,
            .slide .slide h1 {
                font-size: 3vw;
            }
            .nav .nav h3,
            .nav .slide h3,
            .slide .nav h3,
            .slide .slide h3 {
                font-size: 2vw;
            }
        }

        .background {
            position: absolute;
            height: 100vh;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: -1;
        }
    </style>
  <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@200;300;400;500&amp;family=Raleway:wght@100;200;300;400;500&amp;family=Roboto:wght@300;400;700&amp;display=swap" rel="stylesheet">

    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/particles.2.2.3.js"></script>
</head>
<body>
    <section class="nav">
        <h1>FRONT END TRENDS 2021</h1>
        <h3>Benefits of Frontend Technologies for Web</h3>
        <div class="nav-container">
            <a class="nav-tab" href="#tab-typescript">TypeScript</a>
            <a class="nav-tab" href="#tab-react">REACT</a>
            <a class="nav-tab" href="#tab-grphql">GraphQL</a>
            <a class="nav-tab" href="#tab-svelte">SVELTE</a>
            <a class="nav-tab" href="#tab-jest">JEST</a>
            <span class="nav-tab-slider" style="width: 0px; left: 0px;"></span>
        </div>
        <canvas class="background" width="878" height="840" style="width: 100%; height: 100%;"></canvas>
    </section>

    <main class="main">
       .........完整代码请登录后点击上方下载按钮下载查看