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