<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>动态的底部导航菜单演示_dowebok</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/5.9.0/css/all.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>动态的底部导航菜单演示</h1>
<div id="dowebok">
<div id="navbar">
<div id="bubbleWrapper">
<div id="bubble1" class="bubble">
<span class="icon"><i class="fas fa-home"></i></span>
</div>
<div id="bubble2" class="bubble">
<span class="icon"><i class="fab fa-twitter"></i></span>
</div>
<div id="bubble3" class="bubble">
<span class="icon"><i class="fas fa-bell"></i></span>
</div>
<div id="bubble4" class="bubble">
<span class="icon"><i class="fas fa-user"></i></span>
</div>
</div>
<div id="menuWrapper">
<div id="menu1" class="menuElement" onclick="move('1', '50px', '#ffcc80')">
<i class="fas fa-home"></i>
</div>
<div id="menu2" class="menuElement" onclick="move('2', '150px', '#81d4fa')">
<i class="fab fa-twitter"></i>
</div>
<div id="menu3" class="menuElement" onclick="move('3', '250px', '#c5e1a5')">
<i class="fas fa-bell"></i>
</div>
<div id="menu4" class="menuElement" onclick="move('4', '350px', '#ce93d8')">
<i class="fas fa-user"></i>
</div>
</div>
</div>
<div id="bgWrapper">
<div id="bg"></div>
<div id="bgBubble"></div>
</div>
</div>
<svg width="0" height="0">
<defs>
<filter id="goo">
<feGaussianBlur in="SourceGraphic" stdDeviation="20" result="blur" id="blurFilter" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 30 -15"
result="goo" />
<feComposite in="SourceGraphic" in2="goo" operator="atop" />
</filter>
</defs>
</svg>
<script src="js/gsap.min.js"></script>
<script src="js/script.js"></script>
<!-- 以下信息与演示无关，可不必理会 -->
<style>
body { margin: 0;}
h1 { margin: 40px auto; font: 32px "Microsoft Yahei"; text-align: center; color: #fff;}
.vad { margin: 50px 0 10px; font-family: Consolas,arial,宋体,sans-serif; text-align:center;}
.vad a { display: inline-block; height: 36px; line-height: 36px; margin: 0 5px; padding: 0 40px; font-size: 14px; text-align:center; color:#eee; text-decoration: none; background-color: #222;}
.vad a:hover { color: #fff; background-color: #000;}
.thead { width: 728px; margin: 0 auto; padding-bottom: 40px;}
</style>
<p class="vad">
<a href="http://www.dowebok.com/" target="_blank">dowebok.com</a>
<a href="http://www.dowebok.com/5940.html" target="_blank">说 明</a>
<a href="http://www.dowebok.com/5940.html" target="_blank">下 载</a>
</p>
</body>
</html>
