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