CSS动画
下载样式源码:https://daneden.github.io/animate.css/
CSS动画样式:
1 <!--动画样式--> 2 <link rel="stylesheet" href="css/animate.css">
实现动画代码:
1 <!--delay-2s延迟速度-- 2 想换其他样式只需要将着class="animated infinite zoomInDown delay-2s 3 里面的zoomInDown替换即可" --> 4 <h1 class="animated infinite zoomInDown delay-2s">shop</h1>
完整代码如下:
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 7 <title>平滑滚动</title> 8 9 <link rel="stylesheet" href="css/common.min.css"> 10 <link rel="stylesheet" href="css/okayNav.min.css"> 11 <!--动画样式--> 12 <link rel="stylesheet" href="css/animate.css"> 13 14 </head> 15 <body> 16 17 <header id="header" class="okayNav-header"> 18 <a class="okayNav-header__logo" href="#"> 19 Logo 20 </a> 21 22 <nav role="navigation" id="nav-main" class="okayNav"> 23 <ul> 24 <li><a href="#">首页</a></li> 25 <li><a href="#shop">购物</a></li> 26 <li><a href="#blog">博客</a></li> 27 <li><a href="#service">服务</a></li> 28 <li><a href="#connect">联系我们</a></li> 29 <li><a href="#about">关于我们</a></li> 30 <li><a href="javascript:void(0)" onclick="gotoTest()">测试</a></li> 31 </ul> 32 </nav> 33 </header><!-- /header --> 34 35 <main> 36 <h1>Resize your browser to preview okayNav</h1> 37 </main> 38 39 40 <section id="shop" style="min-height:700px;background-color:#FFE696"> 41 <!--delay-2s延迟速度-- 42 想换其他样式只需要将着class="animated infinite zoomInDown delay-2s 43 里面的zoomInDown替换即可" --> 44 <h1 class="animated infinite zoomInDown delay-2s">shop</h1> 45 46 </section> 47 48 49 <section id="blog" style="min-height:700px;background-color:#AOAFEB"> 50 <h1>blog</h1> 51 52 </section> 53 54 55 <section id="service" style="min-height:700px;background-color:#EB90FF"> 56 <h1>service</h1> 57 58 </section> 59 60 <section id="connect" style="min-height:700px;background-color:#25fb65"> 61 <h1>connect</h1> 62 63 </section> 64 65 <section id="about" style="min-height:700px;background-color:#66fb65"> 66 <h1>about</h1> 67 68 </section> 69 70 <section id="test" style="min-height:700px;background-color:#e34565"> 71 <h1>test</h1> 72 73 </section> 74 75 <footer> 76 <!--©是@的转义符,网站https://dev.w3.org/html5/html-author/charref 77 2014-<script>document.write((new Date())</script> 时间,2014是固定的年份, 78 <script>document.write((new Date())</script>获取现在年份 79 Date知识网站:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date --> 80 <p style="text-align:center;">Copyright © 2014-<script>document.write((new Date())</script> </p> 81 </footer> 82 83 <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script> 84 <script src="js/jquery.okayNav-min.js"></script> 85 <script src="js/smoothscroll.js"></script> 86 87 <script type="text/javascript"> 88 var navigation = $('#nav-main').okayNav(); 89 90 function gotoTest(){ 91 document.querySelector('#test').scrollIntoView({ behavior: 'smooth' }); 92 } 93 </script> 94 </body> 95 </html>
运行结果