JS/CSS 全屏幕导航 – 从上到下动画 

 1 <!DOCTYPE HTML>
 2 <html>
 3   
 4 
 5   <head>
 6      <meta charset="utf-8">
 7      <title>从上到下的菜单动画</title>
 8      <style>
 9            body {
10     margin: 0;
11     font-family: 'Lato', sans-serif;
12 }
13 
14 .overlay {
15     height: 0%;
16     width: 100%;
17     position: fixed;
18     z-index: 1;
19     top: 0;
20     left: 0;
21     background-color: rgb(0,0,0);
22     background-color: rgba(0,0,0, 0.9);
23     overflow-y: hidden;
24     transition: 0.5s;
25 }
26 
27 .overlay-content {
28     position: relative;
29     top: 25%;
30     width: 100%;
31     text-align: center;
32     margin-top: 30px;
33 }
34 
35 .overlay a {
36     padding: 8px;
37     text-decoration: none;
38     font-size: 36px;
39     color: #818181;
40     display: block;
41     transition: 0.3s;
42 }
43 
44 .overlay a:hover, .overlay a:focus {
45     color: #f1f1f1;
46 }
47 
48 .overlay .closebtn {
49     position: absolute;
50     top: 20px;
51     right: 45px;
52     font-size: 60px;
53 }
54 
55     </style>
56   </head>
57    <body>
58      <div class="overlay ">
59        <a href="#" class="closebtn" onclick="closes()">&times;</a>
60        <ul class="overlay-content" >
61          <li><a href="#">首页</a></li>
62          <li><a href="#">HTML</a></li>
63          <li><a href="#">CSS</a></li>
64          <li><a href="#">JS</a></li>
65          <li><a href="#">NODE.JS</a></li>
66          <li><a href="#">VUE</a></li>
67        </ul>
68      </div>
69      <h1>
70        从上到下的菜单动画,为保证全屏，要把菜单脱离文档流
71      </h1>
72      <span style="font-size:90px" onclick="show()">&#9776;点击打开</span>
73 <script>
74        
75 function closes() {
76    document.getElementsByClassName("overlay")[0].style.height="0%";
77 }
78 function show(){
79   document.getElementsByClassName("overlay")[0].style.height="100%";
80 
81   
82 }
83 
84 
85 
86 </script>
87   </body>
88 </html>

 

posted @ 2019-01-12 11:59  给自己一个梦  阅读(699)  评论(0)  编辑  收藏  举报