js实现一个手风琴式的美食菜单点餐效果代码-html代码-BFW代码库

代码语言：html

代码描述：js实现一个手风琴式的美食菜单点餐效果代码

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

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

<head>

    <meta charset="UTF-8">




    <style>
@charset "UTF-8";
@property --dt0 {
        syntax: "<time>";
        initial-value: 0s;
        inherits: true;
    }
@property --dt1 {
        syntax: "<time>";
        initial-value: 0s;
        inherits: true;
    }
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            color: inherit;
            font: inherit;
        }

        html {
            font: var(--html-s,1.25em)/1.5 ubuntu, trebuchet ms, sans-serif;
        }
@media (max-width: 360px) {
            html {
                --html-s: 1em;
            }
        }
@media (max-width: 240px) {
            html {
                --html-s: .75em;
            }
        }

        body, header, main {
            display: grid;
        }

        body {
            --not-exp: calc(1 - var(--exp));
            --i: var(--narr,1);
            --not-i: calc(1 - var(--i));
            --head-h: calc(2*clamp(1em, 8vw, 2em) + 2*Min(0.5rem, 5vmin));
            overflow-x: hidden;
            overflow-y: var(--narr,scroll);
            min-height: 100vh;
            background: #262626;
            scrollbar-width: thin;
            scrollbar-color: drimgreyrgba(0, 0, 0, 0.1);
        }
        body::-webkit-scrollbar {
            z-index: 3;
            width: 8px;
            background: rgba(0, 0, 0, 0.1);
        }
        body::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.1);
        }
        body::-webkit-scrollbar-thumb {
            background: dimgrey;
        }
@media (min-width: 740px), (orientation: landscape) {
            body {
                --narr: 0;
            }
        }

        header, main, article {
            grid-area: 1/1;
        }

        header {
            z-index: 2;
            pointer-events: none;
        }

        h1, a {
            pointer-events: auto;
        }

        h1 {
            box-sizing: border-box;
            position: fixed;
            z-index: 2;
            padding: Min(0.5rem, 5vmin);
            width: calc(var(--i)*100vh + var(--not-i)*100%);
            transform-origin: 0 0;
            transform: rotate(calc(var(--i)*-90deg)) translatex(calc(var(--i)*-100%));
            color: gainsboro;
            background: dimgray;
            font-family: z003, segoe script,cursive;
            font-size: clamp(1em, 8vw, 2em);
            line-height: 2;
        }

        nav, main {
            margin: calc(var(--not-i)*var(--head-h))0 0 calc(var(--i)*var(--head-h));
        }

        nav {
            display: flex;
            flex-direction: var(--narr,column);
            max-width: 100%;
        }

        .i {
            --abs: Max(var(--k) - var(--idx), var(--idx) - var(--k));
            --not-sel: Min(1, var(--abs));
            --sel: calc(1 - var(--not-sel));
        }

        a.i {
            flex: 1;
            place-content: center;
            overflow: hidden;
            min-width: calc(var(--not-i)*(var(--not-sel)*2em + var(--sel)*15em));
            min-height: calc(var(--i)*(var(--not-sel)*2em + var(--sel)*15em));
            transform: translate(calc(var(--i)*var(--exp)*-100%), calc(var(--not-i)*var(--exp)*-100%));
            background: linear-gradient(-45deg, transparent calc(50% - 1.5em), rgba(0, 0, 0, var(--sel)) 0 calc(50% + 1.5em), transparent 0), var(--img) 50%/cover;
            background-blend-mode: color;
            text-decoration: none;
            filter: Saturate(var(--sel));
            --dt0: calc(var(--abs)*0.05s);
            transition: min-width 0.3s ease-out calc(var(--not-sel)*0.3s), min-height 0.3s ease-out calc(var(--not-sel)*0.3s), transform 0.8s ease-in-out calc(var(--dt0) + var(--not-exp)*0.7s), filter 0.3s ease-out;
            pointer-events: auto;
        }

        span {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 25em;
            transform: translate(-50%, -50%) rotate(-45deg);
            opacity: var(--sel);
            background: rgba(0, 0, 0, 0.1);
            color: #fff;
            font-weight: 700;
            line-height: 3;
            text-align: center;
            text-shadow: 1px 1px #000;
            text-transform: uppercase;
            white-space: nowrap;
            transition: opacity 0.3s ease-out;
            pointer-events: none;
        }

        main {
            --max: Max(var(--k), var(--n) - var(--k) -1);
            overflow: hidden;
        }

        article {
            z-index: var(--sel);
            margin: 5vmin;
            padding: 5vmin;
            border-radius: 7px;
            transform: perspective(75em) rotatey(calc(var(--not-exp)*90deg));
            opacity: var(--sel);
            background: var(--img)50%/cover silver;
            background-blend-mode: screen;
            --dt1: calc(var(--max)*0.05s);
            transition: transform 0.7s calc(var(--exp)*(var(--dt1) + 0.8s)) cubic-bezier(var(--not-exp), 0, var(--not-exp), 1);
        }

        p {
            margin: 0.5em 0;
            min-height: 2em;
            background: dimgrey;
        }

        .b {
            display: inline-block;
            padding: 0 0.375em;
            border-radius: 5px;
            background: crimson;
            color: whitesmoke;
            text-decoration: none;
        }
        .b::before {
            display: inline-block;
            margin-right: 0.25em;
            content: "«";
        }
    </style>



</head>


<body style="--n: 12; --k: -1; --exp: 0">
    <style>
        .i:nth-child(1) {
            --idx: 0;
            --img: url('//repo.bfw.wiki/bfwrepo/images/intro/ex_1_bg_eggnog_ice_cream.jpg')
        }

        .i:nth-child(2) {
            --idx: 1;
            --img: url('//repo.bfw.wiki/bfwrepo/images/intro/ex_1_bg_double_choc_muffins.jpg')
        }

        .i:nth-child(3) {
            --idx: 2;
            --img: url('//repo.bfw.wiki/bfwrepo/images/intro/ex_1_bg_salted_caramel_truffles.jpg')
        }

        .i:nth-child(4) {
            --idx: 3;
            --img: url('//repo.bfw.wiki/bfwrepo/images/intro/ex_1_bg_honey_crepes.jpg')
        }

        .i:nth-child(5) {
            --idx: 4;
            --img: url('//repo.bfw.wiki/bfwrepo/images/intro/ex_1_bg_caramel_pecan_brownies.jpg')
        }

        .i:nth-child(6) {
            --idx: 5;
            --img: url('//repo.bfw.wiki/bfwrepo/images/intro/ex_1_bg_festive_gingerbread.jpg')
        }

        .i:nth-child(7) {
            --idx: 6;
            --img: url('//repo.bfw.wiki/bfwrepo/images/intro/ex_1_bg_salted_caramel_macarons.jpg')
        }

        .i:nth-child(8) {
            --idx: 7;
            --img: url('//repo.bfw.wiki/bfwrepo/images/intro/ex_1_bg_chocolate_lava_cakes.jpg')
        }

        .i:nth-child(9) {
            --idx: 8;
            --img: url('//repo.bfw.wiki/bfwrepo/images/intro/ex_1_bg_mini_apple_pies.jpg')
        }

        .i:nth-child(10) {
            --idx: 9;
            --img: url('//repo.bfw.wiki/bfwrepo/images/intro/ex_1_bg_lemon_cupcakes.jpg')
        }

        .i:nth-child(11) {
            --idx: 10;
            --img: url('//repo.bfw.wiki/bfwrepo/images/intro/ex_1_bg_baba_au_rhum.jpg')
        }

        .i:nth-child(12) {
            --idx: 11;
            --img: url('//repo.bfw.wiki/bfwrepo/images/intro/ex_1_bg_ricciarelli.jpg')
        }
    </style>
    <header>
        <h1>the yummy planet</h1>
        <nav id="top">
            <a class="i" href="#eggnog-ice-cream" aria-label="eggnog ice cream"><span aria-hidden="true">eggnog ice cream</span></a><a class="i" href="#double-choc-muffins" aria-label="double choc muffins"><span aria-hidden="true">double choc muffins</span></a><a class="i" href="#salted-caramel-truffles" aria-label="salted caramel truffles"><span aria-hidden="true">salted caramel truffles</span></a><a class="i" href="#honey-crepes" aria-label="honey crepes"><span aria-hidden="true">honey crepes</span></a><a class="i" href="#caramel-pecan-brownies" aria-label="caramel pecan brownies"><span aria-hidden="true">caramel pecan brownies</span></a><a class="i" href="#festive-gingerbread" aria-label="festive gingerbread"><s.........完整代码请登录后点击上方下载按钮下载查看