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="menuHit" fill="#ededed" opacity="0" /> <use xlink:href="#menuDot2" class="menuHit" fill="#ededed" opacity="0" /> <use xlink:href="#menuDot3" class="menuHit" fill="#ededed" opacity="0" /> </g> <g filter="url(#glow)" id="menuShadow"> <g mask="url(#mainMask)"> <rect width="100%" height="100%" fill="#423852" <!-- fill="url(#bgPattern)" --> /> </g> </g> <g id="selectionDotGroup0" clip-path="url(#menuMask0)"> <use xlink:href="#selectionDot" class="selectionDot" fill="#E15E58"/> </g> <g id="selectionDotGroup1" clip-path="url(#menuMask1)"> <use xlink:href="#selectionDot" class="selectionDot" fill="#FABB74"/> </g> <g id="selectionDotGroup2" clip-path="url(#menuMask2)"> <use xlink:href="#selectionDot" class="selectionDot" fill="#73AFCE"/> </g> <g id="selectionDotGroup3" clip-path="url(#menuMask3)"> <use xlink:href="#selectionDot" class="selectionDot" fill="#E16596"/> </g> <g id="dimIconGroup"> <path fill="#9387A9" d="M285.3,302C285.3,302.1,285.3,302.1,285.3,302l-0.4,0.7c-0.3,0.6-1,0.8-1.6,0.5c-0.6-0.3-0.8-1-0.5-1.6 l0.4-0.7l0.6-1.1l3-5.8c0.1-0.2,0.4-0.3,0.6-0.2l1.3,0.7c0.2,0.1,0.3,0.4,0.2,0.6L285.3,302z M294.3,302v1.6c0,0.5-0.4,0.8-0.8,0.8 h-0.9v9.3c0,0.5-0.4,0.8-0.8,0.8h-15.7c-0.5,0-0.8-0.4-0.8-0.8v-9.3h-0.9c-0.5,0-0.8-0.4-0.8-0.8V302c0-0.5,0.4-0.8,0.8-0.8h7.3 c-0.3,0.5-0.3,1.2-0.1,1.7c0.2,0.6,0.6,1.1,1.2,1.4c0.3,0.2,0.7,0.3,1.1,0.3c0.9,0,1.7-0.5,2.1-1.3l0.3-0.6c0,0,0.1-0.1,0.1-0.1 l0.8-1.4h6.3C293.9,301.2,294.3,301.6,294.3,302z M279.8,310.5c0-0.2-0.2-0.4-0.4-0.4h-1.6c-0.2,0-0.4,0.2-0.4,0.4v1.6 c0,0.2,0.2,0.4,0.4,0.4h1.6c0.2,0,0.4-0.2,0..........完整代码请登录后点击上方下载按钮下载查看
网友评论0