svg+css实现按钮悬浮点击伸缩弹出菜单效果代码
代码语言:html
所属分类:菜单导航
代码描述:svg+css实现按钮悬浮点击伸缩弹出菜单效果代码
代码标签: svg css 按钮 悬浮 点击 伸缩 弹出 菜单
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { border: 0; box-sizing: border-box; margin: 0; padding: 0; } :root { --hue: 223; --bg: hsl(var(--hue),10%,90%); --fg: hsl(var(--hue),10%,10%); --primary: hsl(var(--hue),90%,55%); --primary-down: hsl(var(--hue),90%,45%); --primary-down-t: hsla(var(--hue),90%,45%,0); font-size: calc(16px + (32 - 16) * (100vw - 320px) / (1280 - 320)); } body, button { font: 1em/1.5 sans-serif; } body { background-color: var(--bg); color: var(--fg); height: 100vh; display: grid; place-items: center; transition: background-color 0.3s; } /* Main styles */ .share { position: relative; width: 3em; height: 3em; } .share__btn, .share__links:before { background-color: var(--primary); width: 100%; height: 100%; } .share__btn, .share__link { border-radius: 50%; color: hsl(0,0%,100%); display: grid; place-items: center; transition: background-color 0.15s linear; } .share__btn { position: relative; z-index: 1; } .share__btn:focus, .share__link:focus { outline: transparent; } .share__btn:focus, .share__btn:hover, .share__link:focus, .share__link:hover { background-color: var(--primary-down); } .share__btn-icon, .share__link-icon { display: block; pointer-events: none; } .share__btn-icon { width: 1.5em; height: 1.5em; } .share__btn-icon-1a, .share__btn-icon-1b, .share__btn-icon-1c, .share__btn-icon-2a, .share__btn-icon-2b, .share__btn-icon-2c { transition: all 0.3s ease-in-out; } .share__btn-icon-1a, .share__btn-icon-1b, .share__btn-icon-1c { transform-origin: 12px 12px; } .share__btn-icon-1a, .share__btn-icon-1b { stroke-dasharray: 5.7 5.7; stroke-dashoffset: 0; } .share__btn-icon-1c { stroke-dasharray: 12 12; stroke-dashoffset: -3.73; } .share__btn-icon-2a, .share__btn-icon-2b, .share__btn-icon-2c { transform-origin: 20px 21px; } .share__btn-icon-2a, .share__btn-icon-2b { stroke-dasharray: 6 6; stroke-dashoffset: 0; } .share__btn-icon-2c { stroke-dasharray: 16 16; stroke-dashoffset: -8.46; } .share__link-icon { width: 1.25em; height: 1.25em; transform: scale(0); transition: transform 0.3s cubic-bezier(0.42,-0.58,0.58,1); } .share__links, .share__links:before { border-radius: 1.5em; position: absolute; top: 0; left: 0; } .share__links { display: flex; flex-direction: column; align-items: center; list-style: none; overflow: hidden; padding-top: 3em; pointer-events: none; width: 100%; visibility: hidden; transition: visibility 0.3s 0.6s steps(1,start); z-index: 0; } .share__links:before { content: ""; display: block; transform: translate(0,-100%); transition: background-color 0.3s, transform 0.3s 0.3s ease-in-out; z-index: -1; } .share__link { background-color: var(--primary-down-t); width: 2.25em; height: 2.25em; } .share__link-item { margin: 0.375em 0; } .share__link-item:nth-child(1) .share__link-icon { transition-delay: 0.14s; } .share__link-item:nth-child(2) .share__link-icon { transition-delay: 0.04s; } /* When share is open */ .share__btn--open .share__btn-icon-1a, .share__btn--open .share__btn-icon-1b { transform: rotate(45deg) translateY(-3px); } .share__btn--open .share__btn-icon-1a { stroke-dashoffset: -5.7; } .share__btn--open .share__btn-icon-1b { stroke-dashoffset: 5.7; } .share__btn--open .share__btn-icon-1c { stroke-dasharray: 25.46 12; stroke-dashoffset: -0.73; transform: rotate(45deg); } .share__btn--open .share__btn-icon-2a, .share__btn--open .share__btn-icon-2b { stroke-dashoffset: -6; } .share__btn--open .share__btn-icon-2a { transform: translateY(-1px) rotate(45deg) translateX(-8px); } .share__btn--open .share__btn-icon-2b { transform: translateY(-1px) rotate(45deg) translateX(1px); } .share__btn--open .share__btn-icon-2c { stroke-dasharray: 25.46 16; stroke-dashoffset: -1; transform: translateY(-1px) rotate(45deg); } .share__btn--open + .share__links, .share__btn--open + .share__links:before { transition-delay: 0s; } .share__btn--open + .share__links { pointer-events: auto; visibility: visible; } .share__btn--open + .share__links:before { transform: translate(0); } .share__btn--open + .share__links .share__link-item .share__link-icon { transform: scale(1); transition-delay: 0.14s; transition-timing-function: cubic-bezier(0.42,0,0.58,1.58); } .share__btn--open + .share__links .share__link-item:nth-child(2) .share__link-icon { transition-delay: 0.26s; } .share__btn--open + .share__links .share__link-item:nth-child(3) .share__link-icon { transition-delay: 0.3s; } /* `:focus-visible` support */ @supports selector(:focus-visible) { .share__btn:focus { background-color: var(--primary); } .share__link:focus { background-color: var(--primary-down-t); } .share__btn:focus-visible, .share__btn:hover, .share__link:focus-visible, .share__link:hover { background-color: var(--primary-down); } } /* Dark theme */ @media (prefers-color-scheme: dark) { :root { --bg: hsl(var(--hue),10%,10%); --fg: hsl(var(--hue),10%,90%); } } /* Wider than mobile */ @media (min-width: 768px) { .share__links { flex-direction: row; padding-top: 0; padding-left: 3em; width: auto; height: 100%; } .share__links:before { transform: translate(-100%,0); } .share__link-item { margin: 0 0.375em; } } </style> </head> <body> <!-- partial:index.partial.html --> <svg display="none"> <symbol id="email" viewBox="0 0 20 20" > <g fill="none" stroke="currentColor" stroke-widt.........完整代码请登录后点击上方下载按钮下载查看
网友评论0