css实现全屏下拉卡片菜单效果代码
代码语言:html
所属分类:菜单导航
代码描述:css实现全屏下拉卡片菜单效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Exo+2:wght@400;600&display=swap'> <style> * { border: 0; box-sizing: border-box; margin: 0; padding: 0; } :root { --hue: 223; --bg: hsl(var(--hue),10%,90%); --fg: hsl(var(--hue),10%,10%); --primary: hsl(var(--hue),90%,55%); --trans-dur: 0.3s; font-size: calc(16px + (20 - 16) * (100vw - 320px) / (1280 - 320)); } body { background-color: var(--bg); color: var(--fg); font: 1em/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Cantarell, sans-serif; width: 100vw; height: 100vh; overflow-x: hidden; transition: background-color var(--trans-dur), color var(--trans-dur); } main { margin: auto; padding: 5.5em 1.5em 1.5em 1.5em; max-width: 35em; } h1 { font-size: 2em; margin: 0 0 1.5rem; } p { margin-bottom: 1.5em; } .no-scroll { overflow: hidden; } .nav { font-family: "Exo 2", sans-serif; position: fixed; top: 0; text-align: center; text-transform: uppercase; width: 100vw; } .nav__arrow, .nav__items { z-index: 0; } .nav__arrow, .nav__item { color: hsl(0,0%,0%,0.7); } .nav__arrow { display: block; pointer-events: none; position: absolute; top: 3em; left: calc(50% - 0.375em); width: 0.75em; height: 0.375em; transition: opacity 0.15s 0.15s ease-in-out, transform 0.15s 0.15s ease-in-out; } .nav__items { list-style: none; position: relative; width: inherit; } .nav__item { background-color: hsl(var(--hue),90%,70%); box-shadow: 0 0 0 hsla(0,0%,0%,0.3); font-size: 0.75em; font-weight: 600; letter-spacing: 0.25em; position: absolute; width: 100%; height: 25vh; min-height: 8rem; transition: box-shadow var(--trans-dur) ease-in-out, transform var(--trans-dur) ease-in-out, visibility var(--trans-dur) steps(1); transform: translateY(calc(-100% + 4rem)); visibility: hidden; z-index: 0; } .nav__item:nth-of-type(2) { background-color: hsl(3,90%,70%); z-index: -1; } .nav__item:nth-of-type(3) { background-color: hsl(33,90%,70%); z-index: -2; } .nav__item:nth-of-type(4) { background-color: hsl(153,90%,40%); z-index: -3; } .nav__item-link { background-color: hsla(0,0%,100%,0); color: inherit; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding: 1.5rem; text-decoration: none; transition: background-color 0.15s ease-in-out; width: 100%; height: 100%; } .nav__item-link:focus { background-color: hsla(0,0%,100%,0.2); outline: transparent; } .nav__item-icon { display: block; margin: 0 auto 1.5em; opacity: 0; pointer-events: none; width: 2em; height: 2em; transition: opacity var(--trans-dur) ease-in-out, transform var(--trans-dur) ease-in-out; transform: scale(0); } .nav--open { overflow-x: hidden; overflow-y: auto; height: 100%; } .nav--open .nav__arrow { opacity: 0; transform: scale(0); transition-delay: 0s; } .nav--open .nav__item-icon { opacity: 1; transform: scale(1); transition-delay: 0.05s; transition-timing-function: cubic-bezier(0.42,0,0.58,1.5); } .nav--open .nav__item { box-shadow: 0 0.5em 0.5em hsla(0,0%,0%,0.3); transform: translateY(0); transition-duration: var(--trans-dur), var(--trans-dur), 0s; visibility: visible; } .nav--open .nav__item:nth-of-type(2) { transform: translateY(100%); } .nav--open .nav__item:nth-of-type(2) .nav__item-icon { transition-delay: 0.1s; } .nav--open .nav__item:nth-of-type(3) { transform: translateY(200%); } .nav--open .nav__item:nth-of-type(3) .nav__item-icon { transition-delay: 0.15s; } .nav--open .nav__item:nth-of-type(4) { transform: translateY(300%); } .nav--open .nav__item:nth-of-type(4) .nav__item-icon { transition-delay: 0.2s; } .nav:not(.nav--open) .nav__item--active { box-shadow: 0 0.5em 0.5em hsla(0,0%,0%,0.3); visibility: visible; z-index: 1; } /* `:focus-visible` support */ @supports selector(:focus-visible) { .nav__item-link:focus { background-color: hsla(0,0%,100%,0); } .nav__item-link:focus-visible { background-color: hsla(0,0%,100%,0.2); } } /* Dark theme */ @media (prefers-color-scheme: dark) { :root { --bg: hsl(var(--hue),10%,20%); --fg: hsl(var(--hue),10%,90%); } } </style> </head> <body > <svg display="none"> <symbol id="home" viewBox="0 0 32 32"> <g fill="currentColor"> <polygon points="16 0,0 10,0 32,10 32,10 16,22 16,22 32,32 32,32 10"/> </g> </symbol> <symbol id="portfolio" viewBox="0 0 32 32"> <g fill="currentColor"> <path d="M30,8h-6v-2c0-1.1-.9-2-2-2H10c-1.1,0-2,.9-2,2v2H2c-1.1,0-2,.9-2,2V26c0,1.1,.9,2,2.........完整代码请登录后点击上方下载按钮下载查看
网友评论0