css实现鼠标点击单个图标周围显示多个图标导航菜单代码-html代码-BFW代码库

css实现鼠标点击单个图标周围显示多个图标导航菜单代码

代码语言：html

代码描述：css实现鼠标点击单个图标周围显示多个图标导航菜单代码，每个子图标有悬浮文本提醒。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />

     <style>
 body{
     background:white;
 }


    
.radial-menu-container {
  /* Playful Variables */
  --ink: #1f2937;
  --c-blue: #89b4ff;
  --c-red: #ff8989;
  --c-yellow: #ffdf70;
  --c-green: #89ffb4;

  /* Irregular Doodle Radii for a hand-drawn look */
  --radius-1: 50% 45% 55% 40% / 55% 45% 50% 50%;
  --radius-2: 40% 60% 45% 55% / 50% 55% 40% 60%;
  --radius-3: 55% 45% 50% 55% / 45% 55% 60% 40%;

  position: relative;
  width: min(100%, 420px);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-family: "Comic Sans MS", "Chalkboard SE", "Marker Felt", sans-serif;

  /* Background removed as requested */
  background: transparent;
  padding: 20px;
  box-sizing: border-box;
  overflow: hidden;
}

.radial-menu-container .doodle-decorations {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transform: scale(0.9);
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.radial-menu-container:has(.menu-toggle:checked) .doodle-decorations {
  opacity: 1;
  transform: scale(1);
}

.radial-menu-container .menu-toggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* CENTER DOODLE BUTTON */
.radial-menu-container .center-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4.4em;
  height: 4.4em;
  transform: translate(-50%, -50%);

  background: #ffffff;
  border: 3.5px solid var(--ink);
  border-radius: 45% 55% 45% 55% / 55% 45% 55% 45%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 100;

  /* Solid comic book drop shadow */
  box-shadow: 5px 5px 0px var(--ink);
  transition:
    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.2s ease;
}

.radial-menu-container .center-icon:hover {
  transform: translate(-50%, -50%) scale(1.05) rotate(-3deg);
  box-shadow: 7px 7px 0px var(--c-blue);
}

.radial-menu-container .center-icon:active {
  transform: translate(-50%, -50%) scale(0.95);
  box-shadow: 2px 2px 0px var(--ink);
}

.radial-menu-container .center-icon svg {
  width: 2.6em;
  height: 2.6em;
  transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.radial-menu-container .menu-toggle:checked ~ .center-icon svg {
  transform: rotate(180deg) scale(0.9);
}

/* MARKER STROKE LINES */
.radial-menu-container .connection-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-in.........完整代码请登录后点击上方下载按钮下载查看