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

代码语言：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(--body-bg-color);
  display: grid;
  place-items: center;
  font-family: "Mona Sans", sans-serif;
}

main {
  width: 100%;
  max-width: 700px;
  color: white;
}
main header {
  text-align: center;
  margin-bottom: 6em;
}
main header h2 {
  font-size: 2em;
  font-weight: 500;
}

.nav {
  transition: --after-bg-position var(--trs-timing) var(--trs-easing) 0.2s, --after-radial-bg-position var(--trs-timing) var(--trs-easing) 0.2s, --after-bg-width var(--trs-timing) var(--trs-easing) 0.2s, --after-bg-opacity var(--trs-timing) var(--trs-easing) 0.2s, --li-before-opacity var(--trs-timing) var(--trs-easing) 0.2s;
  background: var(--body-bg-color);
  border-radius: 100px;
  position: relative;
}
.nav:before {
  content: "";
  display: block;
  position: absolute;
  width: calc(calc(var(--after-bg-width) * 1px) - 8px);
  height: 100%;
  background: rgb(255 255 255/calc(var(--after-shadow-offset)*1%));
  border-radius: 100px;
  filter: blur(20px);
  left: 0;
  top: 0;
  transform: translateX(calc(var(--after-bg-position) * 1px)) scale(1.1);
}
.nav ul {
  position: relative;
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  height: 80px;
  border-radius: 100px;
  background-position: center center;
  background-image: radial-gradient(ellipse 150px 100px at calc(var(--after-radial-bg-position)*1px) bottom, white 0%, rgba(255, 255, 255, 0.2) 100%);
  /*
   &:has(li.active:hover):after {
    --after-bg-opacity: 50;
    --after-shadow-offset: 10;
  }
  */
  /* 
    Some :has() goodness to control the 
    nav:after border-radius hihihi 
  */
}
.nav ul:active {
  --after-scale: 0.75 ;
}
.nav ul:before {
  content: "";
  display: block;
  position: absolute;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  background: var(--body-bg-color);
  top: 1px;
  left: 1px;
  border-radius: 100px;
}
.nav ul:after {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  width: calc(calc(var(--after-bg-width) * 1px) - 12px);
  height: calc(100% - 12px);
  background: linear-gradient(to bottom, rgb(255 255 255/calc(calc(var(--after-bg-opacity, 0)/10)*1%)), rgba(255, 255, 255, 0.1));
  box-shadow: inset 0 -6px calc(var(--after-shadow-offset, 0)*1px) rgb(255 255 255/calc(var(--after-bg-opacity)*1%));
  left: 6px;
  top: 6px;
  transform: translate(calc(var(--after-bg-position) * 1px), 0);
  border-radius: 100px 12px 12px 100px;
  transition: --after-bg-opacity var(--trs-timing) var(--trs-easing) var(--trs-delay), --after-shadow-offset var(--trs-timing) var(--trs-easing) var(--trs-delay), border-radius var(--trs-timing) var(--trs-easing) var(--trs-delay);
  pointer-events: none;
}
.nav ul li {
  padding: 1em;
  height: 100%;
  width: 100%;
  position: relative;
  transform-style: preserve-3d;
  perspective: 800px;
}
.nav ul li:not(.active):hover {
  --li-before-opacity: 0.3;
}
.nav ul li:before {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
 .........完整代码请登录后点击上方下载按钮下载查看