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

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

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