css+js实现炫酷nero风格右键菜单代码-html代码-BFW代码库

代码语言：html

代码描述：css+js实现炫酷nero风格右键菜单代码，可调整主色调。

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  <meta name="viewport" content="width=device-width, initial-scale=1">

<link rel='stylesheet' href='https://fonts.bunny.net/css?family=amaranth:400,400i,700,700i|asap-condensed:200,300i,400,400i,600,600i,700,700i,900,900i|asap:200,300i,400,400i,500,500i,600,600i,700,700i,900,900i|kode-mono:400,500,600,700'>
  
<style>
:root {
    /* vars */
    
    --hue1: 255;
    --hue2: 222;
    --border: 1px;
    --border-color: hsl(var(--hue2), 13%, 18.5%);
    --radius: 22px;
    
    --ease: cubic-bezier(0.5, 1, 0.89, 1);
}

#menu {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition-property: visibility, opacity, filter;
    transition-duration: 0s, 0.25s, 0.25s, 0.25s;
    transition-delay: 0.5s, 0s, 0s, 0s;
    transition-timing-function: var(--ease);
    filter: blur(4px);
    
    font-family: 'Asap', sans-serif;
    color: #737985;
    
    position: fixed;
    top: 140px;
    left: 2svw;
    min-width: 275px;
    min-height: 275px;
    border-radius: var(--radius);
    border: var(--border) solid var(--border-color);
    padding: 1em;
    background: linear-gradient(235deg , hsl(var(--hue1) 50% 10% / 0.8), hsl(var(--hue1) 50% 10% / 0) 33%), linear-gradient(45deg , hsl(var(--hue2) 50% 10% / 0.8), hsl(var(--hue2) 50% 10% / 0) 33%), linear-gradient(hsl(220deg 25% 4.8% / 0.66));
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
    box-shadow: hsl(var(--hue2) 50% 2%) 0px 10px 16px -8px, hsl(var(--hue2) 50% 4%) 0px 20px 36px -14px;
}

#menu:not(.open)::before,
#menu:not(.open)::after,
#menu:not(.open) .glow {
    opacity: 0;
    pointer-events: none;
    -webkit-animation: glowoff 0.25s var(--ease) both;
            animation: glowoff 0.25s var(--ease) both;
}


#menu.open {
    
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0s;
    filter: blur(0px); 
    
    &::before,
    &::after,
    & .glow,
    & .shine {
        -webkit-animation: glow 1s var(--ease) both;
                animation: glow 1s var(--ease) both;
    }
    & .shine {
        -webkit-animation-delay: 0s;
                animation-delay: 0s;
        -webkit-animation-duration: 2s;
                animation-duration: 2s;
    }
    & .glow {
        -webkit-animation-delay: 0.2s;
                animation-delay: 0.2s;
    }
    & .glow-bright {
        -webkit-animation-delay: 0.1s;
                animation-delay: 0.1s;
        -webkit-animation-duration: 1.5s;
                animation-duration: 1.5s;
    }
    & .shine-bottom {
        -webkit-animation-delay: 0.1s;
                animation-delay: 0.1s;
        -webkit-animation-duration: 1.8s;
                animation-duration: 1.8s;
    }
    & .glow-bottom {
        -webkit-animation-delay: 0.3s;
                animation-delay: 0.3s;
    }
    & .glow-bright.glow-bottom {
        -webkit-animation-delay: 0.3s;
                animation-delay: 0.3s;
        -webkit-animation-duration: 1.1s;
                animation-duration: 1.1s;
    }
}

#menu .shine,
#menu .glow {
    --hue: var(--hue1);
}
#menu .shine-bottom,
#menu .glow-bottom {
    --hue: var(--hue2);
    --conic: 135deg;
}

#menu .shine {
}

#menu .shine,
#menu .shine::before,
#menu .shine::after {
    
    pointer-events: none;
    
    border-radius: 0;
    border-top-right-radius: inherit;
    border-bottom-left-radius: inherit;
    border: 1px solid transparent;
    
    width: 75%;
    height: auto;
    min-height: 0px;
    aspect-ratio: 1;
    display: block;
    position: absolute;
    right: calc(var(--border) * -1);
    top: calc(var(--border) * -1);
    left: auto;
    
    z-index: 1;
    
    --start: 12%;
    background: conic-gradient(
        from var(--conic, -45deg) at center in oklch,
        transparent var(--start,0%), hsl( var(--hue), var(--sat,80%), var(--lit,60%)), transparent  var(--end,50%) 
    ) border-box;
    
    -webkit-mask: 
        linear-gradient(transparent), 
        linear-gradient(black);
    
            mask: 
        linear-gradient(transparent), 
        linear-gradient(black);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-clip: padding-box, border-box;
            mask-clip: padding-box, bo.........完整代码请登录后点击上方下载按钮下载查看