css实现大气网站头部下拉导航条效果代码-html代码-BFW代码库

css实现大气网站头部下拉导航条效果代码

代码语言：html

代码描述：css实现大气网站头部下拉导航条效果代码

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

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

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

    <script src="https://kit.fontawesome.com/628c8d2499.js" crossorigin="anonymous"></script>
    <!--图标库-->


    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
    <style>
        :root {
        --menu-width: 37.5em; /* Width of menu */
        --items: 4; /* Number of items you have */
        --item-width: calc(var(--menu-width) / var(--items));
    }
    
    body {
        margin: 0;
        padding: 0;
        background: linear-gradient(45deg, #102eff, #d2379b);
        font-family: 'Roboto', sans-serif;
        height: 100vh;
        overflow: hidden;
        width: 100vw;
    }
    
    nav {
        width: var(--menu-width);
        display: flex;
        transform-style: preserve-3d;
        justify-content: space-evenly;
        position: relative;
        z-index: 2;
        margin: 0px auto;
        perspective: 2000px;
        flex-wrap: wrap;
        top: 3em;
    }
    
    nav .menu-item {
        color: white;
        font-weight: 600;
        transform-style: preserve-3d;
        flex-grow: 1;
        display: flex;
        flex-basis: var(--item-width);
        box-sizing: border-box;
        padding: 1em 1.5em;
        justify-content: center;
        perspective: 200px;
        letter-spacing: 0.5px;
        min-height: 7.5em;
    }
    
    nav .menu-text, nav .menu-text a {
        font-size: 1em;
        color: white;
        text-decoration: none;
        text-shadow: 0 1px 5px rgba(0,0,0,0.1);
        transition: color 0.1s ease-out;
        text-align: center;
    }
    
    nav .menu-text a:hover {
        color: rgba(255,255,255,0.5);
    }
    
    #sub-menu-holder {
        pointer-events: none;
        color: rgba(0,0,0,0.5);
        font-weight: normal;
        padding: 1em;
        position: absolute;
        transition: opacity 2 ease-out;
        transform: rotateX(-25deg) scale(1);
        transform-origin: 50% 7em 0em;
        opacity: 0;
        box-shadow: 0 2px 7px rgba(0,0,0,0.1), 0 2px 20px rgba(0,0,0,0.3);
        box-sizing: border-box;
        top: 3rem;
        border-radius: 10px;
        background: white;
        display: block;
        height: 300px;
        width: calc(var(--menu-width) * 1.5);
    }
    
    #sub-menu-container {
        position: absolute;
        z-index: -1;
        min-width: 100%;
        top: 2.5em;
        width: 100%;
    }
    
    nav .menu-item:hover ~ #sub-menu-container #sub-menu-holder {
        animation: clipPath 0.25s ease-out 1 forwards;        
        transition: clip-path 0.25s ease-out, left 0.15s ease-out, height 0.15s ease-out;
        opacity: 1;
        right: auto;
    }
    nav .menu-item:nth-of-type(1):hover ~ #sub-menu-container #sub-menu-holder,
    nav .menu-item:nth-of-type(4):hover ~ #sub-menu-container #sub-menu-holder {
        clip-path: inset(0 28.75em 0 0 round 10px);
        height: 14em;
    }
    
    nav .menu-item:nth-of-type(2):hover ~ #sub-menu-container #sub-menu-holder,
    nav .menu-item:nth-of-type(3):hover ~ #sub-menu-container #sub-menu-holder {
        clip-path: inset(0 15em 0 0 round 10px);
    }
    
    nav .menu-item:nth-of-type(1):hover ~ #sub-menu-container #sub-menu-holder {
        left: calc(-9em + -1px);
    }
    nav .menu-item:nth-of-type(2):ho.........完整代码请登录后点击上方下载按钮下载查看