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     <!--&copy;是@的转义符，网站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 &copy; 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>

运行结果

posted @ 2019-06-06 12:14  JackSon~鹤  阅读(193)  评论(0)    收藏  举报