炫酷菜单动态滑动效果
代码语言:html
所属分类:菜单导航
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> Fancy tab bar active animation</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> .tabbar { --primary: #275EFE; --background: #fff; --icon-active: #fff; --x: 64px; width: 100%; margin: 0; padding: 0 16px; border-radius: 0 0 28px 28px; list-style: none; position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--background); } .tabbar:before, .tabbar:after { content: ''; position: absolute; left: 0; border-radius: 50%; -webkit-transform: translateX(var(--x)); transform: translateX(var(--x)); } .tabbar:before { width: 64px; height: 64px; margin-left: -32px; background: var(--primary); top: -16px; z-index: 1; } .tabbar:after { width: 84px; height: 84px; margin-left: -42px; background: rgba(255, 255, 255, 0.08); top: -26px; } .tabbar li a { display: block; padding: 24px 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: -webkit-transform .2s ease; transition: transform .2s ease; transition: transform .2s ease, -webkit-transform .2s ease; -webkit-tap-highlight-color: transparent; } .tabbar li a div { --y: 0; width: 32px; height: 32px; margin: 0 auto; position: relative; z-index: 1; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateY(var(--y)); transform: translateY(var(--y)); } .tabbar li a div svg { display: block; width: 32px; height: 32px; fill: rgba(255, 255, 255, 0); stroke-width: 1px; stroke: var(--primary); } .tabbar li a div:before { --s-x: 1; --s-y: 1; content: ''; display: block; position: absolute; z-index: 1; -webkit-transform: scaleX(var(--s-x)) scaleY(var(--s-y)); transform: scaleX(var(--s-x)) scaleY(var(--s-y)); } .tabbar li a.box div:before { --s-x: .75; left: 50%; margin-left: -1px; width: 2px; height: 12px; bottom: 4px; border-radius: 1px; background: var(--primary); } .tabbar li a.box div em { --s-x: 1; --s-y: 1; display: block; position: absolute; top: 50%; left: 50%; z-index: 1; } .tabbar li a.box div em:before, .tabbar li a.box div em:after { --r: 0deg; content: ''; display: block; height: 2px; border-radius: 1px; width: 13px; background: var(--primary); position: absolute; bottom: -1px; -webkit-transform: rotateZ(var(--r)) translateY(1px) scaleY(0.75); transform: rotateZ(var(--r)) translateY(1px) scaleY(0.75); } .tabbar li a.box div em:before { --r: 30deg; right: -1px; -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; } .tabbar li a.box div em:after { --r: -30deg; left: -1px; -webkit-transform-origin: 0% 50%; transform-origin: 0% 50%; } .tabbar li a.home div:before { --s-x: .75; --s-y: .75; border: 2px solid var(--primary); border-bottom: 0; width: 12px; height: 17px; border-radius: 2px 2px 0 0; left: 50%; bottom: 1px; margin-left: -6px; -webki.........完整代码请登录后点击上方下载按钮下载查看
网友评论0