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

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

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