svg+js实现旋钮菜单点击展开效果代码-html代码-BFW代码库

代码语言：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.........完整代码请登录后点击上方下载按钮下载查看