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