TweenMax实现按钮悬浮弹出选项卡菜单效果代码
代码语言:html
所属分类:菜单导航
代码描述:TweenMax实现按钮悬浮弹出选项卡菜单效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body,html { height:100%; } body { display:flex; justify-content:center; align-items:center; font-family:sans-serif; font-weight:bold; background:linear-gradient(330deg,#a63cf0 40%,#7971ff 100%); overflow:hidden; font-size:14px; flex-direction:column; } ul { list-style-type:none; background:white; padding:15px 25px; display:block; border-radius:60px; } li { display:inline-block; margin:0px 15px; } a { text-decoration:none; color:#9e61f3; display:inline-block; text-align:center; } svg { width:32px; height:32px; display:block; margin:8px auto; fill:#e6ddfd; transition:0.2s ease-in all; } .menu-btn { position:relative; border-radius:50%; width:80px; height:80px; background:white; border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:3px 3px 10px rgba(137,48,239,0.3); } .ring { position:absolute; top:-5px; left:-5px; width:90px; height:90px; background:rgba(255,255,255,0.5); border-radius:50%; -webkit-transform:scale(0.9); transform:scale(0.9); } .menu-btn:focus { outline:none; } .menu-btn >span { height:4px; border-radius:8px; background:#9e61f3; z-index:1; width:30px; -webkit-transform:rotate(90deg); transform:rotate(90deg); position:absolute; } .menu-btn >span:nth-child(2) { -webkit-transform:rotate(180deg); transform:rotate(180deg); } .nav { position:relative; margin-bottom:15px; opacity:0; -webkit-transform:translateY(110px); transform:translateY(110px); } .nav:before { position:absolute; content:""; bottom:-20px; z-index:1; left:calc(50% - 20px); border-width:20px 20px 20px 20px; border-style:solid; border-color:white transparent transparent transparent; } a.active svg { fill:#9e61f3; } </style> </head> <body> <nav class="nav"> <ul> <li><a href="#" class="active"><svg><use xlink:href="#events"></svg></a></li> <li><a href="#"><svg><use xlink:href="#inbox"></svg></a></li> <li><a href="#"><svg><use xlink:href="#profile"></svg></a></li> </ul> </nav> <button class="menu-btn"><span></span><span></span><div class="ring"></div></button> <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"><symbol xmlns="http://www.w3.org/2000/svg" id="events" viewBox="0 0 100 100"><path d="M84.027,93H15.973C11.028,93,7,88.976,7,84.027V23.143c0-4.948,4.028-8.976,8.976-8.976h68.048 c4.948,0,8.976,4.028,8.976,8.976v60.885C93,88.976,88.976,93,84.027,93z M15.976,21.333c-0.997,0-1.809,0.814-1.809,1.809v60.885 c0,0.997,0.809,1.806,1.806,1.806h68.055c0.997,0,1.806-0.809,1.806-1.806V23.143c0-0.997-0.814-1.809-1.809-1.809H15.976V21.333z M89.417,35.667H10.583C8.605,35.667,7,34.062,7,32.084c0-1.979,1.605-3.584,3.583-3.584h78.833c1.982,0,3.584,1.605,3.584,3.583 S91.398,35.667,89.417,35.667z M24.917,24.917c-1.978,0-3.583-1.605-3.583-3.583v-10.75c0-1.978,1.605-3.583,3.583-3.583 S28.5,8.605,28.5,10.583v10.75C28.5,23.311,26.895,24.917,24.917,24.917z M75.083,24.917c-1.981,0-3.583-1.605-3.583-3.583v-10.75 C71.5,8.605,73.102,7,75.083,7c1.981,0,3.583,1.605,3.583,3.583v10.75C78.667,23.311,77.065,24.917,75.083,24.917z" /><circle cx="28.5" cy="75.083" r="3.583" /><circle cx="28.5" cy="60.75" r="3.583" /><circle cx="39.25" cy="75.083" r="3.583" /><circle cx="39.25" cy="60.75" r="3.583" /><circle cx="39.25" cy="46.417" r="3.583" /><circle cx="60.75" cy="75.083" r="3.583" /><circle cx="60.75" cy="60.75" r="3.583" /><circle cx="60.75" cy="46.417" r="3.583" /><circle cx="71.5" cy="60.75" r="3.583" /><circle cx="71.5" cy="46.417" r="3.583" /><circle cx="50" cy="75.083" r="3.583" /><circle cx="50" cy="60.75" r="3.583" /><circle cx="50" cy="46.417" r="3.583" /></symbol><symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" id="inbox"><path d="M9.28,38.83l-0.083,0.156c-0.055,0.125-0.101,0.252-0.135,0.384c0,0,0,0.083,0,0.135C9.022,39.685,9.........完整代码请登录后点击上方下载按钮下载查看
网友评论0