css模仿苹果mac电脑底部菜单悬浮放大效果代码
代码语言:html
所属分类:菜单导航
代码描述:css模仿苹果mac电脑底部菜单悬浮放大效果代码
代码标签: css 模仿 苹果 mac 电脑 底部 菜单 悬浮 放大
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Quicksand:wght@700&display=swap'> <style> :root { --bg-color: rgba(252, 252, 252, 0.8); --dock-border-color: rgba(255, 255, 255, 0.15); --color: black; --blur: 10px; } @media (prefers-color-scheme: dark) { :root { --bg-color: rgba(54, 54, 54, 0.8); --dock-border-color: rgba(0, 0, 0, 0.25); --color: white; } } .dock-wrapper { z-index: 10000; perspective: 800px; position: fixed; bottom: 32px; left: 50%; transform: translate(-50%, 0); padding: 1rem 2rem 0.5rem; } .dock { position: absolute; bottom: 0; left: 0; right: 0; height: 128px; width: 100%; background-color: var(--bg-color); backdrop-filter: blur(var(--blur)); border-radius: 10px; transform-style: preserve-3d; transform: rotateX(60deg); border-bottom: 5px solid var(--dock-border-color); transform-origin: bottom; } .icons { position: relative; display: flex; align-items: end; } .icons .icon { --size: 64px; --magnification: 128px; position: relative; aspect-ratio: 1; width: var(--size); transition: all 0.2s ease; padding: 0 0.5rem; } .icons .icon img { position: relative; display: block; width: 100%; height: 100%; object-fit: contain; } .icons .icon:hover { width: var(--magnification); } .icons .icon:has(+ :hover), .icons .icon:hover + .icon { width: calc(var(--size) + (var(--magnification) - var(--size)) * 2 / 3); } .icons .icon:has(+ .icon + :hover), .icons .icon:hover + .icon + .icon { width: calc(var(--size) + (var(--magnification) - var(--size)) * 1 / 3); } .icons .icon.open::before { content: ""; position: absolute; bottom: 0; width: 5px; border-radius: 50%; aspect-ratio: 1; background-color: #3c3c50; left: 50%; transform: translate(-50%); } body { background-image: url("//repo.bfw.wiki/bfwrepo/images/mac/BpfF8Nz.jpg"); background-size: cover; background-repeat: no-repeat; background-position: center; min-height: 100vh; display: grid; grid-template-rows: 24px 1fr; place-items: center; padding: 0; margin: 0; color: var(--color); } .menubar { background-color: var(--bg-color); backdrop-filter: blur(var(--blur)); width: 100%; height: 100%; } h1 { text-align: center; font-size: 3rem; padding: 1rem; margin: 0; } [data-hint] { --alpha: 0; } [data-hint]:after { content: attr(data-hint); position: absolute; left: 50%; transform: translate(-50%); top: -32px; height: 24px; backdrop-filter: blur(var(--blur)); opacity: var(--alpha); padding: 5px 10px; background: var(--bg-color); font-weight: bold; border-radius: 5px; transition: all 0.3s ease; white-space: nowrap; } [data-hint]:before { height: 0; width: 0; content: ""; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid var(--bg-color); position: absolute; backdrop-filter: blur(var(--blur)); left: 50%; transform: translate(-50%); opacity: var(--alpha); top: -8px; transition: all 0.3s ease; } [data-hint]:hover { --alpha: 1; } *, *::before, *::after { box-sizing: border-box; } :root { --win-radius: 10px; --win-color: #ececec; --titlebar: rgba(252, 252, 252, 0.8); } @media (prefers-color-scheme: dark) { :root { --win-color: #1f1f1f; --titlebar: rgba(54, 54, 54, 0.8); } } .window { --width: 450px; --height: 350px; width: var(--width); overflow: hidden; box-shadow: 0 12px 20px rgba(0, 0, 0, 0..........完整代码请登录后点击上方下载按钮下载查看
网友评论0