svg+js实现旋钮菜单点击展开效果代码
代码语言:html
所属分类:菜单导航
代码描述:svg+js实现旋钮菜单点击展开效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.6.3.0.css"> <style> @property --angle { syntax: "<angle>"; initial-value: -90deg; inherits: true; } @keyframes hide { to { --angle: var(--_angle); rotate: var(--_rotate); opacity: 0; } } @keyframes show { to { --angle: var(--_angle); rotate: var(--_rotate); opacity: 1; } } .knob { display: grid; grid-template: 6rem 8rem 6rem/6rem 8rem 6rem; place-content: center; --btt-size: 8rem; --time: .5s; --op: 0; } .knob * { box-sizing: border-box; } .knob button { all: unset; cursor: pointer; user-select: none; } .knob button:focus { outline-offset: 8px; outline: 3px dashed #6ea3af; } .knob [aria-expanded] { --delay: 1s; position: relative; z-index: 1; grid-area: 2/2/3/3; border-radius: 50%; border: 1px #d4d4d4 solid; border: 0.65rem solid #d4d4d4; box-shadow: 0 -0.1rem 0.4rem #99999966, 0 0 0 0.65rem #efefef, 0 var(--bs, 0) var(--bsr, 0) #66666699; overflow: hidden; transition: box-shadow calc(var(--time) / 2) var(--delay) ease-in; aspect-ratio: 1; } .knob [aria-expanded]:hover::after, .knob [aria-expanded]:focus::after { background-image: linear-gradient(#6ea3af, #6ea3af); } .knob [aria-expanded]::before { position: absolute; content: ""; inset: 0; background-image: linear-gradient(135deg, #fdfdfd, #dadada); } .knob [aria-expanded]::after { content: ""; position: absolute; inset: 0; padding: 10% calc(50% - 2px) calc(90% - 1rem); border-radius: 3px; background-clip: content-box; background-image: linear-gradient(#747474, #747474); rotate: var(--knob-rotation, 0deg); transition: rotate 0.5s; } .knob [aria-expanded] span { clip-path: inset(50%); overflow: hidden; position: absolute; block-size: 1px; clip: rect(1px 1px 1px 1px); } .knob ul { --margin: 50%; --delay: var(--time); position: relative; grid-area: 1/1/4/4; padding: 0; list-style: none; margin: var(--margin); border-radius: 50%; overflow: hidden; aspect-ratio: 1; background: #e4e4e4; transition: margin var(--time) var(--delay); box-shadow: 0 0 1.25rem #9c9c9c; } .knob ul li { opacity: var(--op); rotate: var(--rotate); position: absolute; z-index: 1; top: 50%; left: 50%; border-radius: inherit; translate: calc(7rem * cos(var(--angle))) calc(7rem * sin(var(--angle))); margin: -1.5rem 0 0 -1.5rem; inline-size: 3rem; padding: 0.5rem; aspect-ratio: 1; } .knob ul svg { inline-size: 100%; aspect-ratio: 1; } .knob ul button { color: #000; opacity: 0.35; border-radius: inherit; height: 100%; aspect-ratio: 1; transition: opacity 0.33s; } .knob ul button:focus { opacity: 1; color: #6ea3af; } .knob:has(li:nth-child(1):focus-within) { --knob-rotation: 0deg; } .knob:has(li:nth-child(2):focus-within) { --knob-rotation: 60deg; } .knob:has(li:nth-child(3):focus-within) { --knob-rotation: 120deg; } .knob:has(li:nth-child(4):focus-within) { --knob-rotation: 180deg; } .knob:has(li:nth-child(5):focus-within) { --knob-rotation: 240deg; } .knob:has(li:nth-child(6):focus-within) { --knob-rotation: 300deg; } .knob :not([data-init])[aria-expanded=true] { --bs: .5rem; --bsr: .75rem; --delay: 0s; } .knob :not([data-init])[aria-expanded=true] ~ ul { --margin: 0; --delay: 0s; } .knob :not([data-init])[aria-expanded=true] ~ ul li { --delay: .5s; --rotate: -135deg; --_rotate: 0deg; --op: 0; animation: calc(var(--time) * 1.25) show var(--delay) ease-in forwards; } .knob :not([data-init])[aria-expanded=true] ~ ul li:nth-child(1) { --_angle: -90deg; } .knob :not([data-init])[aria-expanded=true] ~ ul li:nth-child(2) { --_angle: -30deg; } .knob :not([data-init])[aria-expanded=true] ~ ul li:nth-child(3) { --_angle: 30deg; } .knob :not([data-init])[aria-expanded=true] ~ ul li:nth-child(4) { --_angle: 90deg; } .knob :not([data-init])[aria-expanded=true] ~ ul li:nth-child(5) { --_angle: 150deg; } .knob :not([data-init])[aria-expanded=true] ~ ul li:nth-child(6) { --_angle: 210deg; } .knob :not([data-init])[aria-expanded=false] ~ ul li { --rotate: 0deg; --_rotate: -135deg; --_angle: -90deg; --op: 1; animation: calc(var(--time) * 1.25) hide 0s ease-out forwards; } .knob :not([data-init])[aria-expanded=false] ~ ul li:nth-child(1) { --angle: -90deg; } .knob :not([data-init])[aria-expanded=false] ~ ul li:nth-child(2) { --angle: -30deg; } .knob :not([data-init])[aria-expanded=false] ~ ul li:nth-child(3) { --angle: 30deg; } .knob :not([data-init])[aria-expanded=false] ~ ul li:nth-child(4) { --angle: 90deg; } .knob :not([data-init])[aria-expanded=false] ~ ul li:nth-child(5) { --angle: 150deg; } .knob :not([data-init])[aria-expanded=false] ~ ul li:nth-child(6) { --angle: 210deg; } body { display: grid; min-block-size: 100vh; place-content: center; background: linear-gradient(45deg, #f2f8d9, #a3e2c7); } </style> </head> <body> <nav class="knob"> <button aria-expanded="false" data-init> <span>Toggle Navigation</span> </button> <ul inert> <li> <button aria-label="Show favourites"> <svg focusable="false" aria-hidden="true"> <use xlink:href="#svg-1"/> </svg> </button> </li> <li> <button aria-label="Init a call"> <svg focusable="false" aria-hidden="true"> <use xlink:href="#svg-2"/> </svg> </button> </li> <li> <button aria-label="Show calendar"> <svg focusable="false" aria-hidden="true"> <use xlink:href="#svg-3"/> </svg> </button> </li> <li> <button aria-label="Adjust colors"> <svg focusable="false" aria-hidden="true"> <use xlink:href="#svg-4"/> </svg> </button> </li> <li> <button aria-label="Your ideas"> <svg focusable="false" aria-hidden="true"> <use xlink:href="#svg-5"/> </svg> </button> </li> <li> <button aria-label="Settings"> <svg focusable="false" aria-hidden="true"> <use xlink:href="#svg-6"/> </svg> </button> </li> </ul> </nav> <svg height="0" width="0" focusable="false" aria-hidden="true"> <symbol xml:space="preserve" viewBox="0 0 32 32" id="svg-1" xmlns="https://www.w3.org/2000/svg"> <path d="M31.881 12.557a2.303 2.303 0 0 0-1.844-1.511l-8.326-1.238-3.619-7.514A2.318 2.318 0 0 0 16 1c-.896 0-1.711.505-2.092 1.294l-3.619 7.514-8.327 1.238A2.3 2.3 0 0 0 .12 12.557a2.207 2.207 0 0 0 .537 2.285l6.102 6.092-1.415 8.451a2.224 2.224 0 0 0 .948 2.203 2.351 2.351 0 0 0 2.449.131L16 27.811l7.26 3.908a2.367 2.367 0 0 0 2.449-.131 2.225 2.225 0 0 0 .947-2.203l-1.416-8.451 6.104-6.092c.603-.603.81-1.485.537-2.285zm-8.293 6.806a2.216 2.216 0 0 0-.627 1.934l1.416 8.451-7.26-3.906a2.361 2.361 0 0 0-2.235 0l-7.26 3.906 1.416-8.451a2.212 2.212 0 0 0-.626-1.934L2.31 13.271l8.326-1.24a2.306 2.306 0 0 0 1.743-1.268L16 3.251l3.62 7.513a2.31 2.31 0 0 0 1.742 1.268l8.328 1.24-6.102 6.091z" fill="currentColor"/> </symbol> <symbol xml:space="preserve" viewBox="0 0 32 32" id="svg-2" xmlns="https://www.w3.org/2000/svg"> <g fill="currentColor"> <path d="M24 0H8a3 3 0 0 0-3 3v26a3 3 0 0 0 3 3h16c1.656 0 3-1.344 3-3V3a3 3 0 0 0-3-3zm1 29c0 .551-.449 1-1 1H8a1 1 0 0 1-1-1v-2.004h18V29zm0-3.004H7V6h18v19.996zM25 5H7V3a1 1 0 0 1 1-1h16c.551 0 1 .448 1 1v2z"/> <pat.........完整代码请登录后点击上方下载按钮下载查看
网友评论0