svg菜单点击切换效果
代码语言:html
所属分类:菜单导航
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> .menu { --color: #fff; width: 36px; height: 36px; padding: 0; margin: 0; outline: none; position: relative; border: none; background: none; cursor: pointer; -webkit-appearence: none; -webkit-tap-highlight-color: transparent; } .menu svg { width: 64px; height: 48px; top: -6px; left: -14px; stroke: var(--color); stroke-width: 4px; stroke-linecap: round; stroke-linejoin: round; fill: none; display: block; position: absolute; } .menu svg path { transition: stroke-dasharray var(--duration, 0.85s) var(--easing, ease) var(--delay, 0s), stroke-dashoffset var(--duration, 0.85s) var(--easing, ease) var(--delay, 0s); stroke-dasharray: var(--array-1, 26px) var(--array-2, 100px); stroke-dashoffset: var(--offset, 126px); -webkit-transform: translateZ(0); transform: translateZ(0); } .menu svg path:nth-child(2) { --duration: .7s; --easing: ease-in; --offset: 100px; --array-2: 74px; } .menu svg path:nth-child(3) { --offset: 133px; --array-2: 107px; } .menu.active svg path { --offset: 57px; } .menu.active svg path:nth-child(1), .menu.active svg path:nth-child(3) { --delay: .15s; --easing: cubic-bezier(.2, .4, .2, 1.1); } .menu.active svg path:nth-child(2) { --duration: .4s; --offset: 2px; --array-1: 1px; } .menu.active svg path:nth-child(3) { --offset: 58px; } html { box-sizing: border-box; -webkit-font-smoothing: antialiased; } * { box-sizing: inherit; } *:before, *:after { box-sizing: inherit; } body { min-height: 100vh; font-family: 'Roboto', Arial; display: flex; justify-content: center; align-items: center; background: #275EFE; font-family: 'Roboto', Arial, sans-serif; } body .dribbble { position: fixed; display: block; right: 20px; bottom: 20px; } body .dribbble img { display: block; width: 76px; } body .twitter { position: fi.........完整代码请登录后点击上方下载按钮下载查看
网友评论0