css实现自适应巨型下拉图文菜单导航效果代码-html代码-BFW代码库

css实现自适应巨型下拉图文菜单导航效果代码

代码语言：html

代码描述：css实现自适应巨型下拉图文菜单导航效果代码，鼠标悬浮在menu上，巨型菜单下滑出现。

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

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

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

<style>
@layer properties {
  @property --background-position-y {
    syntax: "<number>";
    inherits: true;
    initial-value: 250;
  }
}
:root {
  --background-position-y: 250;
  --default-open: 0;
  --items-per-row: 5;
  --padding: 40px;
  --img-height: 120px;
  --debug: 0;
  --color-yellow: hsl(46.37deg 100% 39.67%);
  --color-pink: hsl(329.9deg 100% 41.38%);
  --color-cyan: hsl(179.62deg 100% 23.69%);
  --color-orange: hsl(26.72deg 100% 42.84%);
  --color-purple: hsl(273.35deg 100% 59.18%);
}

@supports (color: color(display-p3 0 0 0)) {
  :root {
    --color-yellow: color(display-p3 0.98 0.75 0.13);
    --color-pink: color(display-p3 0.95 0.01 0.42);
    --color-cyan: color(display-p3 0.05 0.92 0.92);
    --color-orange: color(display-p3 0.95 0.41 0.05);
    --color-purple: color(display-p3 0.59 0.19 1);
  }
}
*,
*:before,
*:after {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  outline: calc(var(--debug) * 1px) dotted hsl(calc(var(--debug) * 10 * 1deg), 60%, 60%);
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

body {
  background: #0f0f0f;
  font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
}

main {
  container: cards.........完整代码请登录后点击上方下载按钮下载查看