svg+css实现图标滚动菜单效果代码
代码语言:html
所属分类:菜单导航
代码描述:svg+css实现图标滚动菜单效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { height: 100vh; max-width: 100%; overflow: clip; margin: 0; display: grid; place-items: center; } .container { position: relative; } nav { display: flex; align-items: center; gap: 0.5rem; white-space: nowrap; a { text-decoration: none; display: flex; gap: 0.4rem; align-items: center; color: #455a64; padding: 0.5rem 1rem; svg { pointer-events: none; width: 1.2em; fill: currentColor; } &:hover, &:focus { color: #1e88e5; } } } #duplicate-nav { position: absolute; inset: 0; background: #1e88e5; pointer-events: none; clip-path: inset(0 77% 0 0% round 1rem); transition: clip-path 0.2s; a { color: white; } } </style> </head> <body translate="no"> <div class="container"> <nav id="nav"> <a href="#home"><svg viewBox="0 0 576 512" width="100" title="home"> <path d="M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z" /> </svg> Home</a> <a href="#about"><svg viewBox="0 0 576 512" width="100" title="book-open"> <path d="M542.22 32.05c-54.8 3.11-163.72 14.43-230.96 55.59-4.64 2.84-7.27 7.89-7.27 13.17v363.87c0 11.55 12.63 18.85 23.28 13.49 69.18-34.82 169.23-44.32 218.7-46.92 16.89-.89 30.02-14.43 30.02-30.66V62.75c.01-17.71-15.35-31.74-33.77-30.7zM264.73 87.64C197.5 46.48 88.58 35.17 33.78 32.05 15.36 31.01 0 45.04 0 62.75V400.6c0 16.24 13.13 29.78 30.02 30.66 49.49 2.6 149.59 12.11 218.77 46.95 10.62 5.35 23.21-1.94 23.21-13.46V100.63c0-5.29-2.62-10.14-7.27-12.99z" /> </svg> About</a> <a href="#contact&q.........完整代码请登录后点击上方下载按钮下载查看
网友评论0