css+js实现宇宙太空主题自适应全屏菜单效果代码-html代码-BFW代码库

代码语言：html

代码描述：css+js实现宇宙太空主题自适应全屏菜单效果代码

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

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


<link href="https://fonts.googleapis.com/css2?family=Audiowide&family=Rubik:wght@400;500&display=swap" rel="stylesheet">
<style>
    :root {
  --background-light: rgb(236, 229, 220);
  --background-dark: rgb(20, 20, 20);
  
  --gradient-color-1: rgb(178, 94, 82);
  --gradient-color-2: rgb(56, 33, 46);
  --gradient-color-3: rgb(42, 37, 51);
  --gradient-color-4: rgb(17, 30, 41);
}

@keyframes arc-rotation {
  from {
    transform: translate3d(-50%, -50%, 0px) rotate(0deg);
  }
  
  to {
    transform: translate3d(-50%, -50%, 0px) rotate(360deg);
  }
}

body {
  background-color: var(--background-light);
  margin: 0px;
  overflow: hidden;
  padding: 0px;
  transition: background-color 600ms;
}

body.menu-toggled {
  background-color: var(--background-dark);
}

body.menu-toggled > #menu {
  pointer-events: all; 
}

body.menu-toggled > #menu > #menu-toggle > span:first-of-type {
  transform: translate3d(0px, 8px, 0px) rotate(45deg);
}

body.menu-toggled > #menu > #menu-toggle > span:nth-of-type(2) {
  opacity: 0;
  transform: translate3d(-5px, 0px, 0px);
}

body.menu-toggled > #menu > #menu-toggle > span:nth-of-type(3) {
  transform: translate3d(0px, -8px, 0px) rotate(-45deg);
}

body.menu-toggled > #menu > #menu-toggle > #menu-toggle-label > .word {
  opacity: 0;
  transform: translate3d(-30%, 0px, 0px) skew(20deg) scaleX(1.2);  
  transition: opacity 250ms cubic-bezier(.71, .19, .87, .33), 
    transform 250ms cubic-bezier(.71, .19, .87, .33);
}

body.menu-toggled > #menu > #menu-toggle > #menu-toggle-label > .word:nth-of-type(2) {
  transition-delay: 100ms;
}

body.menu-toggled > #menu > #menu-gradient {
  height: 200vmax;
  opacity: 1;
  transform: translate3d(-50%, -50%, 0px);
  transition: height 600ms cubic-bezier(.58, .2, .62, .93), 
    width 600ms cubic-bezier(.58, .2, .62, .93), 
    transform 600ms cubic-bezier(.58, .2, .62, .93), 
    opacity 400ms;
  width: 200vmax;
}

body.menu-toggled > #menu > #menu-gradient-blur {
  opacity: 1; 
}

body.menu-toggled > #menu > #menu-arcs-wrapper {
  opacity: 1;
  transform: scale(1);
  transition: transform 600ms cubic-bezier(.16, .68, .25, .83), 
    opacity 600ms cubic-bezier(.87, .12, .92, .39); 
}

body.menu-toggled > #menu > #menu-links > .link {  
  opacity: 1;
  transform: none;
  transition: opacity 600ms ease-in;  
}

body.menu-toggled > #menu > #menu-links > .link:nth-of-type(2) {
  transition-delay: 100ms;
}

body.menu-toggled > #menu > #menu-links > .link:nth-of-type(3) {
  transition-delay: 150ms;
}

body.menu-toggled > #menu > #menu-links > .link:nth-of-type(4) {
  transition-delay: 200ms;
}

#menu {
  height: 100vh;
  left: 0px;
  overflow: hidden;
  pointer-events: none; 
  position: fixed;
  top: 0px;
  width: 100vw;
  z-index: 100;
}

#menu > #menu-toggle {
  align-items: center;
  background-color: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 5px;
  height: 50px;
  justify-content: center;
  left: 30px;
  padding: 0px;
  pointer-events: all;
  position: absolute;
  top: 30px;
  width: 50px;
  z-index: 5;
}

#menu > #menu-toggle:hover > span:nth-of-type(2),
#menu > #menu-toggle:hover > span:nth-of-type(3){
  transform: translate3d(0px, 0px, 0px);
}

#menu > #menu-toggle > span {
  background-color: var(--background-dark);
  display: block;
  height: 3px;
  transition: transform 250ms;
  width: 24px;
}

#menu > #menu-toggle > span:nth-of-type(2) {
  transform: translate3d(5px, 0px, 0px);
}

#menu > #menu-toggle > span:nth-of-type(3) {
  transform: translate3d(-2px, 0px, 0px);
}

#menu > #menu-toggle > #menu-toggle-label {
  align-items: center;
  display: flex;
  height: 50px;
  gap: 5px;
  position: absolute;
  right: -20px;
  top: 0px;
  transform: translate3d(100%, 0px, 0px);
  white-space: nowrap;
}

#menu > #menu-toggle > #menu-toggle-label > .word {
  font-family: 'Audiowide', cursive;
  font-size: 1.5em;
  transition: opacity 250ms, transform 250ms;
}

#menu > #menu-gradient {
  background: radial-gradient(
    var(--background-light) 12%,
    var(--gradient-color-1) 13%,
    var(--gradient-color-2) 15%,
    var(--gradient-color-3) 60%,
    var(--gradient-color-4) 90%
  );
  height: 300vmax;
  left: 0px;  
  opacity: 0;
  position: absolute;
  transform: translate3d(-50%, -50%, 0px) scale(4);
  transition: height 600ms cubic-bezier(.75, .1, .89, .36),
    width 600ms cubic-bezier(.75, .1, .89, .36),
    transform 600ms cubic-bezier(.75, .1, .89, .36),
    opacity 700ms cubic-bezier(.9, .02, .97, .28);
  top: 0px;
  width: 300vmax;
  z-index: 1;
}

#menu > #menu-gradient-blur {
  backdrop-filter: blur(1vmax);
  inset: 0px;
  opacity: 0;
  position: absolute;
  transition: opacity 600ms cubic-bezier(.87, .12, .92, .39);
  z-index: 2;
}

#menu > #menu-arcs-wrapper {
  height: clamp(600px, 200vmax, 6000px);
  left: 0px;
  opacity: 0;
  position: absolute;
  top: 0px;
  transform: scale(1.15) translate3d(20%, 20%, 0px);
  transition: transform 600ms cubic-bezier(.87, .12, .92, .39), 
    opacity 600ms cubic-bezier(.87, .12, .92, .39);  
  width: clamp(600px, 200vmax, 6000px);
  z-index: 3;
}

#menu > #menu-arcs-wrapper > #menu-arcs {
  animation: arc-rotation 100s linear infinite;
  height: 100%;
  left: 0px;  
  position: absolute;
  top: 0px;
  width: 100%;
  will-change: transform;
}

#menu > #menu-arcs-wrapper > #menu-arcs > .menu-arc {
  fill: none;
  stroke: rgba(255, 255, 255, 0.5);
  stroke-dasharray: 2,10;
  stroke-width: 1;
}

#menu > #menu-links {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 30px;
  inset: 0px;
  justify-content: center;
  position: absolute;
  z-index: 4;
}

#menu > #menu-links > .link {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-family: "Rubik", sans-serif;
  gap: 10px;
  opacity: 0;
  position: relative;
  text-decoration: none;
  transition: opacity 250ms ease-in;
  width: 200px;
}

#menu > #menu-links > .link:hover > .label {
  transform: translate3d(6%, 0px, 0px);
}

#menu > #menu-links > .link:hover > .index {
  transform: translate3d(20%, 0px, 0px);
}

#menu > #menu-links > .link:hover > .anchor:before {
  opacity: 0.15;
  transform: translate3d(-50%, -50%, 0px) scale(1.5);
}

#menu > #menu-links > .link:hover > .anchor:after {
  border-color: red;
  transform: translate3d(-50%, -50%, 0px) scale(1.1);
}

#menu > #menu-links > .link > .anchor {
  background-color: white;
  height: clam.........完整代码请登录后点击上方下载按钮下载查看