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;
      transition: all 300ms cubic-bezier(0.64, 0.04, 0.35, 1);
    }
    .button-child:nth-child(2) svg {
      -webkit-transform: rotate(-45deg);
              transform: rotate(-45deg);
    }
    .button-child:nth-child(3) svg {
      -webkit-transform: rotate(-90deg);
              transform: rotate(-90deg);
    }
    .button-child svg {
      opacity: 0;
      visibility: hidden;
      transition: all 600ms cubic-bezier(0.64, 0.04, 0.35, 1) calc((-$delay)/2);
    }
    </style>
</head>

<body>
    <div class="mobile-canvas">
        <h1>Nobody actually knows what they’re doing.</h1>
        <div class="button-container">
            <div class="button-wrapper">
                <div class="button">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
                <div class="button-child-wrapper">
                    <div class="button-child">
                        <svg width="25px" height="25px" viewBox="0 0 25 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Artboard-3" transform="translate(-18.000000, -18.000000)" fill="#FC3E9F">
<path d="M40.5353125,43 C39.17625,43 38.0703125,41.894375 38.0703125,40.535 L38.0703125,25.7421875 C38.0703125,25.3971875 38.3496875,25.1171875 38.6953125,25.1171875 C39.040625,25.1171875 39.3203125,25.3971875 39.3203125,25.7421875 L39.3203125,40.535 C39.3203125,41.205 39.8653125,41.75 40.5353125,41.75 C41.205,41.75 41.75,41.205 41.75,40.535 L41.75,20.4646875 C41.75,19.7946875 41.205,19.25 40.5353125,19.25 C39.8653125,19.25 39.3203125,19.7946875 39.3203125,20.4646875 L39.3203125,21.385 C39.3203125,21.7303125 39.040625,22.01 38.6953125,22.01 C38.3496875,22.01 38.0703125,21.7303125 38.0703125,21.385 L38.0703125,20.4646875 C38.0703125,19.105625 39.17625,18 40.5353125,18 C41.8946875,18 43,19.105625 43,20.4646875 L43,40.535 C43,41.894375 41.8946875,43 40.5353125,43 Z M33.8453125,43 C32.4859375,43 31.38,41.894375 31.38,40.535 L31.38,26.7146875 C31.38,25.355625 32.4859375,24.25 33.8453125,24.25 C35.2046875,24.25 36.31,25.355625 36.31,26.7146875 L36.31,40.535 C36.31,41.894375 35.2046875,43 33.8453125,43 Z M35.06,26.7146875 C35.06,26.0446875 34.515,25.5 33.8453125,25.5 C33.1753125,25.5 32.63,26.0446875 32.63,26.7146875 L32.63,40.535 C32.63,41.205 33.1753125,41.75 33.8453125,41.75 C34.515,41.75 35.06,41.205 35.06,40.535 L35.06,26.7146875 Z M27.1546875,43 C25.7953125,43 24.69,41.894375 24.69,40.535 L24.69,32.9646875 C24.69,31.605625 25.7953125,30.5 27.1546875,30.5 C28.5140625,30.5 29.62,31.605625 29.62,32.9646875 L29.62,40.535 C29.62,41.894375 28.5140625,43 27.1546875,43 Z M28.37,32.9646875 C28.37,32.2946875 27.8246875,31.75 27.1546875,31.75 C26.485,31.75 25.94,32.2946875 25.94,32.9646875 L25.94,40.535 C25.94,41.205 26.485,41.75 27.1546875,41.75 C27.8246875,41.75 28.37,41.205 28.37,40.535 L28.37,32.9646875 Z M20.4646875,43 C19.1053125,43 18,41.894375 18,40.........完整代码请登录后点击上方下载按钮下载查看