js实现一个手风琴式的美食菜单点餐效果代码
代码语言: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.........完整代码请登录后点击上方下载按钮下载查看
网友评论0