<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>jQuery+CSS3+SVG手机端图标导航页面切换特效</title>
<!--图标样式和字体样式-->
<link rel='stylesheet' href='css/ionicons.min.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat:700'>
<!--页面框架样式-->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="phone">
<div class="page">Home</div>
<nav>
<div class="wave-wrap">
<svg version="1.1" id="wave" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 119 26">
<path class="path" d="M120.8,26C98.1,26,86.4,0,60.4,0C35.9,0,21.1,26,0.5,26H120.8z">
</svg>
</div>
<ul class="list-wrap">
<li data-color="#eccc68" title="Home">
<i class="icon ion-ios-home"></i>
</li>
<li data-color="#ff6b81" title="Profile">
<i class="icon ion-ios-person"></i>
</li>
<li data-color="#7bed9f" title="Get a beer!">
<i class="icon ion-ios-beer"></i>
</li>
<li data-color="#70a1ff" title="Files">
<i class="icon ion-ios-folder-open"></i>
</li>
<li data-color="#dfe4ea" title="Settings">
<i class="icon ion-ios-settings"></i>
</li>
</ul>
</nav>
</div>
<script src='js/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>