svg实现悬浮伸缩圆圈导航菜单效果代码-html代码-BFW代码库

代码语言：html
代码描述：svg实现悬浮伸缩圆圈导航菜单效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">

<link href='https://fonts.googleapis.com/css?family=Josefin+Sans:400,600,700,600italic' rel='stylesheet' type='text/css'>

  
  
<style>
/*----------------------------------
looks best full screen: 
https://codepen.io/sdras/full/Kwjyzo/
-----------------------------------*/
html, body {
  margin: 0;
  padding: 0;
  width: 100vw;
  min-height: 760px;
  height: 100vh;
  background: url("//repo.bfw.wiki/bfwrepo/image/5ffa44b01145d.png") no-repeat center center;
  background-size: cover;
  font-family: "Josefin Sans", sans-serif;
  color: #fff;
}

.app {
  width: 400px;
  height: 700px;
  position: absolute;
  left: 50%;
  margin-left: -200px;
  margin-top: 20px;
  background: url("//repo.bfw.wiki/bfwrepo/image/5ffa44c442364.png") top center no-repeat #333c4d;
}

.menu {
  float: right;
  margin-top: 140px;
}

#itemsContainer, .line-draw, .big-circle, #x-replace {
  visibility: hidden;
  -webkit-backface-visibility: hidden;
  perspective: 1000;
  z-index: 1;
}

#menu1, #menu2, #menu3 {
  -webkit-backface-visibility: hidden;
  perspective: 1000;
  z-index: 1;
  cursor: pointer;
}

#trigger {
  cursor: pointer;
}

.text {
  margin-top: 355px;
  width: 80%;
  margin-left: 10%;
  color: #f9f7eb;
}
.text h2 {
  text-transform: uppercase;
  font-weight: 300;
  letter-spacing: 0.04em;
}
.text p {
  padding-top: 5px;
  line-height: 1.4em;
  font-size: 17px;
  letter-spacing: 0.025em;
}

footer {
  bottom: 0;
  position: absolute;
  width: 100%;
  height: 60px;
  background: #1d0829;
}

.arrow-left {
  margin-top: 15px;
  margin-left: 15px;
}

.arrow-right {
  float: right;
  margin-top: 15px;
  margin-right: 15px;
}

@-moz-document url-prefix() {
  #item2 {
    margin-left: 20px;
  }
}
</style>



</head>

<body>
  <div class="app">
  <svg class="menu" id="menu" width="172.5" height="242.5" viewBox="-15 -15 190 260">
    <symbol id="icon-2" viewBox="0 0 35 35">
      <path fill="#BD8590" d="M0.5 31.983c0.268 0.067 0.542-0.088 0.612-0.354 1.030-3.843 5.216-4.839 7.718-5.435 0.627-0.149 1.122-0.267 1.444-0.406 2.85-1.237 3.779-3.227 4.057-4.679 0.034-0.175-0.029-0.355-0.165-0.473-1.484-1.281-2.736-3.204-3.526-5.416-0.022-0.063-0.057-0.121-0.103-0.171-1.045-1.136-1.645-2.337-1.645-3.294 0-0.559 0.211-0.934 0.686-1.217 0.145-0.087 0.236-0.24 0.243-0.408 0.221-5.094 3.849-9.104 8.299-9.13 0.005 0 0.102 0.007 0.107 0.007 4.472 0.062 8.077 4.158 8.206 9.324 0.004 0.143 0.068 0.277 0.178 0.369 0.313 0.265 0.459 0.601 0.459 1.057 0 0.801-0.427 1.786-1.201 2.772-0.037 0.047-0.065 0.101-0.084 0.158-0.8 2.536-2.236 4.775-3.938 6.145-0.144 0.116-0.212 0.302-0.178 0.483 0.278 1.451 1.207 3.44 4.057 4.679 0.337 0.146 0.86 0.26 1.523 0.403 2.477 0.536 6.622 1.435 7.639 5.232 0.060 0.223 0.262 0.37 0.482 0.37 0.043 0 0.086-0.006 0.13-0.017 0.267-0.072 0.425-0.346 0.354-0.613-1.175-4.387-5.871-5.404-8.393-5.95-0.585-0.127-1.090-0.236-1.336-0.344-1.86-0.808-3.006-2.039-3.411-3.665 1.727-1.483 3.172-3.771 3.998-6.337 0.877-1.14 1.359-2.314 1.359-3.317 0-0.669-0.216-1.227-0.644-1.663-0.238-5.604-4.237-10.017-9.2-10.088l-0.149-0.002c-4.873 0.026-8.889 4.323-9.24 9.83-0.626 0.46-0.944 1.105-0.944 1.924 0 1.183 0.669 2.598 1.84 3.896 0.809 2.223 2.063 4.176 3.556 5.543-0.403 1.632-1.55 2.867-3.414 3.676-0.241 0.105-0.721 0.22-1.277 0.352-2.541 0.604-7.269 1.729-8.453 6.147-0.071 0.267 0.087 0.54 0.354 0.612z"></path>
    </symbol>
    <symbol id="icon-3" viewBox="0 0 35 35">
      <path fill="#BD8590" d="M0 31.479c0 0.276 0.224 0.5 0.5 0.5h31.111c0.067 0 0.132-0.013 0.193-0.039s0.116-0.063 0.162-0.109c0.001-0.001 0.002-0.001 0.003-0.002 0.003-0.003 0.003-0.009 0.007-0.012 0.051-0.055 0.084-0.122 0.107-0.195 0.007-0.023 0.010-0.045 0.014-0.069 0.004-0.025 0.015-0.047 0.015-0.073 0-0.040-0.014-0.075-0.023-0.112-0.003-0.014 0.003-0.028-0.002-0.042l-3.16-9.715c-0.024-0.075-0.066-0.144-0.122-0.199l-17.117-17.118c-0.018-0.028-0.031-0.058-0.055-0.083l-3.739-3.739c-0.607-0.607-1.595-0.607-2.203 0l-5.235 5.235c-0.294 0.294-0.456 0.685-0.456 1.101s0.162 0.808 0.456 1.102l3.656 3.656c0.018 0.027 0.030 0.058 0.054 0.082l17.090 17.205c0.059 0.060 0.131 0.103 0.212 0.127l6.713 2h-27.681c-0.276-0.001-0.5 0.223-0.5 0.499zM6.362 10.161l15.687 15.486-0.577 2.002-16.245-16.353 1.135-1.135zM22.816 25l-15.748-15.545 2.437-2.437 15.607 15.648v2.334h-2.296zM25.735 21.875l-15.523-15.564 1.039-1.039 16.211 16.211-1.727 0.392zM22.988 26h2.624c0.276 0 0.5-0.224 0.5-0.5v-2.685l2.007-0.456 2.723 8.37-8.488-2.529 0.634-2.2zM1 6.808c0-0.149 0.058-0.288 0.163-0.394l5.235-5.235c0.217-0.217 0.57-0.218 0.789 0l3.372 3.372-6.023 6.023-3.372-3.372c-0.106-0.105-0.164-0.245-0.164-0.394z"></path>
    </symbol>
    <symbol id="icon-4" viewBox="0 0 35 35">
      <path fill="#BD8590" d="M28.354 1.354c0.115-0.115 0.167-0.279 0.139-0.439s-0.132-0.297-0.28-0.366c-2.291-1.080-5.010-0.606-6.798 1.191-1.698 1.709-2.291 4.393-1.499 6.637l-11.539 11.539c-0.627-0.224-1.297-0.336-1.996-0.336-1.714 0-3.376 0.682-4.559 1.872-1.782 1.792-2.284 4.44-1.281 6.747 0.066 0.152 0.203 0.262 0.366 0.292 0.164 0.031 0.331-0.021 0.447-0.139l3.491-3.509c0.23-0.232 0.601-0.263 0.793-0.068l1.507 1.577c0.219 0.221 0.209 0.562-0.022 0.795l-3.478 3.5c-0.115 0.115-0.166 0.279-0.138 0.439s0.132 0.296 0.279 0.365c0.829 0.391 1.701 0.588 2.591 0.588 1.572 0 3.065-0.632 4.207-1.78 1.698-1.708 2.291-4.392 1.498-6.636l11.539-11.54c0.628 0.224 1.298 0.336 1.997 0.336 1.714 0 3.376-0.682 4.559-1.872 1.782-1.792 2.284-4.44 1.281-6.747-0.066-0.152-0.203-0.262-0.366-0.292-0.161-0.028-0.33 0.021-0.447 0.139l-3.491 3.509c-0.215 0.216-0.58 0.214-0.801-0.010l-1.499-1.499c-0.226-0.227-0.225-0.568-0.001-0.794l3.501-3.499zM24.146 6.354l1.499 1.499c0.599 0.602 1.625 0.605 2.218 0.009l2.93-2.944c0.469 1.741-0.016 3.609-1.324 4.926-0.997 1.003-2.399 1.577-3.85 1.577-0.683 0-1.33-0.128-1.923-0.38-0.188-0.081-0.405-0.037-0.549 0.106l-12 12c-0.144 0.144-0.186 0.36-0.107 0.547 0.803 1.91 0.314 4.375-1.163 5.861-1.321 1.328-3.244 1.801-4.985 1.258l2.941-2.96c0.621-0.625 0.631-1.594 0.029-2.198l-1.506-1.577c-0.581-0.585-1.614-0.549-2.218 0.062l-2.93 2.944c-0.469-1.741 0.016-3.609 1.324-4.926 0.997-1.003 2.399-1.577 3.85-1.577 0.683 0 1.33 0.128 1.923 0.38 0.187 0.082 0.405 0.037 0.549-0.106l12-12c0.144-0.144 0.186-0.36 0.107-0.547-0.803-1.91-0.314-4.376 1.163-5.862 1.32-1.328 3.242-1.798 4.982-1.258l-2.96 2.961c-0.616 0.617-0.616 1.585 0 2.205zM29.21 30.647c-0.221 0.222-0.604 0.222-0.827-0.002l-10.030-10c-0.195-0.193-0.512-0.194-0.707 0.002s-0.194 0.512 0.001 0.707l10.029 9.998c0.3 0.301 0.698 0.467 1.122 0.467 0 0 0 0 0 0 0.424 0 0.822-0.166 1.128-0.474l1.429-1.493c0.615-0.618 0.615-1.587-0.001-2.206l-10-10c-0.195-0.195-0.512-0.195-0.707 0s-0.195 0.512 0 0.707l9.999 9.999c0.229 0.23 0.229 0.564-0.007 0.802l-1.429 1.493zM5.854 3.146l-3-3c-0.195-0.195-0.512-0.195-0.707 0l-2 2c-0.195 0.195-0.195 0.512 0 0.707l3 3c0.097 0.098 0.225 0.147 0.353 0.147s0.256-0.049 0.354-0.146l0.646-0.647 7.646 7.646c0.098 0.098 0.226 0.147 0.354 0.147s0.256-0.049 0.354-0.146c0.195-0.195 0.195-0.512 0-0.707l-7.647-7.647 0.646-0.646c0.196-0.196 0.196-0.512 0.001-0.708zM3.5 4.793l-2.293-2.293 1.293-1.293 2.293 2.293-1.293 1.293z"></path>
    </symbol>
    <symbol id="icon-5" viewBox="0 0 35 35">
      <path fill="#BD8590" d="M1.5 9c-0.276 0-0.5 0.224-0.5 0.5v20.946c0 0.665 0.316 1.039 0.582 1.235 0.318 0.236 0.692 0.319 1.026 0.319 0.201 0 0.387-0.030 0.538-0.077 2.929-0.895 9.345-7.482 10.973-9.19 1.587 1.718 7.805 8.295 10.734 9.19 0.404 0.124 1.055 0.135 1.564-0.243 0.267-0.196 0.583-0.569 0.583-1.234v-20.946c0-0.276-0.224-0.5-0.5-0.5s-0.5 0.224-0.5 0.5v20.946c0 0.27-0.101 0.375-0.177 0.431-0.178 0.132-0.484 0.15-0.677 0.091-3.040-0.929-10.575-9.22-10.65-9.303-0.094-0.104-0.227-0.164-0.367-0.165-0.127-0.001-0.273 0.056-0.369 0.159-0.078 0.083-7.862 8.378-10.906 9.309-0.192 0.059-0.499 0.041-0.677-0.091-0.076-0.056-0.177-0.162-0.177-0.431v-20.946c0-0.276-0.224-0.5-0.5-0.5zM28 6.5v-5c0-0.827-0.673-1.5-1.5-1.5h-25c-0.827 0-1.5 0.673-1.5 1.5v5c0 0.276 0.224 0.5 0.5 0.5h27c0.276 0 0.5-0.224 0.5-0.5zM27 6h-26v-4.5c0-0.276 0.224-0.5 0.5-0.5h25c0.276 0 0.5 0.224 0.5 0.5v4.5z"></path>
    </symbol>
    <g id="symbolsContainer"/>
    <circle class="big-circle" opacity="0.9" fill="#842B3C" cx="121.7" cy="120.7" r="120.7"/>
    <g id="itemsContainer">
      <a id="item-2" transform="matrix(0.5,-0.86602,0.86602,0.5,-91.5063509461097,341.5063509461096)" xlink:title="" xlink:target="_parent">
        <path opacity="0.9" fill="none" d="M297.8 74.2l119.7 0c0-42.8-22.8-82.3-59.8-103.7L297.8 74.2z"/>
        <use xlink:href="#icon-2" width="70" height="70" x="-35" y="-35" transform="matrix(0.236 0.4087 -0.4087 0.236 368.319 33.5341)" overflow="visible"/>
      </a>
      <a id="item-3" transform="matrix(-0.49999,-0.86602,0.86602,-0.49999,158.49364905389024,591.5063509461097)" xlink:title="" xlink:target="_parent">
       .........完整代码请登录后点击上方下载按钮下载查看