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