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%
          );
          background-position: 0% 0%;
          background-size: 12vmin 12vmin;
          height: 100vh;
          left: 0px;
          position: absolute;
          top: 0px;
          transition: opacity 800ms ease, 
            background-size 800ms ease,
            background-position 800ms ease;
          width: 100vw;
          z-index: 1;
        }
        
        #menu-background-image {
          background-image: url("//repo.bfw.wiki/bfwrepo/image/605ef1c989562.png");
          background-position: center 40%;
          background-size: 110vmax;
          height: 100%;
          left: 0px;  
          opacity: 0.15;
          position: absolute;
          top: 0px;
          transition: opacity 800ms ease,
            background-size 800ms ease,
            background-position 800ms ease;
          width: 100%;
          z-index: 0;
        }
        
        #menu-items:hover ~ #menu-background-pattern {
          background-size: 11vmin 11vmin;
          opacity: 0.5;
        }
       .........完整代码请登录后点击上方下载按钮下载查看