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

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