css+js实现黑色发光立体导航条效果代码-html代码-BFW代码库

css+js实现黑色发光立体导航条效果代码

代码语言：html

代码描述：css+js实现黑色发光立体导航条效果代码

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

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

<head>

  <meta charset="UTF-8">


  
  
<style>


@layer properties {
  @property --after-bg-position {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }
  @property --after-radial-bg-position {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }
  @property --after-bg-width {
    syntax: "<number>";
    inherits: true;
    initial-value: 100;
  }
  @property --after-bg-opacity {
    syntax: "<number>";
    inherits: true;
    initial-value: 20;
  }
  @property --after-shadow-offset {
    syntax: "<number>";
    inherits: true;
    initial-value: 15;
  }
  @property --after-scale {
    syntax: "<number>";
    inherits: true;
    initial-value: 0.85;
  }
  @property --li-before-opacity {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }
}
:root {
  /* -- Colors: */
  --body-bg-color: hsl(221deg 16% 6%);
  /* -- Background */
  --bg-position: 0;
  /* -- misc */
  --debug: 0;
  --trs-easing: cubic-bezier(.41,-0.09,.55,1.09);
  --trs-timing: 300ms;
  --trs-delay: 80ms;
}

*,
*:before,
*:after {
  box-sizing: border-box;
  /* debug */
  outline: calc(var(--debug) * 1px) dashed rgba(255, 0, 0, 0.5);
}

html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

body {
  background: var(--bod.........完整代码请登录后点击上方下载按钮下载查看