tabbar导航按钮效果
代码语言:html
所属分类:菜单导航
代码描述:tabbar导航按钮效果
代码标签: 效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> :root { --background: #cecece; --scale: 1; --icon-size: 24px; } * { margin: 0; padding: 0; box-sizing: border-box; } body { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; background: var(--background); overflow: hidden; } nav { position: relative; min-width: 350px; min-height: 80px; display: grid; grid-template-columns: repeat(5, 1fr); border-radius: 10px; padding: 0 15px; background: black; box-shadow: 0 6.7px 5.3px rgba(0, 0, 0, 0.12), 0 22.3px 17.9px rgba(0, 0, 0, 0.08), 0 100px 80px rgba(0, 0, 0, 0.04); overflow: hidden; } nav ul { height: 100%; display: flex; justify-content: center; align-items: center; } nav ul li { list-style: none; width: var(--icon-size); height: var(--icon-size); } nav ul li a { display: block; width: 100%; height: 100%; cursor: pointer; } nav ul li a svg { fill: #fff; width: 100%; height: 100%; opacity: 0.4; transition: opacity 100ms ease; pointer-events: none; } nav ul li a.active svg { opacity: 1; } nav .tubelight { position: absolute; left: 0px; top: 0px; transform: translateX(-50%); width: 45px; height: 5px; border-radius: 5px; background: #ffffff; transition: left 400ms ease; z-index: 10; } nav .tubelight .light-ray { position: absolute; left: -30%; top: 5px; width: 160%; height: 80px; clip-path: polygon(5% 100%, 25% 0px, 75% 0px, 95% 100%); background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3) -50%, rgba(255, 255, 255, 0) 90%); pointer-events: none; } .support { position: fixed; right: 10px; bottom: 10px; padding: 10px; display: flex; } .support a { margin: 0 10px; color: #222; font-size: 1.8rem; backface-visibility: hidden; transition: all 150ms ease; } .support a:hover { transform: scale(1.1); } </style> </head> <body translate="no"> <nav> <ul> <li> <a class="active"> <svg><use xlink:href="#home-icon"></use></svg> </a> </li> </ul> <ul> <li> <a> <svg><use xlink:href="#bookmark-icon"></use></svg> </a> </li> </ul> <ul> <li> <a> <svg><use xlink:href="#plus-icon"></use></svg> </a> </li> </ul> <ul> <li> <a> <svg><use xlink:href="#user-icon"></use></svg> </a> </li> </ul> <ul> <li> <a> <svg><use xlink:href="#settings-icon"></use></svg> </a> </li> </ul> <div class="tubelight"> <div class="light-ray"></div> </div> </nav> <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" id="home-icon"> <path d="M13.1428571,14.5 C13.6571429,14.5 14,14.175507 14,13.6887676 L14,6.38767551 C14,6.14430577 13.9142857,5.90093604 13.6571429,5.73868955 L8.51428571,1.6825273 C8.17142857,1.43915757 7.74285714,1.43915757 7.4,1.6825273 L2.25714286,5.73868955 C2.08571429,5.90093604 2,6.14430577 2,6.38767551 L2,13.6887676 C2,14.175507 2.34285714,14.5 2.85714286,14.5 L13.1428571,14.5 Z M5.42857143,12.8775351 L3.71428571,12.8775351 L3.71428571,6.79329173 L8,3.38611544 L12.2857143,6.79329173 L12.2857143,12.8775351 L10.5714286,12.8775351 L5.42857143,12.8775351 Z"> </path> </symbol> <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" id="favorites-icon"> <path d="M7.5125,14.3196446 C6.8625,13.7292662 1.5,9.09057902 1.5,5.54830881 C1.5,3.27113511 3.2875,1.5 5.4,1.5 C6.375,1.5 7.26875,1.92169883 8,2.5120772 C8.73125,1.83735907 9.625,1.5 10.6,1.5 C12.79375,1.5 14.5,3.35547487 14.5,5.54830881 C14.5,9.09057902 9.1375,13.7292662 8.4875,14.2353048 C8.24375,14.5726639 7.75625,14.5726639 7.5125,14.3196446 Z M5.4,3.........完整代码请登录后点击上方下载按钮下载查看
网友评论0