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; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0