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

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

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