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-siz.........完整代码请登录后点击上方下载按钮下载查看
网友评论0