JS 版星级评分

如图所示，在曾经曾用 CSS3 的方案实现过。现在用 JavaScript 重新实现。

演示地址：https://antmoe.gitee.io/project/2020/05/01/index.html

遇到的问题

  1. JavaScript 不能直接操纵伪类元素，因此只能用控制类的方式
  2. 没有搞明白三种状况
    • 第一次点击
    • 第二次点击是加星还是减星
    • 判断循环判断循环（代码太烂）
  3. 部分过渡动画存在一定缺陷
  4. 嵌套过于多（代码太烂）

解决方案

  1. 由于五个五角星的实现依靠五个一模一样的<i>标签，因此使用事件委托方式

  2. 定义一个列表，用于存储当前页面中的所有星（<i>标签）

  3. 定义一个变量，用作用户是否第一次操作的标志。（即判断是否是第一次操作）

    • 如果是第一次操作，那么直接循环添加类名即可
    • 不是第一次操作，需要判断是否添加过类名

  4. 在用户第一次操作后，需要判断是加星还是减星

    即判断当前点击的元素是否含有星

    • 如有有星星，取消右边和当前点击的星
    • 如果没有星，将左边所有未点亮的星和当前点击的星点亮

示例代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>星星评级动态效果</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/4.5.6/css/ionicons.min.css"
    />

    <style>
      body {
        background: #222;
      }

      .rating {
        font-family: "Ionicons";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

      .rating i {
        position: relative;
        margin-right: 6px;
        font-size: 5em;
        color: gold;
        cursor: pointer;
      }

      .rating i:hover::before {
        content: "\f384";
        opacity: 1;
        transition: 0.5s;
        transform: scale(1.2);
      }

      .active::before {
        content: "\f384";
        opacity: 1;
        transition: 0.5s;
      }
    </style>
  </head>

  <body>
    <div class="rating">
      <i class="icon ion-md-star-outline"></i>
      <i class="icon ion-md-star-outline"></i>
      <i class="icon ion-md-star-outline"></i>
      <i class="icon ion-md-star-outline"></i>
      <i class="icon ion-md-star-outline"></i>
    </div>
    <script>
      var rating = document.getElementsByClassName("rating")[0];
      var icon = document.getElementsByClassName("icon");
      var iconList = [];
      for (var i = 0; i < icon.length; i++) {
        iconList.push(icon[i]);
      }
      // 没有点过
      var flag = true;
      document.addEventListener("click", function (event) {
        var target = event.target;
        if (target.nodeName === "I") {
          var num = iconList.indexOf(target);
          if (flag) {
            for (var j = 0; j <= num; j++) {
              icon[j].className += " active";
            }
            flag = false;
          } else {
            // 判断加还是取消
            if (icon[num].className.indexOf(" active") === -1) {
              // 没有找到,则添加
              for (var m = num; m >= 0; m--) {
                if (icon[m].className.indexOf(" active") === -1) {
                  icon[m].className += " active";
                }
              }
            } else {
              // 否则,进行删星星
              for (var i = num; i <= icon.length; i++) {
                icon[i].className = icon[i].className.replace(" active", "");
              }
            }
          }
        }
      });
    </script>
  </body>
</html>

下载按钮动态效果

基于上次进行修改为 JavaScript 版很简单。只需要将 focus 触发的效果赋值于一个新的类。并未按钮绑定事件即可。

演示地址：https://antmoe.gitee.io/project/2020/05/02/index.html

示例代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>下载按钮动态效果</title>
    <style>
      @keyframes circle {
        0%,
        15%,
        45%,
        75% {
          transform: translate(-50%, -50%) scale(0.8);
        }

        30%,
        60%,
        90% {
          transform: translate(-50%, -50%) scale(1.2);
        }

        100% {
          transform: translate(-50%, -50%) scale(1);
        }
      }

      @keyframes dot {
        8% {
          transform: scale(0);
        }

        16% {
          transform: scale(1) rotate(30deg) translateX(48px);
        }

        95% {
          transform: scale(1) rotate(1000deg) translateX(48px);
        }

        100% {
          transform: scale(0.125) rotate(1050deg) translate(52px);
        }
      }

      body {
        background-color: #000;
      }

      .button {
        display: block;
        width: 160px;
        height: 41px;
        background: transparent;
        border-radius: 10px;
        color: white;
        border: none;
        outline: none;
        cursor: pointer;
        margin: 100px auto;
        position: relative;
      }

      .button::after,
      .button::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        transform-origin: 50% 50%;
      }

      .button::before {
        width: 100%;
        height: 100%;
        background-color: #6d58ff;
        border-radius: 10px;
        transition: all 0.5s;
      }

      .button::after {
        content: "";
        width: 16px;
        height: 16px;
        background: #fff;
        z-index: 2;
        border-radius: 50%;
        transform: scale(0);
        /* 设置外部白色圆圈的圆心位置 */
        transform-origin: 0 0;
      }

      .button span {
        position: relative;
        z-index: 1;
      }

      .button svg {
        width: 15px;
        height: 13px;
        display: block;
        position: absolute;
        left: 50%;
        top: 50%;
        stroke: #fff;
        stroke-width: 2px;
        stroke-linecap: round;
        stroke-linejoin: round;
        fill: none;
        transform: translate(-50%, -50%);
        stroke-dasharray: 17px;
        stroke-dashoffset: 17px;
        transition: stroke-dashoffset 0.3s ease;
        transition-delay: 3s;
      }

      .button:focus svg {
        stroke-dashoffset: 34px;
      }

      .transport::before {
        width: 41px;
        height: 41px;
        border-radius: 50%;
        animation: circle 3s linear forwards;
      }

      .transport::after {
        animation: dot 3s linear forwards;
      }

      .button:focus span {
        display: none;
      }
    </style>
  </head>

  <body>
    <button class="button">
      <span>下载</span>
      <svg view-Box="0 0 15 13">
        <polyline points="2 6.5 6 10.5 13 2.5"></polyline>
      </svg>
    </button>
    <script>
      // 获取按钮
      var buttonElement = document.getElementsByClassName("button")[0];
      // 获取文本
      var aElement = document.getElementsByTagName("span")[0];
      // 绑定事件
      buttonElement.addEventListener("click", function () {
        if (buttonElement.className.indexOf(" transport") === -1) {
          buttonElement.className += " transport";
          aElement.style.display = "none";
        } else {
          buttonElement.className = "button";
          aElement.style.display = "block";
        }
      });
    </script>
  </body>
</html>

百叶窗效果轮播图

https://antmoe.gitee.io/project/2020/05/03/index.html

基于上次进行修改为 JavaScript 版很简单。但需要注意的问题是：

图片是用四张小图拼成的，因此控制的是四张小图

其余内容基本与上一版轮播图一致。

示例代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>小米轮播图示例--百叶窗效果</title>
    <style>
      * {
        box-sizing: border-box;
      }

      body {
        margin: 0;
        padding: 0;
      }

      .container {
        width: 1226px;
        height: 460px;
        background: lightcyan;
        margin: 100px auto;
        position: relative;
      }

      .container .imgList {
        width: 100%;
        position: relative;
      }

      /* 图片容器 */
      .container .imgList .img {
        height: 100%;
        width: 100%;
        height: auto;
        position: absolute;
        left: 0;
        top: 0;
      }

      /* 四个小部分 */
      .container .imgList .img .frag {
        float: left;
        height: 460px;
        width: 25%;
        background-size: 1226px 460px;
        opacity: 0;
        z-index: 0;
        transform-origin: center right;
        filter: saturate(0) blur(10px) brightness(0.6) contrast(4);
        transition: transform 0.6s, opacity 0.6s, filter 0.6s ease-out;
      }

      /* 每一个容器里的小部分显示的图片 */
      .container .imgList .img:nth-child(1) .frag {
        background-image: url(https://ae01.alicdn.com/kf/U1a6b653720d845c682f97d2fcf75c22f6.png);
      }

      .container .imgList .img:nth-child(2) .frag {
        background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6bd4174b8c5aad67a64864a5716ad152.jpg);
      }

      .container .imgList .img:nth-child(3) .frag {
        background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e909ef0e50960f61a730380013bc960a.jpg);
      }

      .container .imgList .img:nth-child(4) .frag {
        background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/755aca9487082e7698e16f17cfb70839.jpg);
      }

      .container .imgList .img:nth-child(5) .frag {
        background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e5b37cdb85b3b93b5938cc508a10c906.jpg);
      }

      /* 分割每一小部分需要显示的区域(位置) */
      .container .imgList .img .frag:nth-child(2) {
        background-position: -306.5px 0;
        transition-delay: 0.2s;
      }

      .container .imgList .img .frag:nth-child(3) {
        background-position: -613px 0;
        transition-delay: 0.3s;
      }

      .container .imgList .img .frag:nth-child(4) {
        background-position: -919.5px 0;
        transition-delay: 0.4s;
      }

      .container .imgList .img .frag:nth-child(5) {
        background-position: -1226px 0;
        transition-delay: 0.5s;
      }

      .container .slide-controls {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
      }

      .container .slide-controls .slide-left,
      .container .slide-controls .slide-right {
        width: 41px;
        height: 69px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background-image: url(https://i1.mifile.cn/f/i/2014/cn/icon/icon-slides.png);
        cursor: pointer;
        z-index: 2;
      }

      .container .slide-controls .slide-left {
        left: 0;
        background-position: -84px 0;
      }

      .container .slide-controls .slide-left:hover {
        background-position: 0 0;
      }

      .container .slide-controls .slide-right {
        right: 0;
        background-position: -124px 0;
      }

      .container .slide-controls .slide-right:hover {
        background-position: -42px 0;
      }

      /* 导航 */
      .container .nav {
        width: 100px;
        height: 20px;
        position: absolute;
        left: 50%;
        right: 0;
        bottom: 8px;
        transform: translateX(-50%);
        z-index: 2;
      }

      .container .nav .slide-nav {
        width: 12px;
        height: 12px;
        border: 2px solid #fff;
        border-color: hsla(0, 0%, 100%, 0.3);
        border-radius: 10px;
        background: rgba(0, 0, 0, 0.4);
        cursor: pointer;
        margin: 0 4px;
        float: left;
        z-index: 3;
      }

      .container .nav .slide-nav:hover {
        background: hsla(0, 0%, 100%, 0.4);
        border-color: rgba(0, 0, 0, 0.4);
      }
    </style>
    <script
      type="text/javascript"
      nonce="4db1ec836d6049f58177b1533ea"
      src="//local.adguard.org?ts=1588483546206&amp;type=content-script&amp;dmn=antmoe.gitee.io&amp;css=1&amp;js=1&amp;gcss=1&amp;rel=1&amp;rji=1&amp;stealth=1&amp;uag="
    ></script>
    <script
      type="text/javascript"
      nonce="4db1ec836d6049f58177b1533ea"
      src="//local.adguard.org?ts=1588483546206&amp;name=AdGuard%20Popup%20Blocker&amp;name=AdGuard%20Assistant&amp;name=AdGuard%20Extra&amp;type=user-script"
    ></script>
  </head>

  <body>
    <!-- 视觉容器 -->
    <div class="container">
      <!-- 左右切换菜单 -->
      <div class="slide-controls">
        <div class="slide-left"></div>
        <div class="slide-right"></div>
      </div>
      <!-- 图片列表 -->
      <div class="imgList">
        <div class="img">
          <div class="frag"></div>
          <div class="frag"></div>
          <div class="frag"></div>
          <div class="frag"></div>
        </div>
        <div class="img">
          <div class="frag"></div>
          <div class="frag"></div>
          <div class="frag"></div>
          <div class="frag"></div>
        </div>
        <div class="img">
          <div class="frag"></div>
          <div class="frag"></div>
          <div class="frag"></div>
          <div class="frag"></div>
        </div>
        <div class="img">
          <div class="frag"></div>
          <div class="frag"></div>
          <div class="frag"></div>
          <div class="frag"></div>
        </div>
        <div class="img">
          <div class="frag"></div>
          <div class="frag"></div>
          <div class="frag"></div>
          <div class="frag"></div>
        </div>
      </div>
      <!-- 轮播图的导航 -->
      <div class="nav">
        <div class="slide-nav"></div>
        <div class="slide-nav"></div>
        <div class="slide-nav"></div>
        <div class="slide-nav"></div>
        <div class="slide-nav"></div>
      </div>
    </div>
    <script>
      // 图片列表容器
      var imgList = document.getElementsByClassName("imgList")[0];
      // 图片列表
      var imgs = imgList.getElementsByClassName("img");
      // 底部导航栏
      var slideElements = document.getElementsByClassName("slide-nav");
      var slideRight = document.getElementsByClassName("slide-right")[0];
      var slideLeft = document.getElementsByClassName("slide-left")[0];
      // 导航条
      var navElement = document.getElementsByClassName("nav")[0];
      // 用于存放nav
      var arr = [];
      for (var i = 0; i < slideElements.length; i++) {
        arr.push(slideElements[i]);
      }
      var num = 0;
      // 控制图片显示及消失
      function show(num) {
        var drag = imgs[num].getElementsByClassName("frag");
        for (var i = 0; i < drag.length; i++) {
          drag[i].style.opacity = 1;
          drag[i].style.zIndex = 1;
          drag[i].style.filter =
            "saturate(1) blur(0px) brightness(1) contrast(1)";
          drag[i].style.transition =
            "rotateY(90deg) translateZ(180deg) scale(1.5)";
        }
        slideElements[num].style.backgroundColor = "hsla(0, 0%, 100%, .4)";
        slideElements[num].style.borderColor = "rgba(0, 0, 0, .4)";
      }
      function hidden() {
        var drag = document.getElementsByClassName("frag");
        for (var i = 0; i < drag.length; i++) {
          drag[i].style.opacity = 0;
          drag[i].style.zIndex = 0;
          drag[i].style.transform = null;
          drag[i].style.filter = null;
        }
        for (var m = 0; m < slideElements.length; m++) {
          slideElements[m].style.backgroundColor = null;
          slideElements[m].style.borderColor = null;
        }
      }
      // 初始初始化页面
      show(0);
      // 向右切换按钮的动态效果
      slideRight.addEventListener("click", function () {
        num++;
        console.log(num, num === imgs.length);
        hidden();
        if (num === imgs.length) {
          num = 0;
          console.log(num);
          show(num);
        } else {
          show(num);
        }
      });
      // 向左切换按钮的动态效果
      slideLeft.addEventListener("click", function () {
        hidden();
        if (num <= 0) {
          num = imgs.length - 1;
          show(num);
        } else {
          show(num - 1);
          num--;
        }
      });
      // 导航器的动态效果
      navElement.addEventListener("click", function (event) {
        var target = event.target;
        num = arr.indexOf(target);
        console.log(num);
        if (target.className === "slide-nav") {
          hidden();
          show(num);
        }
      });
    </script>
  </body>
</html>

模仿快手官网

https://antmoe.gitee.io/project/2020/05/04/index.html

相对来说 ， 快手官网还是较为简单的。大概可以分为四个部分

  1. 头部

    包含左侧 logo 和右侧导航条

    需要注意的是导航条是二级目录。

  2. 中间

    一行字，一张图，两个按钮

  3. 底部

    也就是版权声明

  4. 背景

实现思路

  1. 头部

    头部需要注意的只是二级导航。其实现很简单。html 结构使用父子级（子级 display 为 none）。当悬停到父级时，将子级显示即可。

  2. 主区域部分

    常规操作即可。

  3. 底部

    常规操作

  4. 背景

    使用视频背景简单的做法就是写入一个新的 div，div 内部放一个video标签。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <div class="video-wrap">
      <video id="video" class="video" loop="" muted="" autoplay="">
        <source
          src="https://ali.static.yximgs.com/udata/pkg/fe/kwai_video.c8e339ab.mp4"
          type="video/mp4"
        />
        抱歉，您的浏览器不支持内嵌视频
      </video>
    </div>

    将其进行绝对定位，也就是固定在整个页面。

    1
    2
    3
    4
    5
    6
    7
    8
    .video-wrap .video {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

示例代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>模仿快手官网小demo</title>
    <style>
      body {
        background-color: #000;
        overflow: hidden;
        color: white;
      }

      li,
      ol,
      ul {
        list-style: none;
        padding: 0;
      }

      a {
        background-color: rgba(0, 0, 0, 0);

        text-decoration: none;
        color: white;
      }

      @font-face {
        font-family: "iconfont";
        src: url("iconfont.eot?t=1588408129484");
        /* IE9 */
        src: url("iconfont.eot?t=1588408129484#iefix") format("embedded-opentype"),
          /* IE6-IE8 */
            url("data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAMIAAsAAAAABrQAAAK6AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCfgqBIIEcATYCJAMMCwgABCAFhG0HOxvfBRHVk1dkf4Q4xnYIzQxJ6dLPWNbsF8rRCZXgfHF7If9lWxgy06CkoBVIAAAAAIAgwjG9T1JEt6m2Q8lkp6ZQEcopJOHRzhMrliiBJLnCBhw0hDwNgDdAgEz8AOiJHZ4qfQfYyiwXslphAw54ogkzW1Yf7P2fs6qRURGmKGfRjm0xaTn/pRngnRMkjLu7PH2KJmjZFty1sTBaoF59Ai7jihawmas7nT9VuY3wM2TP57mc3gQ6O5ofKKc1cYxt9fwwwDigAMdatIVLKOOG6eULGsjNEMBJqmxSU2csiEH3EkB6u/oSzCUwGFa2I1hrJloL5Viwqzk1VsLvy+cSFBaNHtjQrhvYyy/b2uRnk0+QBAFOtwAayAYGpLG20AAI4zTOQohhX60EXkr+v/BdyF55BfLX2Uo3AOnQpu7I4OzcmgFOQQGgAbDmS+kgB7HhgwUJh9s/C3uj6dlymvhaJt1jBwsZj+acvxvLqn3XRfz3GXiN3sxnzjiyKOxTpPR77t+KNNA/z9APR43mY86kmWathNY5Gzpow3nLvwr0q00VAgh0r444xP3AAHD/mgNt/9KA/SRBgR8WsE2LWZh0XhsA6ZwehjThHj0V4MQJJHUk6Hm8M9I7B4I9ZxoRspHCobETIw2bDQsucmDFTjmcZKmf7iJkGBDjADJNAQh+W1B4OYDG75I07BMsRH3Dij/gpFFY0EUitpwkGCtmkNygTLkj69ZJVL3F/NTEkjWFwhGlL9PgO16xvMIOZY4h/TkPVAlIuIUl2A6bhsEIV5iqU6iaqetS3Y2clFtrQoKxYgbJDcqUO/Lr66T0+S3mpyaWFlWueUTpy+bBd7we5Mre9VLdyzX9OQ9UCUi4hSVoh03DYOrbVZiqU4zImalralFfu7O+s/2+DYATvYIWJVoM9MdnO+NLN4jiJ2NZAAA=")
            format("woff2"), url("iconfont.woff?t=1588408129484") format("woff"),
          url("iconfont.ttf?t=1588408129484") format("truetype"),
          /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
            url("iconfont.svg?t=1588408129484#iconfont") format("svg");
        /* iOS 4.1- */
      }

      .iconfont {
        font-family: "iconfont" !important;
        font-size: 16px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }

      .icon-nav-down:before {
        content: "\e6b9";
      }

      .icon-nav-up:before {
        content: "\e6ba";
      }

      .video-wrap .video {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .header {
        position: relative;
        z-index: 2;
        padding: 29px 5.875% 29px 7.625%;
      }

      .header .logo {
        float: left;
        width: 7.6875%;
        height: 3.3125%;
        cursor: pointer;
      }

      .header .logo img {
        width: 100%;
      }

      .header .list,
      .header .volumn {
        float: right;
      }

      .header .list {
        padding: 0px 100px 0;
      }

      .header .list .item:first-child {
        margin-left: 0;
      }

      .header .list .item {
        position: relative;
        display: inline-block;
        margin-left: 50px;
      }

      .header .list .item .nav {
        position: relative;
        display: inline-block;
        height: 20px;
        overflow: visible;
        padding-bottom: 6px;
        color: #fff;
        font-size: 14px;
        line-height: 20px;
        text-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
        transition: border-color 0.3s ease-in;
      }

      .header .list .down-item {
        position: absolute;
        display: none;
        width: 120px;
        left: 0;
        top: 26px;
        border-radius: 2px 2px 6px 6px;
        background-color: hsla(0, 0%, 100%, 0.3);
      }

      .header .list .item .nav {
        font-size: 16px;
        line-height: 22px;
      }

      .header .list .sub-menu .icon-nav {
        display: inline-block;
      }

      .header .list .sub-menu .icon-nav::before {
        content: "\e6b9";
      }

      .header .list .item .iconfont {
        position: relative;
        left: -1px;
        color: #fff;
        font-size: 12px;
      }

      .header .sub-menu:hover .down-item {
        display: block;
      }

      .header .sub-menu:hover .icon-nav::before {
        content: "\e6ba";
      }

      .header .list .down-item li {
        line-height: 50px;
        text-align: center;
      }

      .header .list .down-item li a {
        color: white;
        transition: all 0.5s;
      }

      .header .list .down-item li:first-child {
        padding-top: 10px;
      }

      .header .list .down-item li:last-child {
        padding-bottom: 10px;
      }

      .header .list .down-item li:hover > a {
        color: #ff5000;
        text-shadow: none;
      }

      /* 主区域部分 */
      .main {
        position: absolute;
        left: 7.625%;
        top: 36.333%;
      }

      .main .kwai-slogan {
        margin-bottom: 18px;
        font-weight: 500;
        font-size: 50px;
        color: #fff;
        text-align: left;
        line-height: 72px;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
      }

      .main .qr-code {
        width: 137px;
        width: 8.5625vw;
        margin: 0 2.1875vw 0 0;
        text-align: center;
      }

      .main .btn-wrap,
      .main .qr-code {
        display: inline-block;
        vertical-align: top;
      }

      .main .qr-code .image {
        width: 100%;
        height: 140px;
        height: 8.75vw;
        margin-bottom: 3px;
        border-radius: 6px;
      }

      .main .qr-code .text {
        font-size: 12px;
        line-height: 17px;
        color: #d8d8d8;
      }

      .main .btn-wrap .btn {
        display: block;
        width: 190px;
        height: 58px;
        width: 11.875vw;
        height: 3.625vw;
        background: none no-repeat 50% / contain;
        border-radius: 30px;
        cursor: pointer;
        -webkit-transition: background-image 0.3s;
        -o-transition: background-image 0.3s;
        transition: background-image 0.3s;
        color: #fff;
        font-size: 28px;
        line-height: 58px;
      }

      .main .btn-wrap .ios {
        background-image: url(https://static.yximgs.com/udata/pkg/fe/ios_normal.png);
        margin-bottom: 28px;
      }

      .main .btn-wrap .android {
        background-image: url(https://static.yximgs.com/udata/pkg/fe/android_normal.png);
      }

      /* 页脚 */
      .footer {
        position: absolute;
        bottom: 0;

        width: 100%;
        height: 87px;
        padding: 0 0 23px;
        text-align: center;
      }

      .footer .com-footer {
        margin: 0 auto;
        text-align: center;
      }

      .footer .com-footer .list a {
        margin-right: 30px;
        color: white;
      }
    </style>
  </head>

  <body>
    <div class="video-wrap">
      <video id="video" class="video" loop="" muted="" autoplay="">
        <source
          src="https://ali.static.yximgs.com/udata/pkg/fe/kwai_video.c8e339ab.mp4"
          type="video/mp4"
        />
        抱歉，您的浏览器不支持内嵌视频
      </video>
    </div>
    <div class="header">
      <a href="#" class="logo"
        ><img
          src="https://ali.static.yximgs.com/udata/pkg/fe/kwai_home_logo.png"
          alt="快手"
        />
      </a>
      <ul class="list">
        <li class="item">
          <a href="/" class="nav checked" title="首页">首页</a>
        </li>
        <li class="item sub-menu">
          <a
            href="https://live.kuaishou.com"
            class="nav "
            title="快手直播"
            target="_blank"
            >快手直播</a
          >
          <i class="iconfont icon-nav"></i>
          <ul class="down-item">
            <li>
              <a href="https://live.kuaishou.com" target="_blank">快手直播</a>
            </li>
            <li>
              <a href="https://live.kuaishou.com/live-partner" target="_blank"
                >直播伴侣</a
              >
            </li>
          </ul>
        </li>
        <li class="item sub-menu">
          <a href="javascript:void(0);" class="nav " title="系列产品"
            >系列产品</a
          >
          <i class="iconfont icon-nav"></i>
          <ul class="down-item">
            <li><a href="/kuaiying">快影</a></li>
            <li>
              <a href="http://www.acfun.cn/" target="_blank" rel="nofollow"
                >AcFun</a
              >
            </li>
            <li>
              <a href="https://1tian.kuaishou.com/?f=www" target="_blank"
                >一甜相机</a
              >
            </li>
          </ul>
        </li>
        <li class="item">
          <a
            href="https://music.kuaishou.com"
            class="nav "
            title="音乐人"
            target="_blank"
            >音乐人</a
          >
        </li>
        <li class="item sub-menu">
          <a href="javascript:void(0);" class="nav " title="创作者服务"
            >创作者服务</a
          >
          <i class="iconfont icon-nav"></i>
          <ul class="down-item">
            <li><a href="/verify/" target="_blank">用户认证</a></li>
            <li>
              <a
                href="https://cp.kuaishou.com/article/publish/video?origin=www.kuaishou.com"
                target="_blank"
                >上传视频</a
              >
            </li>
            <li>
              <a href="https://cp.kuaishou.com/" target="_blank"
                >创作者服务平台</a
              >
            </li>
          </ul>
        </li>
        <li class="item">
          <a
            href="https://pay.ssl.kuaishou.com/pay"
            class="nav "
            title="快币充值"
            >快币充值</a
          >
        </li>
        <li class="item sub-menu">
          <a href="/about/contact" class="nav " title="联系我们">联系我们</a>
          <i class="iconfont icon-nav"></i>
          <ul class="down-item">
            <li>
              <a href="https://e.kuaishou.com/" target="_blank" rel="nofollow"
                >商务合作</a
              >
            </li>
            <li><a href="/about/contact">联系我们</a></li>
            <li><a href="/about/">关于我们</a></li>
            <li>
              <a href="https://www.kwaishop.com/" target="_blank" rel="nofollow"
                >快手电商</a
              >
            </li>
            <li>
              <a href="https://mcn.kuaishou.com/" target="_blank" rel="nofollow"
                >机构入驻</a
              >
            </li>
            <li>
              <a
                href="https://zhaopin.kuaishou.com/"
                target="_blank"
                rel="nofollow"
                >加入我们</a
              >
            </li>
            <li><a href="/help/report">违规举报</a></li>
          </ul>
        </li>
        <li class="item sub-menu">
          <a href="javascript:void(0);" class="nav " title="社会责任"
            >社会责任</a
          >
          <i class="iconfont icon-nav"></i>
          <ul class="down-item">
            <li><a href="/csr/" target="_blank">快手行动</a></li>
            <li><a href="/committee/">专家委员会</a></li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="main">
      <h1 class="kwai-slogan">快手，<br />记录世界&nbsp;记录你</h1>
      <div class="qr-code">
        <img
          src="https://ali.static.yximgs.com/udata/pkg/fe/kwai_qrcode.png"
          alt="二维码"
          class="image"
        />
        <span class="text">扫码下载&nbsp;快手</span>
      </div>
      <div class="btn-wrap">
        <a
          href="https://apps.apple.com/cn/app/快手/id440948110"
          class="btn ios"
        ></a>
        <a
          href="https://m.kuaishou.com/download/kwai?platform=android&amp;f=www_home"
          class="btn android"
        ></a>
      </div>
    </div>
    <div class="footer">
      <div class="com-footer">
        <div class="list">
          <a href="//www.kuaishou.com/about/" class="item" title="关于快手"
            >关于快手</a
          >
          <a
            href="//www.kuaishou.com/help/feedback"
            class="item"
            title="快手帮助中心"
            >帮助中心</a
          >
          <a
            href="https://zhaopin.kuaishou.com/"
            target="_blank"
            class="item"
            title="快手招聘"
            >加入我们</a
          >
          <a
            href="//www.kuaishou.com/about/contact"
            class="item"
            title="联系快手"
            >联系我们</a
          >
          <a href="//www.kuaishou.com/about/policy" target="_blank" class="item"
            >法律声明</a
          >
        </div>
        <p class="info">
          <span>www.kuaishou.com <span id="this-year">2020</span></span>
          <span>@ All rights Reserved</span>
          <span>京网文（2017）2551-280号</span>
          <span>京ICP备07035647号-4</span>
          <a
            target="_blank"
            rel="nofollow"
            href="https://zzlz.gsxt.gov.cn/businessCheck/verifKey.do?showType=p&amp;serial=11000020190617100242000003563691-SAIC_SHOW_10002020190621144025721&amp;signData=MEQCIP0/+UH+ntaa/CsUaIa29DiFE/5haWZtEr21SBp7ZH3FAiAaZbzsn7SkDMMICyfCAsZly9BxiPl94sRConkJ4tEgzw=="
            ><span class="license-icon"></span>
          </a>
          <a
            class="police-link"
            target="_blank"
            rel="nofollow"
            href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802020421"
            >京公网安备 11010802020421号</a
          >
        </p>
      </div>
    </div>
  </body>
</html>