TweenMax+MorphSVGPlugin+svg实现炫酷滑动图标菜单导航代码-html代码-BFW代码库

TweenMax+MorphSVGPlugin+svg实现炫酷滑动图标菜单导航代码

代码语言：html

代码描述：TweenMax+MorphSVGPlugin+svg实现炫酷滑动图标菜单导航代码

代码标签： TweenMax MorphSVGPlugin svg 炫酷滑动图标菜单导航代码

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

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

<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">
 <style>
     body {
  background-color: #423852;
  overflow: hidden;
}

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

svg {
  width: 100%;
  height: 100%;
  visibility: hidden;
}

.selectionDot,
#menuShadow,
#dimIconGroup > path,
.menuHit {
  pointer-events: none;
}

.menuItem {
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
 </style>

</head>

<body>
    <!-- partial:index.partial.html -->
    <svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice">
<defs>
  <pattern patternUnits="userSpaceOnUse"  id="bgPattern" width="4" height="4" x="0" y="0">
    <rect width="4" height="4" fill="#F9F9EF"/>
    
    <rect width="1" height="1" fill="#D6D3CC"/>
  <rect x="3" width="1" height="1" fill="#D6D3CC"/>    
   <rect  x="2" y="3"width="1" height="1" fill="#E6E4DB"/>
  <rect x="4" y="3" width="1" height="1" fill="#E6E4DB"/>    
  </pattern>  
        <circle id="selectionDot" cy="304" r="27"/>
  
  <clipPath id="menuMask0">
        <circle id="menuDot0"  cx="284" cy="304" r="30"/>
  </clipPath>
  <clipPath id="menuMask1">
  <circle id="menuDot1"  cx="361" cy="304" r="30"/>
  </clipPath>
  <clipPath id="menuMask2">
  <circle id="menuDot2" cx="438" cy="304" r="30"/>
  </clipPath>  
  <clipPath id="menuMask3">
  <circle id="menuDot3"  cx="515"  cy="304" r="30"/>
  </clipPath>  
  

  <mask id="mainMask">
  <rect width="100%" height="100%" fill="#FFF" />
    
    <use xlink:href="#menuDot0" fill="#000"/>
<use xlink:href="#menuDot1" fill="#000" />
<use xlink:href="#menuDot2" fill="#000" />
<use xlink:href="#menuDot3" fill="#000" />

  </mask>
  <filter id="glow" x="-100%" y="-100%" width="350%" height="350%" color-interpolation-filters="sRGB">
        <feGaussianBlur stdDeviation="2" result="coloredBlur" />
        <feOffset dx="0" dy="7" result="offsetblur"></feOffset>
        <feFlood id="glowAlpha" flood-color="#000" flood-opacity="0.095"></feFlood>
        <feComposite in2="offsetblur" operator="in"></feComposite>
        <feMerge>
          <feMergeNode/>          
          <feMergeNode in="SourceGraphic"></feMergeNode>
        </feMerge>
      </filter>      
</defs>
<!-- <use xlink:href="#menuGroup" fill="#5C4F71"/> -->
<g id="menuGroup" fill="#5C4F71">
  <use xlink:href="#menuDot0" class="menuItem" ><title>Shopping</title></use>

<use xlink:href="#menuDot1" class="menuItem" ><title>Settings</title></use>
<use xlink:href="#menuDot2" class="menuItem" ><title>Chat</title></use>
<use xlink:href="#menuDot3" class="menuItem" ><title>Notification</title></use>
  
        <use xlink:href="#menuDot0" class="menuHit" fill="#ededed" opacity="0" />
<use xlink:href="#menuDot1" class="menu.........完整代码请登录后点击上方下载按钮下载查看