页面顶层gif动画弹窗等待

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7   <title>Document</title>
 8 </head>
 9 <body>
10   <div class="popup" style="display: none">
11     <div class="context">
12       <div class="word">
13        <img src="zq.gif" width="100px" height="100px">
14         <!-- 这里填写你需要的文字 -->
15        正在领取中
16       </div>
17     </div>
18   </div>
19 </body>
20 </html>
21 <style media="screen">
22   .popup {
23     position: fixed;
24     top: 0;
25     left: 0;
26     width: 100vw;
27     height: 100vh;
28     background: rgba(255,255,255,0);
29     z-index: 20;
30   }
31 
32   .context {
33     position: absolute;
34     top: 50%;
35     left: 50%;
36     transform: translate(-50%,-50%);
37     background: rgba(0,0,0,.7);
38     max-width: 60vw;
39     padding: 0.5rem;
40     border-radius: 4px;
41     text-align: center;
42   }
43 
44   .word {
45     font-size: 1rem;
46     max-width: 60vw;
47     color: #fff;
48   }
49 
50   body {
51     margin: 0;
52     padding: 0;
53     border: 0;
54   }
55 </style>

posted @ 2019-07-17 10:33  你好哈  阅读(314)  评论(0编辑  收藏  举报