svg菜单点击导航跟随位移动画效果代码
代码语言：html
所属分类：菜单导航
代码描述：svg菜单点击导航跟随位移动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<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>
<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.4-0.4V310.5z M279.8,306.9c0-0.2-0.2-0.4-0.4-0.4h-1.6c-0..........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0