js+css实现全屏视觉差异菜单效果代码-html代码-BFW代码库

js+css实现全屏视觉差异菜单效果代码

代码语言：html

代码描述：js+css实现全屏视觉差异菜单效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
      @import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

        body {
          background-color: rgb(20, 20, 20);
          margin: 0px;
           font-family: "Montserrat", sans-serif;
        }
        
        #menu {  
          align-items: center;
          display: flex;
          height: 100vh;
          width: 100vw;
        }
        
        #menu-items {
          margin-left: clamp(4rem, 20vw, 48rem);
          position: relative;
          z-index: 2;
        }
        
        #menu[data-active-index="0"] > #menu-background-pattern {
          background-position: 0% -25%;
        }
        
        #menu[data-active-index="1"] > #menu-background-pattern {
          background-position: 0% -50%;
        }
        
        #menu[data-active-index="2"] > #menu-background-pattern {
          background-position: 0% -75%;
        }
        
        #menu[data-active-index="3"] > #menu-background-pattern {
          background-position: 0% -100%;
        }
        
        #menu[data-active-index="0"] > #menu-background-image {
          background-position: center 45%;
        }
        
        #menu[data-active-index="1"] > #menu-background-image {
          background-position: center 50%;
        }
        
        #menu[data-active-index="2"] > #menu-background-image {
          background-position: center 55%;
        }
        
        #menu[data-active-index="3"] > #menu-background-image {
          background-position: center 60%;
        }
        
        #menu-background-pattern {
          background-image: radial-gradient(
            rgba(255, 255, 255, 0.1) 9%, 
            transparent 9%
     .........完整代码请登录后点击上方下载按钮下载查看