css+js实现旋钮开关点击弹出圆圈子菜单效果代码-html代码-BFW代码库

代码语言：html
所属分类：其他
代码描述：css+js实现旋钮开关点击弹出圆圈子菜单效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  


  
<style>

@layer properties {
  @property --angle {
    syntax: "<number>";
    initial-value: -90deg;
    inherits: true;
  }
  @property --icon-offset {
    syntax: "<number>";
    initial-value: 0;
    inherits: true;
  }
  @property --shadow-width {
    syntax: "<number>";
    initial-value: 0px;
    inherits: true;
  }
  @property --selector-width {
    syntax: "<number>";
    initial-value: 100;
    inherits: true;
  }
  @property --border-width {
    syntax: "<number>";
    initial-value: 0;
    inherits: true;
  }
  @property --item-opacity {
    syntax: "<number>";
    initial-value: 0;
    inherits: true;
  }
  @property --is-selected {
    syntax: "<number>";
    initial-value: 0;
    inherits: true;
  }
  @property --color-accent-on {
    syntax: "<color>";
    initial-value: black;
    inherits: true;
  }
  @property --color-accent-on-darker {
    syntax: "<color>";
    initial-value: black;
    inherits: true;
  }
  @property --color-shadow {
    syntax: "<color>";
    initial-value: black;
    inherits: true;
  }
  @property --color-shadow-darker {
    syntax: "<color>";
    initial-value: black;
    inherits: true;
  }
}
:root {
  --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
  --icon-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 7.13.97 2.29.47 1.11 1.2.1 2.47.21-1.88 1.63-.91.79.27 1.18.56 2.41-2.12-1.28-1.03-.64-1.03.62-2.12 1.28.56-2.41.27-1.18-.91-.79-1.88-1.63 2.47-.21 1.2-.1.47-1.11.97-2.27M12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2z'/%3E%3C/svg%3E");
  --icon-more: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath d='M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z'%3E%3C/path%3E%3C/svg%3E");
  --icon-refresh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z'%3E%3C/path%3E%3C/svg%3E");
  --icon-back: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z'%3E%3C/path%3E%3C/svg%3E");
  --icon-house: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5.69l5 4.5V18h-2v-6H9v6H7v-7.81l5-4.5M12 3L2 12h3v8h6v-6h2v6h6v-8h3L12 3z'%3E%3C/path%3E%3C/svg%3E");
  --icon-1: var(--icon-house);
  --icon-2: var(--icon-search);
  --icon-3: var(--icon-star);
  --icon-4: var(--icon-more);
  --icon-5: var(--icon-refresh);
  --icon-6: var(--icon-back);
  --button-active: -1;
  --debug: 0;
  --color-accent-off: hsl(267 16% 43%);
  --color-accent-off-darker: hsl(258 29% 39%);
  --color-accent-on-code: var(--angle) 100% 72%;
  --color-accent-on-darker-code: var(--angle) 98% 61%;
  --color-accent-on: hsl(var(--color-accent-on-code) / 1);
  --color-accent-on-darker: hsl(var(--color-accent-on-darker-code) / 1);
  --inner-bg: hsl(0deg 0% 90.98%);
  --outer-bg: hsl(223.81 0% 93%);
  --border-bg: hsl(0deg 0% 85%);
  --invert: 0%;
  --color-grey: hsl(0 0% 87%);
  --color-dark-grey: hsl(0 0% 95.69%);
  --angle: -90deg;
  --rotation: 0;
  --angle-offset: 90deg;
  --is-active: 0;
  --icon-offset: 100;
  --shadow: rgba(0, 0, 0, 0.125) 0px 0px 2px -0.5px,
    rgba(0, 0, 0, 0.125) 0px 1px 5px -1px,
    rgba(0, 0, 0, 0.125) 0px 4px 12px -1.5px,
    rgba(0, 0, 0, 0.125) 0px 9px 28px -2px,
    rgba(0, 0, 0, 0.125) 0px 24px 72px -2.5px;
  --icon-opacity: 0.4;
  --item-opacity: 0;
  --cubic-bezier: cubic-bezier(0.44, -0.9, 0.31, 1.55);
}

*,
*:before,
*:after {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  outline: calc(var(--debug) * 1px) dotted hsl(calc(var(--debug) * 10 * 1deg), 60%, 60%);
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Mona Sans", sans-serif;
}

main {
  --col-height:100vh;
  --col-num:1;
  --radius: 120px;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(var(--col-num), 1fr);
  --scene-bg: hsl(307deg 4% 94%);
}
@media (min-width: 500px) {
  main {
    --col-height:50vh;
  }
}
@media (min-width: 780px) {
  main {
    --col-height:100vh;
    --col-num:2;
    --radius: clamp(5vw, 150px, 10vw);
  }
}
main [data-theme=dark] {
  --scene-bg: hsl(207deg 20% 12%);
  --color-grey: hsl(0 0% 10%);
  --inner-bg: hsl(200deg 15% 10.98%);
  --outer-bg: hsl(200deg 19% 6%);
  --border-bg: hsl(200deg 10% 8%);
  --invert: 100%;
}
main > div {
  width: 100%;
  height: var(--col-height);
  display: grid;
  place-items: center;
  background: var(--scene-bg);
}

.selector {
  --shadow-width: calc(var(--radius) / 13);
  --knob-color: linear-gradient(
    to bottom,
    var(--color-accent-off),
    var(--color-accent-off-darker)
  );
  width: var(--radius);
  aspect-ratio: 1/1;
  position: relative;
  border-radius: 100000px;
  background: var(--color-dark-grey);
  box-shadow: inset rgba(0, 0, 0, 0.13) 0px 0px 2px -1px, inset rgba(0, 0, 0, 0.13) 0px 2px 8px -2px, inset rgba(0, 0, 0, 0.13) 0px 8px 34px -2px;
}
.selector .knob {
  position: absolute;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  transform: rotate(calc(var(--angle) + var(--angle-offset)));
  transition: transform 0.4s var(--cubic-bezier);
  z-index: 2;
  cursor: pointer;
  border-radius: 100000px;
  /* Let's make the knob */
}
.selector .knob:before, .selector .knob:after {
  content: "";
  display: block;
  position: absolute;
}
.selector .knob:after {
  width: 4%;
  height: 14%;
  background: var(--knob-color);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.4), 0 0 2px 1px rgba(0, 0, 0, 0.2), inset 0 1px 2px var(--color-accent-on), inset 0 -1px 2px var(--color-accent-on-darker), 0 0 calc(var(--is-active)*4px) var(--color-accent-on), 0 0 calc(var(--is-active)*16px) hsl(var(--color-accent-on-code)/0.5);
  top: 16px;
  border-radius: 100000px;
}
.selector .knob:active:after {
  transform: scale(0.95);
}
.selector .knob:hover {
  --knob-color: linear-gradient(
    to top,
    var(--color-accent-on),
    var(--color-accent-on-darker)
  );
}
.selector:has(.knob:active):after {
  transform: scale(0.95);
}
.selector.active {
  --is-active: 1;
  transition: --color-accent-on 0.3s ease 0.2s, --color-accent-on-darker 0.3s ease 0.2s, --color-accent-on-code 0.3s ease 0.2s, --color-accent-on-darker-code 0.3s ease 0.2s;
}
.selector.active .knob {
  --knob-color: linear-gradient(
    to top,
    var(--color-accent-on),
    var(--color-accent-on-darker)
  );
}
.selector.active ul {
  --selector-width: 260;
  --border-width: 13;
  --rotation: 0;
  --icon-offset: 7;
  --item-opacity: 1;
}
.selector.active ul:before {
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.18) 0px 0px 1px -1px inset, rgba(0, 0, 0, 0.16) 0px 2px 5px -2px inset, rgba(0, 0, 0, 0.063) 0px 8px 24px -4px inset;
}
.selector.active ul li {
  --is-selected: 0;
}
.selector.active ul li:nth-child(0) {
  transform: rotate(-60deg);
  transition: transform 0.5s ease 0s, --icon-offset 0.5s ease, --item-opacity 0.5s ease 0.2s;
}
.selector.active ul li:nth-child(1) {
  transform: rotate(0deg);
  transition: transform 0.5s ease 0.05s, --icon-offset 0.5s ease, --item-opacity 0.5s ease 0.2s;
}
.selector.active ul li:nth-child(2) {
  transform: rotate(60deg);
  transition: transform 0.5s ease 0.1s, --icon-offset 0.5s ease, --item-opacity 0.5s ease 0.2s;
}
.selector.active ul li:nth-child(3) {
  transform: rotate(120deg);
  transition: transform 0.5s ease 0.15s, --icon-offset 0.5s ease, --item-opacity 0.5s ease 0.2s;
}
.selector.active ul li:nth-child(4) {
  transform: rotate(180deg);
  transition: transform 0.5s ease 0.2s, --icon-offset 0.5s ease, --item-opacity 0.5s ease 0.2s;
}
.selector.active ul li:nth-child(5) {
  transform: rotate(240deg);
  transition: transform 0.5s ease 0.25s, --icon-offset 0.5s ease, --item-opacity 0.5s ease 0.2s;
}
.selector.active ul li:nth-child(6) {
  transform: rotate(300deg);
  transition: transform 0.5s ease 0.3s, --icon-offset 0.5s ease, --item-opacity 0.5s ease 0.2s;
}
.selector:after {
  content: "";
  display: block;
  position: absolute;
  width: calc(100%);
  height: calc(100%);
  border-radius: 100000px;
  background-image: linear-gradient(to bottom, var(--scene-bg), var(--color-grey));
  box-shadow: 0 0 calc(var(--radius) / 30) rgba(0, 0, 0, 0.3);
  transition: background-image 0.2s ease, transform 0.15s ease;
  transform: scale(1);
}
.selector ul {
  --selector-width: 90;
  --border-width: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.selec.........完整代码请登录后点击上方下载按钮下载查看