div+css实现鼠标悬浮突出垂直导航菜单效果代码
代码语言:html
所属分类:菜单导航
代码描述:div+css实现鼠标悬浮突出垂直导航菜单效果代码
代码标签: div css 鼠标 悬浮 突出 垂直 导航 菜单
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.6.5.1.css"> <style> nav { filter: drop-shadow(0.25rem 0.25rem 0.5rem #0005); width: 100%; max-width: 14rem; } @keyframes firstShow { 0%, 100% { transform: perspective(1000px) translate3d(0, 0, 0em); } 50% { transform: perspective(1000px) translate3d(0, 0, 3em); } } @keyframes show { 0% { opacity: 0; } 100% { opacity: 1; } } ul { position: relative; aperspective: 1000px; list-style: none; padding-left: 0; box-sizing: border-box; border-radius: 1rem; transform-style: preserve-3d; perspective: 1000px; font: lighter 1rem Helvetica, sans-serif ; li { height: 3rem; display: flex; background: linear-gradient(#00000005, #0000), #fff; aborder-bottom: 1px solid #0001; abackground-clip: padding-box; box-shadow: inset 0 0 1rem -0.5rem #0002; transition: transform 0.35s, box-shadow 0.35s, background 0.35s; transform: perspective(1000px) translate3d(0,0,0); opacity: 0; animation: firstShow 0.5s ease-in-out, show 0.15s linear forwards; &:nth-child(1) { animation-delay: 0.50s; } &:nth-child(2) { animation-delay: 0.60s; } &:nth-child(3) { animation-delay: 0.70s; } &:nth-child(4) { animation-delay: 0.80s; } &:nth-child(5) { animation-delay: 0.90s; } &:nth-child(6) { animation-delay: 1.00s; } &:nth-child(7) { animation-delay: 1.10s; } &:nth-child(8) { animation-delay: 1.20s; } &:nth-child(9) { animation-delay: 1.30s; } &:first-child { border-radius: 1rem 1rem 0 0; } &:last-child { border-radius: 0 0 1rem 1rem; } &:hover, &:focus-within { transform: perspective(1000px) translate3d(0,0,3rem); } &:hover + &, &:has(+ &:focus-within), &:focus + &, &:has(+ &:focus-within){ box-shadow: inset 0 1rem 1rem -1rem #0003; transform: perspective(1000px) translate3d(0,0,2rem); } &:has(+ &:hover), &:has(+ &:focus-within){ box-shadow: inset 0 -1rem 1rem -1rem #0003; } &:hover + & + &, &:focus-within + & + &{ box-shadow: inset 0 1rem 0.5rem -0.75rem #0002; } &:has(+ & + &:hover), &:has(+ & + &:focus-within){ box-shadow: inset 0 -1rem 0.5rem -0.75rem #0002; } } h2, a { font-size: 0.9rem; display: flex; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0