react实现左侧弹出圆弧式菜单效果代码-html代码-BFW代码库

代码语言：html

代码描述：react实现左侧弹出圆弧式菜单效果代码

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


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500&display=swap" rel="stylesheet">
  
  
  
<style>
body {
  margin: 0px;
  overflow: hidden;
  padding: 0px;
}
body input, body h1, body h2, body h3, body a {
  font-family: "Rubik", sans-serif;
  font-weight: 400;
  margin: 0px;
  padding: 0px;
}

#app {
  background-color: #2d3240;
  height: 100vh;
  overflow: hidden;
  width: 100vw;
}
#app #menu-toggle {
  background-color: white;
  border: none;
  border-radius: 8vh;
  bottom: 0px;
  box-shadow: 0px 0px 10px 4px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  height: 8vh;
  left: 0px;
  margin: 2vh;
  position: fixed;
  width: 8vh;
  z-index: 3;
}
#app #menu-toggle:hover {
  background-color: #f0f0f0;
}
#app #menu-toggle i {
  color: #64b5f6;
  font-size: 2vh;
  height: 3vh;
  line-height: 3vh;
  text-align: center;
  width: 3vh;
}
#app #menu {
  height: 100vh;
  opacity: 0;
  position: absolute;
  transform: translateX(-50%);
  transition: opacity 250ms, transform 250ms;
  transition-delay: 300ms;
  width: 40vh;
}
#app #menu.toggled {
  opacity: 1;
  transform: translateX(0%);
  transition-delay: 0ms;
}
#app #menu.toggled #menu-quick-options .menu-quick-option {
  opacity: 1;
  transform: translateX(0%);
}
#app #menu.toggled #menu-quick-options .menu-quick-option:first-of-type, #app #menu.toggled #menu-quick-options .menu-quick-option:last-of-type {
  transform: translateX(-50%);
}
#app #menu.toggled #menu-full-options .menu-full-option {
  opacity: 1;
  transform: translateX(-0.5vh);
}
#app #menu.toggled #menu-full-options .menu-full-option:first-of-type, #app #menu.toggled #menu-full-options .menu-full-option:last-of-type {
  transform: translateX(-4vh);
}
#app #menu.toggled #menu-full-options .menu-full-option:nth-of-type(2), #app #menu.toggled #menu-full-options .menu-full-option:nth-of-type(4) {
  transform: translateX(-2vh);
}
#app #menu.toggled #menu-background-wrapper #menu-background:before {
  transform: translate(-50%, -50%);
  transition-delay: 200ms;
}
#app #menu #menu-background-wrapper {
  height: 100vh;
  left: 0px;
  position: absolute;
  top: 0px;
  width: 40vh;
  z-index: 1;
}
#app #menu #menu-background-wrapper #menu-background {
  background-color: #64b5f6;
  border-bottom-right-radius: 100%;
  border-top-right-radius: 100%;
  box-shadow: 0px 0px 20px 4px rgba(0, 0, 0, 0.15);
  height: 200vh;
  position: absolute;
  right: 0px;
  top: -50vh;
  width: 200vh;
}
#app #menu #menu-background-wrapper #menu-background:before {
  background-color: rgba(100, 181, 246, 0.05);
  border: 1px solid rgba(100, 181, 246, 0.2);
  border-bottom-right-radius: 100%;
  border-top-right-radius: 100%;
  content: "";
  height: 120%;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-100%, -50%);
  transition: transform 250ms;
  width: 120%;
  z-index: -1;
}
#app #menu #menu-profile-image {
  border-radius: 500px;
  box-shadow: 0px 0px 20px 4px rgba(0, 0, 0, 0.15);
  display: block;
  height: 40vh;
  left: 0px;
  object-fit: cover;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 40vh;
  z-index: 2;
}
#app #menu #menu-quick-options {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 40vh;
  justify-content: space-around;
  position: absolute;
  top: 50%;
  transform: translate(100%, -50%);
  width: 20vh;
  z-index: 3;
}
#app #menu #menu-quick-options .menu-quick-option {
  align-items: center;
  background-color: white;
  border: none;
  border-radius: 8vh;
  box-shadow: 0px 0px 10px 4px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  display: flex;
  height: 8vh;
  justify-content: center;
  opacity: 0;
  padding: 0px;
  transform: translateX(-30%) scale(0.25);
  transition: opacity 150ms, transform 150ms;
  width: 8vh;
}
#app #menu #menu-quick-options .menu-quick-option:hover {
  background-color: #f0f0f0;
}
#app #menu #menu-quick-options .menu-quick-option:hover .tooltip {
  opacity: 1;
  transform: translateX(100%);
}
#app #menu #menu-quick-options .menu-quick-option:first-of-type {
  transform: translate(-80%, 30%) scale(0.5);
}
#app #menu #menu-quick-options .menu-quick-option:last-of-type {
  transform: translate(-80%, -30%) scale(0.5);
}
#app #menu #menu-quick-options .menu-quick-option i {
  color: #64b5f6;
  font-size: 2vh;
  height: 3vh;
  line-height: 3vh;
  text-align: center;
  width: 3vh;
}
#app #menu #menu-quick-options .menu-quick-option .tooltip {
  background-color: #1e1e1e;
  border-radius: 0.5vh;
  box-shadow: 0px 0px 1vh 0.25vh rgba(0, 0, 0, 0.08);
  color: white;
  font-size: 1em;
  opacity: 0;
  padding: 1vh;
  pointer-events: none;
  position: absolute;
  right: -1vh;
  transform: translateX(90%);
  transition: opacity 250ms, transform 250ms;
}
#app #menu #menu-full-options {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  height: 60vh;
  justify-content: space-around;
  left: 44vh;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 20vh;
  z-index: 2;
}
#app #menu #menu-full-options .menu-full-option {
  align-items: center;
  background-color: transparent;
  border: none;
  border-radius: 0.5vh;
  cursor: pointer;
  display: flex;
  gap: 1vh;
  opacity: 0;
  padding: 1vh;
  transform: translateX(-2vh);
  transition: opacity 150ms, transform 150ms;
}
#app #menu #menu-full-options .menu-full-option:hover {
  background-color: rgba(255, 255, 255, 0.05);
}
#app #menu #menu-full-optio.........完整代码请登录后点击上方下载按钮下载查看