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

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

代码语言：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;
  tr.........完整代码请登录后点击上方下载按钮下载查看