html5+css3+jquery漂浮抖动的导航

1、新建html文档。

2、书写hmtl代艨位雅剖码。<article class="zzsc"> <div class="main-container"> <button class="btn" id="b1" >Home</button> <button id="b2" class="btn" >About</button> <button id="b3" class="btn" >Product</button> <button id="b4" class="btn" >Demo</button> <button id="b5" class="btn" >Testimo</button> <button id="b6" class="btn" >Contact Us</button> <button id="b7" class="btn" >Carrers</button> </div></article>

3、书写css代码。<style>body { background: url(./weibo_shuimian-039.jpg) 0 0 no-repeat; background-size: cover; }.main-container { width: 80%; margin: 0 auto; }.btn { background: teal; height: 40px; width: 100px; position: relative; border: 0px; border-radius: 5px; color: white; -webkit-transform: rotate(0deg); }</style>

4、书写并添加js代码。<script src="js/jquery-2.1.1.min.js" ></script><s艘早祓胂cript>function waterFloat(elm,t,d,v){var i = elm;var runIt = function (elm,t,d,v) { elm.animate({top:'+='+v},t,"linear",function(){ $({deg: -d}).animate({deg: d}, { duration: t, step: function(now){ elm.css({ transform: "rotate(" + now + "deg)" }); } },"linear"); elm.animate({top:'-='+v},t,"linear",function(){ $({deg: d}).animate({deg: -d}, { duration: t, step: function(now){ elm.css({ transform: "rotate(" + now + "deg)" }); } },"linear"); runIt(elm,t,d,v); }); });}runIt(i,t,d,v);}</script><script > $(document).ready(function(){ var b1 = $('#b1'); var b2 = $('#b2'); var b3 = $('#b3'); var b4 = $('#b4'); var b5 = $('#b5'); var b6 = $('#b6'); var b7 = $('#b7'); var a1 = $('#a1'); var a2 = $('#a2'); var p1 = new waterFloat(b1,900,3,8); var p2 = new waterFloat(b2,700,3,8); var p3 = new waterFloat(b3,800,3,10); var p4 = new waterFloat(b4,900,3,8); var p5 = new waterFloat(b5,700,3,8); var p6 = new waterFloat(b6,800,3,10); var p7 = new waterFloat(b7,700,3,8); var p8 = new waterFloat(a1,700,3,8); var p9 = new waterFloat(a2,800,3,10); });</script>

5、代码整体结构。

6、查看效果。