svg+css+js模仿手机底部滑动导航条效果代码
代码语言:html
所属分类:菜单导航
代码描述:svg+css+js模仿手机底部滑动导航条效果代码
代码标签: svg css js 模仿 手机 底部 滑动 导航条
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700"); body, html { height: 100%; } body { margin: 0; display: flex; align-items: center; justify-content: center; background: #e9ecff; font-family: "Roboto"; } nav { position: relative; } ul { list-style-type: none; padding: 0; background: #432fbf; border-bottom-left-radius: 40px; border-bottom-right-radius: 40px; box-shadow: 2px 10px 20px rgba(67, 47, 191, 0.5); } li { display: inline-block; margin: 40px 20px; } li:first-child { margin-left: 30px; } li:last-child { margin-right: 30px; } a { cursor: pointer; display: flex; align-items: center; padding: 10px 25px; } svg { stroke: #9386ea; width: 44px; height: 44px; transform: translateX(35px); transition: 0.4s ease all; } a.active { color: white; } a.active svg { stroke: white; transform: translateX(0px); } .link-text { color: white; margin-left: 16px; opacity: 0; transition: 0.3s ease all; user-select: none; height: 42px; display: flex; align-items: center; z-index: 1; } a.active .link-text { opacity: 1; transition-delay: 0.1s; } .link-background { position: absolute; left: 30px; top: 53px; background: #5e4ecb; border-radius: 18px; width: 153px; height: 70px; z-index: 0; transition: 0.4s cubic-bezier(0.7, 0, 0.38, 0.86) all; } </style> </head> <body> <nav> <div class="link-background"></div> <ul> <li> <a class="active"> <svg> <use xlink:href="#home"> </svg> <span class="link-text">Home</span> </a> </li> <li> <a> <svg> <use xlink:href="#inbox"> </svg> <span class="link-text">Inbox</span> </a> </li> <li> <a> <svg> <use xlink:href="#profile"> </svg> <span class="link-text">Profile</span> </a> </li> </ul> </nav> <svg style=display:none;> <symbol version="1.1" id="home" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 50 50"> <path fill="none" stroke="" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M31,44.738v-8.52 c0-1.505-0.69-2.929-1.877-3.87l0,0c-1.826-1.448-4.421-1.448-6.247,0l0,0C21.69,33.288,21,34.712,21,36.218v3.565" /> <line fill="none" stroke="" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="15" y1="20.223" x2="29" y2="20.223" /> <path fill="none" stroke="" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M8,19.232 L24.681.........完整代码请登录后点击上方下载按钮下载查看
网友评论1