jquery+css实现底部菜单栏悬浮动画效果代码
代码语言:html
所属分类:悬停
代码描述:jquery+css实现底部菜单栏悬浮动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Heebo:100,300,400,500,700,800,900'> <style> :root { --default: #00ffc3; --hover: #efceff; --size: 80px; --distance: calc(var(--size)*-1.1); } .goo, .goo ul { background: inherit; filter: url("#schlurp"); } ul { display: flex; justify-content: center; background: inherit; padding: 0 calc(var(--size) / 2); } ul li { width: var(--size); height: var(--size); background: var(--default); margin: 0 3px; color: black; position: relative; } .goo ul li:before { content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; border-radius: 100%; background: inherit; transition: all 0.85s ease; transform: translate3d(0, 0, 0); will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .goo ul li.hover:before { transition: all 0.5s cubic-bezier(0.09, 1.98, 0.41, 0.71); transform: translate3d(0, var(--distance), 0); background: var(--hover); } .menu { position: absolute; z-index: 1; background: transparent; text-align: center; } .menu li { background: transparent; display: flex; align-items: flex-start; justify-content: center; transition: all 0.85s ease; height: calc(var(--size) * 2); } .menu li:hover { transition: all 0.5s cubic-bezier(0.09, 1.98, 0.41, 0.71); transform: translateY(-53%); color: white; } .menu li a { display: grid; grid-template-rows: 1fr 1fr; align-items: center; justify-content: center; cursor: pointer; color: rgba(0, 0, 0, 0.6); transition: color 0.5s ease; width: 100%; height: 100%; } .menu li:hover a { color: rgba(0, 0, 0, 0.9); } nav { display: flex; justify-content: center; margin: 50px; background: var(--default); border-radius: 120px; position: fixed; bottom: 20px; left: 20px; right: 20px; } /* unimportant styles */ body { color: white; background: #333844; padding: 20px; font-family: "Heebo", sans-serif; display: flex; justify-content: center; text-align: center; } p { max-width: 70ch; font-weight: 200; } ul { list-style: none; margin: 0; } svg { width: calc(var(--size)/3); height: calc(var(--size)/3); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } </style> </head> <body> <main id=app> <h1>Gooey Navigation</h1> <p>Not very practical unless you change the <code>--distance</code> to something like <code>-35%</code>, <br>but a fun little experiment none-the-less!</p> <nav> <!-- gooey menu background --> <aside class="goo"> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </aside> <!-- actual menu, cannot be inside gooey due to svg filter --> <ul class="menu"> <li> <a href="#"> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0