css+svg实现单个按钮点击扇形弹出子菜单按钮效果代码-html代码-BFW代码库

代码语言：html

代码描述：css+svg实现单个按钮点击扇形弹出子菜单按钮效果代码

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

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        @import url("https://fonts.googleapis.com/css?family=Montserrat:100");
    @-webkit-keyframes flicker {
      0%,
    	19%,
    	21%,
    	23%,
    	25%,
    	54%,
    	56%,
    	100% {
        box-shadow: 0 0 9px 2px #fc3e9f, 0 0 9px 2px #fc3e9f inset;
      }
      20%,
    	24%,
    	55% {
        box-shadow: none;
        opacity: 0.8;
      }
    }
    @keyframes flicker {
      0%,
    	19%,
    	21%,
    	23%,
    	25%,
    	54%,
    	56%,
    	100% {
        box-shadow: 0 0 9px 2px #fc3e9f, 0 0 9px 2px #fc3e9f inset;
      }
      20%,
    	24%,
    	55% {
        box-shadow: none;
        opacity: 0.8;
      }
    }
    @-webkit-keyframes flicker-icon {
      0%,
    	19%,
    	21%,
    	23%,
    	25%,
    	54%,
    	56%,
    	100% {
        fill: #fc3e9f;
      }
      20%,
    	24%,
    	55% {
        fill: #411a58;
        opacity: 0.8;
      }
    }
    @keyframes flicker-icon {
      0%,
    	19%,
    	21%,
    	23%,
    	25%,
    	54%,
    	56%,
    	100% {
        fill: #fc3e9f;
      }
      20%,
    	24%,
    	55% {
        fill: #411a58;
        opacity: 0.8;
      }
    }
    * {
      box-sizing: border-box;
    }
    
    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
    
    body {
      background-color: #131222;
      font-family: 'Montserrat', sans-serif;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .mobile-canvas {
      position: relative;
      z-index: 10;
      width: 375px;
      height: 667px;
      overflow: hidden;
      background-color: #411a58;
      padding: 2em;
    }
    .mobile-canvas h1 {
      transition: all 300ms ease-in-out;
      color: white;
      font-weight: 100;
      font-size: 4rem;
    }
    .mobile-canvas.open .overlay {
      opacity: 0.6;
    }
    .mobile-canvas.open h1 {
      -webkit-filter: blur(5px);
              filter: blur(5px);
    }
    
    .overlay {
      position: absolute;
      z-index: 20;
      width: 100%;
      height: 100%;
      opacity: 0;
      top: 0;
      left: 0;
      transition: all 300ms ease-in-out;
      background: #240e31;
    }
    
    .button-container {
      position: absolute;
      bottom: 40px;
      right: 40px;
      width: 65px;
      height: 65px;
    }
    .button-container .button-wrapper {
      position: relative;
      width: 100%;
      height: 100%;
    }
    .button-container.open .button {
      border-color: #2dfbb2;
      box-shadow: 0 0 9px 2px #2dfbb2, 0 0 9px 2px #2dfbb2 inset;
    }
    .button-container.open .button span {
      width: 3px;
      background-color: #2dfbb2;
      box-shadow: 0 0 9px 2px #2dfbb2, 0 0 9px 2px #2dfbb2 inset;
      transition: margin 300ms, border-radius 300ms 600ms, height 300ms 600ms, -webkit-transform 300ms;
      transition: margin 300ms, transform 300ms, border-radius 300ms 600ms, height 300ms 600ms;
      transition: margin 300ms, transform 300ms, border-radius 300ms 600ms, height 300ms 600ms, -webkit-transform 300ms;
    }
    .button-container.open .button span:first-child, .button-container.open .button span:last-child {
      margin: 0;
      height: 30px;
      border-radius: 5px;
    }
    .button-container.open .button span:first-child {
      -webkit-transform: translate(-50%, -50%) rotate(45deg);
              transform: translate(-50%, -50%) rotate(45deg);
    }
    .button-container.open .button span:nth-of-type(2) {
      opacity: 0;
    }
    .button-container.open .button span:last-child {
      -webkit-transform: translate(-50%, -50%) rotate(-45deg);
              transform: translate(-50%, -50%) rotate(-45deg);
    }
    .button-container.open .button-child-wrapper {
      -webkit-transform: translateX(-150px);
              transform: translateX(-150px);
      transition-delay: 0s;
    }
    .button-container.open .button-child {
      box-shadow: 0 0 9px 2px #fc3e9f, 0 0 9px 2px #fc3e9f inset;
      transition-delay: 500ms;
    }
    .button-container.open .button-child svg {
      opacity: 1;
      visibility: visible;
      transition-delay: 500ms;
    }
    .button-container.open .button-child svg g {
      -webkit-animation: flicker-icon 1.5s infinite alternate;
              animation: flicker-icon 1.5s infinite alternate;
    }
    .button-container.open .button-child:nth-child(2) {
      -webkit-transform: rotate(45deg);
              transform: rotate(45deg);
    }
    .button-container.open .button-child:nth-child(3) {
      -webkit-transform: rotate(90deg);
              transform: rotate(90deg);
    }
    
    .button,
    .button-child-wrapper {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }
    
    .button {
      border-radius: 50%;
      border: 3px solid #fc3e9f;
      z-index: 40;
      box-shadow: 0 0 9px 2px #fc3e9f, 0 0 9px 2px #fc3e9f inset;
      transition: all 300ms ease-in-out 500ms;
    }
    .button span {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
      width: 5px;
      height: 5px;
      background-color: #fc3e9f;
      border-radius: 50%;
      box-shadow: 0 0 9px 2px #fc3e9f, 0 0 9px 2px #fc3e9f inset;
      transition: height 300ms, margin 300ms 600ms, background-color 600ms, border-radius 600ms, -webkit-transform 600ms;
      transition: height 300ms, transform 600ms, margin 300ms 600ms, background-color 600ms, border-radius 600ms;
      transition: height 300ms, transform 600ms, margin 300ms 600ms, background-color 600ms, border-radius 600ms, -webkit-transform 600ms;
    }
    .button span:first-child {
      margin-top: -10px;
    }
    .button span:last-child {
      margin-top: 10px;
    }
    
    .button-child-wrapper {
      transition: -webkit-transform 0.3s cubic-bezier(0.5, -0.5, 0.5, 1.5) 500ms;
      transition: transform 0.3s cubic-bezier(0.5, -0.5, 0.5, 1.5) 500ms;
      transition: transform 0.3s cubic-bezier(0.5, -0.5, 0.5, 1.5) 500ms, -webkit-transform 0.3s cubic-bezier(0.5, -0.5, 0.5, 1.5) 500ms;
      z-index: 30;
    }
    
    .button-child {
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      border-radius: 50%;
      border: 3px solid #fc3e9f;
      -webkit-transform-origin: 182.5px;
              transform-origin: 182.5px;
      tran.........完整代码请登录后点击上方下载按钮下载查看