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>
![](https://img2018.cnblogs.com/blog/954679/201907/954679-20190717103020466-1500612770.png)
![](https://img2018.cnblogs.com/blog/954679/201907/954679-20190717103128780-68223088.gif)