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:hr.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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